Merge pull request #1535 from abarth/button_highlight

FlatButton highlights but doesn't tap around edge

packages/flutter/lib/src/widgets/drawer_item.dart

@@ -26,7 +26,15 @@ class DrawerItem extends StatefulComponent {
   _DrawerItemState createState() => new _DrawerItemState();
 }
 
-class _DrawerItemState extends ButtonState<DrawerItem> {
+class _DrawerItemState extends State<DrawerItem> {
+  bool _highlight = false;
+
+  void _handleHighlightChanged(bool value) {
+    setState(() {
+      _highlight = value;
+    });
+  }
+
   TextStyle _getTextStyle(ThemeData themeData) {
     TextStyle result = themeData.text.body2;
     if (config.selected)
@@ -35,7 +43,7 @@ class _DrawerItemState extends ButtonState<DrawerItem> {
   }
 
   Color _getBackgroundColor(ThemeData themeData) {
-    if (highlight)
+    if (_highlight)
       return themeData.highlightColor;
     if (config.selected)
       return themeData.selectedColor;
@@ -48,7 +56,7 @@ class _DrawerItemState extends ButtonState<DrawerItem> {
     return new sky.ColorFilter.mode(const Color(0x73000000), sky.TransferMode.dstIn);
   }
 
-  Widget buildContent(BuildContext context) {
+  Widget build(BuildContext context) {
     ThemeData themeData = Theme.of(context);
 
     List<Widget> flexChildren = new List<Widget>();
@@ -80,6 +88,7 @@ class _DrawerItemState extends ButtonState<DrawerItem> {
       decoration: new BoxDecoration(backgroundColor: _getBackgroundColor(themeData)),
       child: new InkWell(
         onTap: config.onPressed,
+        onHighlightChanged: _handleHighlightChanged,
         child: new Row(flexChildren)
       )
     );

packages/flutter/lib/src/widgets/floating_action_button.dart

@@ -30,8 +30,16 @@ class FloatingActionButton extends StatefulComponent {
   _FloatingActionButtonState createState() => new _FloatingActionButtonState();
 }
 
-class _FloatingActionButtonState extends ButtonState<FloatingActionButton> {
-  Widget buildContent(BuildContext context) {
+class _FloatingActionButtonState extends State<FloatingActionButton> {
+  bool _highlight = false;
+
+  void _handleHighlightChanged(bool value) {
+    setState(() {
+      _highlight = value;
+    });
+  }
+
+  Widget build(BuildContext context) {
     IconThemeColor iconThemeColor = IconThemeColor.white;
     Color materialColor = config.backgroundColor;
     if (materialColor == null) {
@@ -43,13 +51,14 @@ class _FloatingActionButtonState extends ButtonState<FloatingActionButton> {
     return new Material(
       color: materialColor,
       type: MaterialType.circle,
-      level: highlight ? 3 : 2,
+      level: _highlight ? 3 : 2,
       child: new ClipOval(
         child: new Container(
           width: _kSize,
           height: _kSize,
           child: new InkWell(
             onTap: config.onPressed,
+            onHighlightChanged: _handleHighlightChanged,
             child: new Center(
               child: new IconTheme(
                 data: new IconThemeData(color: iconThemeColor),

packages/flutter/lib/src/widgets/ink_well.dart

@@ -98,13 +98,17 @@ class _InkSplash {
   }
 }
 
+typedef _HighlightChangedCallback(bool value);
+
 class _RenderInkWell extends RenderProxyBox {
   _RenderInkWell({
     RenderBox child,
     GestureTapCallback onTap,
-    GestureLongPressCallback onLongPress
+    GestureLongPressCallback onLongPress,
+    _HighlightChangedCallback onHighlightChanged
   }) : super(child) {
     this.onTap = onTap;
+    this.onHighlightChanged = onHighlightChanged;
     this.onLongPress = onLongPress;
   }
 
@@ -115,6 +119,13 @@ class _RenderInkWell extends RenderProxyBox {
     _syncTapRecognizer();
   }
 
+  _HighlightChangedCallback get onHighlightChanged => _onHighlightChanged;
+  _HighlightChangedCallback _onHighlightChanged;
+  void set onHighlightChanged (_HighlightChangedCallback value) {
+    _onHighlightChanged = value;
+    _syncTapRecognizer();
+  }
+
   GestureTapCallback get onLongPress => _onLongPress;
   GestureTapCallback _onLongPress;
   void set onLongPress (GestureTapCallback value) {
@@ -148,10 +159,11 @@ class _RenderInkWell extends RenderProxyBox {
   }
 
   void _syncTapRecognizer() {
-    if (onTap == null) {
+    if (onTap == null && onHighlightChanged == null) {
       _disposeTapRecognizer();
     } else {
       _tap ??= new TapGestureRecognizer(router: FlutterBinding.instance.pointerRouter)
+        ..onTapDown = _handleTapDown
         ..onTap = _handleTap
         ..onTapCancel = _handleTapCancel;
     }
@@ -176,13 +188,26 @@ class _RenderInkWell extends RenderProxyBox {
     _longPress = null;
   }
 
+  void _handleTapDown() {
+    if (onHighlightChanged != null)
+      onHighlightChanged(true);
+  }
+
   void _handleTap() {
-    _splashes.last?.confirm();
-    onTap();
+    if (_splashes.isNotEmpty)
+      _splashes.last.confirm();
+
+    if (onHighlightChanged != null)
+      onHighlightChanged(false);
+
+    if (onTap != null)
+      onTap();
   }
 
   void _handleTapCancel() {
     _splashes.last?.cancel();
+    if (onHighlightChanged != null)
+      onHighlightChanged(false);
   }
 
   void _handleLongPress() {
@@ -209,16 +234,19 @@ class InkWell extends OneChildRenderObjectWidget {
     Key key,
     Widget child,
     this.onTap,
+    this.onHighlightChanged,
     this.onLongPress
   }) : super(key: key, child: child);
 
   final GestureTapCallback onTap;
+  final _HighlightChangedCallback onHighlightChanged;
   final GestureLongPressCallback onLongPress;
 
-  _RenderInkWell createRenderObject() => new _RenderInkWell(onTap: onTap, onLongPress: onLongPress);
+  _RenderInkWell createRenderObject() => new _RenderInkWell(onTap: onTap, onHighlightChanged: onHighlightChanged, onLongPress: onLongPress);
 
   void updateRenderObject(_RenderInkWell renderObject, InkWell oldWidget) {
     renderObject.onTap = onTap;
+    renderObject.onHighlightChanged = onHighlightChanged;
     renderObject.onLongPress = onLongPress;
   }
 }

packages/flutter/lib/src/widgets/material_button.dart

@@ -25,11 +25,19 @@ abstract class MaterialButton extends StatefulComponent {
   final GestureTapCallback onPressed;
 }
 
-abstract class MaterialButtonState<T extends MaterialButton> extends ButtonState<T> {
+abstract class MaterialButtonState<T extends MaterialButton> extends State<T> {
+  bool highlight = false;
+
   Color getColor(BuildContext context);
   int get level;
 
-  Widget buildContent(BuildContext context) {
+  void _handleHighlightChanged(bool value) {
+    setState(() {
+      highlight = value;
+    });
+  }
+
+  Widget build(BuildContext context) {
     Widget contents = new Container(
       padding: new EdgeDims.symmetric(horizontal: 8.0),
       child: new Center(
@@ -47,6 +55,7 @@ abstract class MaterialButtonState<T extends MaterialButton> extends ButtonState
         color: getColor(context),
         child: new InkWell(
           onTap: config.enabled ? config.onPressed : null,
+          onHighlightChanged: config.enabled ? _handleHighlightChanged : null,
           child: contents
         )
       )