Skip to content

F
Front-End
Commit c87e9670 authored by Hixie's avatar Hixie
Browse files
Options

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
parent 5d0c090d
Hide whitespace changes
Inline Side-by-side
Showing with 93 additions and 16 deletions
examples/widgets/card_collection.dart
View file @ c87e9670
......@@ -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<CardCollection> {
Map<int, Color> _primaryColor = Colors.deepPurple;
List<CardModel> _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<CardCollection> {
data: const IconThemeData(color: IconThemeColor.black),
child: new Block(<Widget>[
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<CardCollection> {
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<CardCollection> {
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<CardCollection> {
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<CardCollection> {
);
}
Widget buildDrawerColorRadioItem(String label, Map<int, Color> itemValue, Map<int, Color> currentValue, ValueChanged<Map<int, Color>> onChanged, { String icon }) {
Widget buildDrawerColorRadioItem(String label, Map<int, Color> itemValue, Map<int, Color> currentValue, ValueChanged<Map<int, Color>> onChanged, { String icon, bool enabled: true }) {
return new DrawerItem(
icon: icon,
onPressed: () { onChanged(itemValue); },
onPressed: enabled ? () { onChanged(itemValue); } : null,
child: new Row(<Widget>[
new Flexible(child: new Text(label)),
new Radio<Map<int, Color>>(
value: itemValue,
groupValue: currentValue,
enabled: enabled,
onChanged: onChanged
)
])
);
}
Widget buildDrawerDirectionRadioItem(String label, DismissDirection itemValue, DismissDirection currentValue, ValueChanged<DismissDirection> onChanged, { String icon }) {
Widget buildDrawerDirectionRadioItem(String label, DismissDirection itemValue, DismissDirection currentValue, ValueChanged<DismissDirection> onChanged, { String icon, bool enabled: true }) {
return new DrawerItem(
icon: icon,
onPressed: () { onChanged(itemValue); },
onPressed: enabled ? () { onChanged(itemValue); } : null,
child: new Row(<Widget>[
new Flexible(child: new Text(label)),
new Radio<DismissDirection>(
value: itemValue,
groupValue: currentValue,
enabled: enabled,
onChanged: onChanged
)
])
);
}
Widget buildFontRadioItem(String label, TextStyle itemValue, TextStyle currentValue, ValueChanged<TextStyle> onChanged, { String icon, bool enabled: true }) {
return new DrawerItem(
icon: icon,
onPressed: enabled ? () { onChanged(itemValue); } : null,
child: new Row(<Widget>[
new Flexible(child: new Text(label)),
new Radio<TextStyle>(
value: itemValue,
groupValue: currentValue,
enabled: enabled,
onChanged: onChanged
)
])
......@@ -238,9 +281,8 @@ class CardCollectionState extends State<CardCollection> {
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<CardCollection> {
}
)
)
)
: new DefaultTextStyle(
style: DefaultTextStyle.of(context).merge(cardLabelStyle).merge(_textStyle),
child: new Column(<Widget>[
new Text(cardModel.label)
],
alignItems: FlexAlignItems.stretch,
justifyContent: FlexJustifyContent.center
)
)
)
)
);
......
packages/flutter/lib/src/material/colors.dart
View file @ c87e9670
......@@ -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<int, Color> red = const <int, Color>{
......
packages/flutter/lib/src/material/radio.dart
View file @ c87e9670
......@@ -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<T> extends StatelessComponent {
Radio({
Key key,
this.enabled,
this.value,
this.groupValue,
this.onChanged
......@@ -21,15 +20,18 @@ class Radio<T> extends StatelessComponent {
assert(onChanged != null);
}
final bool enabled;
final T value;
final T groupValue;
final ValueChanged<T> 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<T> 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<T> 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)
......
packages/flutter/lib/src/widgets/gesture_detector.dart
View file @ c87e9670
......@@ -243,4 +243,27 @@ class _GestureDetectorState extends State<GestureDetector> {
child: config.child
);
}
void debugFillDescription(List<String> description) {
List<String> gestures = <String>[];
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('<none>');
description.add('gestures: ${gestures.join(", ")}');
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

HIAST - GitLab