From c87e9670525f1227cb84eb98f74da8aac858ef9b Mon Sep 17 00:00:00 2001 From: Hixie Date: Mon, 26 Oct 2015 11:19:56 -0700 Subject: [PATCH] Radio button 'disabled' state. Also: - give card_collection an option to turn on or off the edit widgets - give card_collection an option to control text alignment (when not editing) - give card_collection a "dump" option to aid debugging - make the gesture detector report which gestures it is listening to --- examples/widgets/card_collection.dart | 68 ++++++++++++++++--- packages/flutter/lib/src/material/colors.dart | 4 +- packages/flutter/lib/src/material/radio.dart | 14 ++-- .../lib/src/widgets/gesture_detector.dart | 23 +++++++ 4 files changed, 93 insertions(+), 16 deletions(-) diff --git a/examples/widgets/card_collection.dart b/examples/widgets/card_collection.dart index b212e5c763b..ec71ec23c85 100644 --- a/examples/widgets/card_collection.dart +++ b/examples/widgets/card_collection.dart @@ -6,6 +6,7 @@ import 'dart:ui' as ui; import 'package:flutter/material.dart'; import 'package:flutter/painting.dart'; +import 'package:flutter/rendering.dart'; class CardModel { CardModel(this.value, this.height) { @@ -36,6 +37,8 @@ class CardCollectionState extends State { Map _primaryColor = Colors.deepPurple; List _cardModels; DismissDirection _dismissDirection = DismissDirection.horizontal; + TextStyle _textStyle = new TextStyle(textAlign: TextAlign.center); + bool _editable = true; bool _snapToCenter = false; bool _fixedSizeCards = false; bool _sunshine = false; @@ -120,6 +123,7 @@ class CardCollectionState extends State { data: const IconThemeData(color: IconThemeColor.black), child: new Block([ new DrawerHeader(child: new Text('Options')), + buildDrawerCheckbox("Make card labels editable", _editable, _toggleEditable), buildDrawerCheckbox("Snap fling scrolls to center", _snapToCenter, _toggleSnapToCenter), buildDrawerCheckbox("Fixed size cards", _fixedSizeCards, _toggleFixedSizeCards), buildDrawerCheckbox("Let the sun shine", _sunshine, _toggleSunshine), @@ -132,6 +136,16 @@ class CardCollectionState extends State { buildDrawerDirectionRadioItem("Dismiss horizontally", DismissDirection.horizontal, _dismissDirection, _changeDismissDirection, icon: 'action/code'), buildDrawerDirectionRadioItem("Dismiss left", DismissDirection.left, _dismissDirection, _changeDismissDirection, icon: 'navigation/arrow_back'), buildDrawerDirectionRadioItem("Dismiss right", DismissDirection.right, _dismissDirection, _changeDismissDirection, icon: 'navigation/arrow_forward'), + new DrawerDivider(), + buildFontRadioItem("Left-align text", new TextStyle(textAlign: TextAlign.left), _textStyle, _changeTextStyle, icon: 'editor/format_align_left', enabled: !_editable), + buildFontRadioItem("Center-align text", new TextStyle(textAlign: TextAlign.center), _textStyle, _changeTextStyle, icon: 'editor/format_align_center', enabled: !_editable), + buildFontRadioItem("Right-align text", new TextStyle(textAlign: TextAlign.right), _textStyle, _changeTextStyle, icon: 'editor/format_align_right', enabled: !_editable), + new DrawerDivider(), + new DrawerItem( + icon: 'device/dvr', + onPressed: () { debugDumpApp(); debugDumpRenderTree(); }, + child: new Text('Dump App to Console') + ), ]) ) ); @@ -142,6 +156,12 @@ class CardCollectionState extends State { return "dismiss ${s.substring(s.indexOf('.') + 1)}"; } + void _toggleEditable() { + setState(() { + _editable = !_editable; + }); + } + void _toggleFixedSizeCards() { setState(() { _fixedSizeCards = !_fixedSizeCards; @@ -171,7 +191,12 @@ class CardCollectionState extends State { setState(() { _dismissDirection = newDismissDirection; }); - Navigator.of(context).pop(); + } + + void _changeTextStyle(TextStyle newTextStyle) { + setState(() { + _textStyle = newTextStyle; + }); } Widget buildDrawerCheckbox(String label, bool value, void callback()) { @@ -184,30 +209,48 @@ class CardCollectionState extends State { ); } - Widget buildDrawerColorRadioItem(String label, Map itemValue, Map currentValue, ValueChanged> onChanged, { String icon }) { + Widget buildDrawerColorRadioItem(String label, Map itemValue, Map currentValue, ValueChanged> onChanged, { String icon, bool enabled: true }) { return new DrawerItem( icon: icon, - onPressed: () { onChanged(itemValue); }, + onPressed: enabled ? () { onChanged(itemValue); } : null, child: new Row([ new Flexible(child: new Text(label)), new Radio>( value: itemValue, groupValue: currentValue, + enabled: enabled, onChanged: onChanged ) ]) ); } - Widget buildDrawerDirectionRadioItem(String label, DismissDirection itemValue, DismissDirection currentValue, ValueChanged onChanged, { String icon }) { + Widget buildDrawerDirectionRadioItem(String label, DismissDirection itemValue, DismissDirection currentValue, ValueChanged onChanged, { String icon, bool enabled: true }) { return new DrawerItem( icon: icon, - onPressed: () { onChanged(itemValue); }, + onPressed: enabled ? () { onChanged(itemValue); } : null, child: new Row([ new Flexible(child: new Text(label)), new Radio( value: itemValue, groupValue: currentValue, + enabled: enabled, + onChanged: onChanged + ) + ]) + ); + } + + Widget buildFontRadioItem(String label, TextStyle itemValue, TextStyle currentValue, ValueChanged onChanged, { String icon, bool enabled: true }) { + return new DrawerItem( + icon: icon, + onPressed: enabled ? () { onChanged(itemValue); } : null, + child: new Row([ + new Flexible(child: new Text(label)), + new Radio( + value: itemValue, + groupValue: currentValue, + enabled: enabled, onChanged: onChanged ) ]) @@ -238,9 +281,8 @@ class CardCollectionState extends State { child: new Container( height: cardModel.height, padding: const EdgeDims.all(8.0), - child: new Center( - child: new DefaultTextStyle( - style: cardLabelStyle, + child: _editable ? + new Center( child: new Input( key: new GlobalObjectKey(cardModel), initialValue: cardModel.label, @@ -249,7 +291,15 @@ class CardCollectionState extends State { } ) ) - ) + : new DefaultTextStyle( + style: DefaultTextStyle.of(context).merge(cardLabelStyle).merge(_textStyle), + child: new Column([ + new Text(cardModel.label) + ], + alignItems: FlexAlignItems.stretch, + justifyContent: FlexJustifyContent.center + ) + ) ) ) ); diff --git a/packages/flutter/lib/src/material/colors.dart b/packages/flutter/lib/src/material/colors.dart index 68fa5913e36..01c8d4b9a59 100644 --- a/packages/flutter/lib/src/material/colors.dart +++ b/packages/flutter/lib/src/material/colors.dart @@ -14,11 +14,11 @@ class Colors { static const black = const Color(0xFF000000); static const black87 = const Color(0xDD000000); static const black54 = const Color(0x8A000000); - static const black26 = const Color(0x42000000); // text of disabled flat button in light theme + static const black26 = const Color(0x42000000); // disabled radio buttons and text of disabled flat buttons in light theme (26% black) static const black12 = const Color(0x1F000000); // background of disabled raised buttons in light theme static const white = const Color(0xFFFFFFFF); static const white70 = const Color(0xB3FFFFFF); - static const white30 = const Color(0x4DFFFFFF); // text of disabled flat button in dark theme + static const white30 = const Color(0x4DFFFFFF); // disabled radio buttons and text of disabled flat buttons in dark theme (30% white) static const white12 = const Color(0x1FFFFFFF); // background of disabled raised buttons in dark theme static const Map red = const { diff --git a/packages/flutter/lib/src/material/radio.dart b/packages/flutter/lib/src/material/radio.dart index b8442933cc7..1041b68355b 100644 --- a/packages/flutter/lib/src/material/radio.dart +++ b/packages/flutter/lib/src/material/radio.dart @@ -6,14 +6,13 @@ import 'dart:ui' as ui; import 'package:flutter/widgets.dart'; +import 'colors.dart'; import 'theme.dart'; -const Color _kLightOffColor = const Color(0x8A000000); -const Color _kDarkOffColor = const Color(0xB2FFFFFF); - class Radio extends StatelessComponent { Radio({ Key key, + this.enabled, this.value, this.groupValue, this.onChanged @@ -21,15 +20,18 @@ class Radio extends StatelessComponent { assert(onChanged != null); } + final bool enabled; final T value; final T groupValue; final ValueChanged onChanged; Color _getColor(BuildContext context) { ThemeData themeData = Theme.of(context); + if (!enabled) + return themeData.brightness == ThemeBrightness.light ? Colors.black26 : Colors.white30; if (value == groupValue) return themeData.accentColor; - return themeData.brightness == ThemeBrightness.light ? _kLightOffColor : _kDarkOffColor; + return themeData.brightness == ThemeBrightness.light ? Colors.black54 : Colors.white70; } Widget build(BuildContext context) { @@ -37,7 +39,7 @@ class Radio extends StatelessComponent { const double kOuterRadius = kDiameter / 2; const double kInnerRadius = 5.0; return new GestureDetector( - onTap: () => onChanged(value), + onTap: enabled ? () => onChanged(value) : null, child: new Container( margin: const EdgeDims.symmetric(horizontal: 5.0), width: kDiameter, @@ -45,6 +47,8 @@ class Radio extends StatelessComponent { child: new CustomPaint( onPaint: (Canvas canvas, Size size) { + // TODO(ianh): ink radial reaction + // Draw the outer circle Paint paint = new Paint() ..color = _getColor(context) diff --git a/packages/flutter/lib/src/widgets/gesture_detector.dart b/packages/flutter/lib/src/widgets/gesture_detector.dart index 2bab4d55d54..a5e0876381b 100644 --- a/packages/flutter/lib/src/widgets/gesture_detector.dart +++ b/packages/flutter/lib/src/widgets/gesture_detector.dart @@ -243,4 +243,27 @@ class _GestureDetectorState extends State { child: config.child ); } + + void debugFillDescription(List description) { + List gestures = []; + if (_tap != null) + gestures.add('tap'); + if (_doubleTap != null) + gestures.add('double tap'); + if (_showPress != null) + gestures.add('show press'); + if (_longPress != null) + gestures.add('long press'); + if (_verticalDrag != null) + gestures.add('vertical drag'); + if (_horizontalDrag != null) + gestures.add('horizontal drag'); + if (_pan != null) + gestures.add('pan'); + if (_scale != null) + gestures.add('scale'); + if (gestures.isEmpty); + gestures.add(''); + description.add('gestures: ${gestures.join(", ")}'); + } }