mirror of
https://github.com/flutter/flutter.git
synced 2025-06-03 00:51:18 +00:00
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
This commit is contained in:
parent
5d0c090d44
commit
c87e967052
@ -6,6 +6,7 @@ import 'dart:ui' as ui;
|
|||||||
|
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter/painting.dart';
|
import 'package:flutter/painting.dart';
|
||||||
|
import 'package:flutter/rendering.dart';
|
||||||
|
|
||||||
class CardModel {
|
class CardModel {
|
||||||
CardModel(this.value, this.height) {
|
CardModel(this.value, this.height) {
|
||||||
@ -36,6 +37,8 @@ class CardCollectionState extends State<CardCollection> {
|
|||||||
Map<int, Color> _primaryColor = Colors.deepPurple;
|
Map<int, Color> _primaryColor = Colors.deepPurple;
|
||||||
List<CardModel> _cardModels;
|
List<CardModel> _cardModels;
|
||||||
DismissDirection _dismissDirection = DismissDirection.horizontal;
|
DismissDirection _dismissDirection = DismissDirection.horizontal;
|
||||||
|
TextStyle _textStyle = new TextStyle(textAlign: TextAlign.center);
|
||||||
|
bool _editable = true;
|
||||||
bool _snapToCenter = false;
|
bool _snapToCenter = false;
|
||||||
bool _fixedSizeCards = false;
|
bool _fixedSizeCards = false;
|
||||||
bool _sunshine = false;
|
bool _sunshine = false;
|
||||||
@ -120,6 +123,7 @@ class CardCollectionState extends State<CardCollection> {
|
|||||||
data: const IconThemeData(color: IconThemeColor.black),
|
data: const IconThemeData(color: IconThemeColor.black),
|
||||||
child: new Block(<Widget>[
|
child: new Block(<Widget>[
|
||||||
new DrawerHeader(child: new Text('Options')),
|
new DrawerHeader(child: new Text('Options')),
|
||||||
|
buildDrawerCheckbox("Make card labels editable", _editable, _toggleEditable),
|
||||||
buildDrawerCheckbox("Snap fling scrolls to center", _snapToCenter, _toggleSnapToCenter),
|
buildDrawerCheckbox("Snap fling scrolls to center", _snapToCenter, _toggleSnapToCenter),
|
||||||
buildDrawerCheckbox("Fixed size cards", _fixedSizeCards, _toggleFixedSizeCards),
|
buildDrawerCheckbox("Fixed size cards", _fixedSizeCards, _toggleFixedSizeCards),
|
||||||
buildDrawerCheckbox("Let the sun shine", _sunshine, _toggleSunshine),
|
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 horizontally", DismissDirection.horizontal, _dismissDirection, _changeDismissDirection, icon: 'action/code'),
|
||||||
buildDrawerDirectionRadioItem("Dismiss left", DismissDirection.left, _dismissDirection, _changeDismissDirection, icon: 'navigation/arrow_back'),
|
buildDrawerDirectionRadioItem("Dismiss left", DismissDirection.left, _dismissDirection, _changeDismissDirection, icon: 'navigation/arrow_back'),
|
||||||
buildDrawerDirectionRadioItem("Dismiss right", DismissDirection.right, _dismissDirection, _changeDismissDirection, icon: 'navigation/arrow_forward'),
|
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)}";
|
return "dismiss ${s.substring(s.indexOf('.') + 1)}";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void _toggleEditable() {
|
||||||
|
setState(() {
|
||||||
|
_editable = !_editable;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
void _toggleFixedSizeCards() {
|
void _toggleFixedSizeCards() {
|
||||||
setState(() {
|
setState(() {
|
||||||
_fixedSizeCards = !_fixedSizeCards;
|
_fixedSizeCards = !_fixedSizeCards;
|
||||||
@ -171,7 +191,12 @@ class CardCollectionState extends State<CardCollection> {
|
|||||||
setState(() {
|
setState(() {
|
||||||
_dismissDirection = newDismissDirection;
|
_dismissDirection = newDismissDirection;
|
||||||
});
|
});
|
||||||
Navigator.of(context).pop();
|
}
|
||||||
|
|
||||||
|
void _changeTextStyle(TextStyle newTextStyle) {
|
||||||
|
setState(() {
|
||||||
|
_textStyle = newTextStyle;
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget buildDrawerCheckbox(String label, bool value, void callback()) {
|
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(
|
return new DrawerItem(
|
||||||
icon: icon,
|
icon: icon,
|
||||||
onPressed: () { onChanged(itemValue); },
|
onPressed: enabled ? () { onChanged(itemValue); } : null,
|
||||||
child: new Row(<Widget>[
|
child: new Row(<Widget>[
|
||||||
new Flexible(child: new Text(label)),
|
new Flexible(child: new Text(label)),
|
||||||
new Radio<Map<int, Color>>(
|
new Radio<Map<int, Color>>(
|
||||||
value: itemValue,
|
value: itemValue,
|
||||||
groupValue: currentValue,
|
groupValue: currentValue,
|
||||||
|
enabled: enabled,
|
||||||
onChanged: onChanged
|
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(
|
return new DrawerItem(
|
||||||
icon: icon,
|
icon: icon,
|
||||||
onPressed: () { onChanged(itemValue); },
|
onPressed: enabled ? () { onChanged(itemValue); } : null,
|
||||||
child: new Row(<Widget>[
|
child: new Row(<Widget>[
|
||||||
new Flexible(child: new Text(label)),
|
new Flexible(child: new Text(label)),
|
||||||
new Radio<DismissDirection>(
|
new Radio<DismissDirection>(
|
||||||
value: itemValue,
|
value: itemValue,
|
||||||
groupValue: currentValue,
|
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
|
onChanged: onChanged
|
||||||
)
|
)
|
||||||
])
|
])
|
||||||
@ -238,9 +281,8 @@ class CardCollectionState extends State<CardCollection> {
|
|||||||
child: new Container(
|
child: new Container(
|
||||||
height: cardModel.height,
|
height: cardModel.height,
|
||||||
padding: const EdgeDims.all(8.0),
|
padding: const EdgeDims.all(8.0),
|
||||||
child: new Center(
|
child: _editable ?
|
||||||
child: new DefaultTextStyle(
|
new Center(
|
||||||
style: cardLabelStyle,
|
|
||||||
child: new Input(
|
child: new Input(
|
||||||
key: new GlobalObjectKey(cardModel),
|
key: new GlobalObjectKey(cardModel),
|
||||||
initialValue: cardModel.label,
|
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
|
||||||
|
)
|
||||||
|
)
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
@ -14,11 +14,11 @@ class Colors {
|
|||||||
static const black = const Color(0xFF000000);
|
static const black = const Color(0xFF000000);
|
||||||
static const black87 = const Color(0xDD000000);
|
static const black87 = const Color(0xDD000000);
|
||||||
static const black54 = const Color(0x8A000000);
|
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 black12 = const Color(0x1F000000); // background of disabled raised buttons in light theme
|
||||||
static const white = const Color(0xFFFFFFFF);
|
static const white = const Color(0xFFFFFFFF);
|
||||||
static const white70 = const Color(0xB3FFFFFF);
|
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 white12 = const Color(0x1FFFFFFF); // background of disabled raised buttons in dark theme
|
||||||
|
|
||||||
static const Map<int, Color> red = const <int, Color>{
|
static const Map<int, Color> red = const <int, Color>{
|
||||||
|
@ -6,14 +6,13 @@ import 'dart:ui' as ui;
|
|||||||
|
|
||||||
import 'package:flutter/widgets.dart';
|
import 'package:flutter/widgets.dart';
|
||||||
|
|
||||||
|
import 'colors.dart';
|
||||||
import 'theme.dart';
|
import 'theme.dart';
|
||||||
|
|
||||||
const Color _kLightOffColor = const Color(0x8A000000);
|
|
||||||
const Color _kDarkOffColor = const Color(0xB2FFFFFF);
|
|
||||||
|
|
||||||
class Radio<T> extends StatelessComponent {
|
class Radio<T> extends StatelessComponent {
|
||||||
Radio({
|
Radio({
|
||||||
Key key,
|
Key key,
|
||||||
|
this.enabled,
|
||||||
this.value,
|
this.value,
|
||||||
this.groupValue,
|
this.groupValue,
|
||||||
this.onChanged
|
this.onChanged
|
||||||
@ -21,15 +20,18 @@ class Radio<T> extends StatelessComponent {
|
|||||||
assert(onChanged != null);
|
assert(onChanged != null);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
final bool enabled;
|
||||||
final T value;
|
final T value;
|
||||||
final T groupValue;
|
final T groupValue;
|
||||||
final ValueChanged<T> onChanged;
|
final ValueChanged<T> onChanged;
|
||||||
|
|
||||||
Color _getColor(BuildContext context) {
|
Color _getColor(BuildContext context) {
|
||||||
ThemeData themeData = Theme.of(context);
|
ThemeData themeData = Theme.of(context);
|
||||||
|
if (!enabled)
|
||||||
|
return themeData.brightness == ThemeBrightness.light ? Colors.black26 : Colors.white30;
|
||||||
if (value == groupValue)
|
if (value == groupValue)
|
||||||
return themeData.accentColor;
|
return themeData.accentColor;
|
||||||
return themeData.brightness == ThemeBrightness.light ? _kLightOffColor : _kDarkOffColor;
|
return themeData.brightness == ThemeBrightness.light ? Colors.black54 : Colors.white70;
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
@ -37,7 +39,7 @@ class Radio<T> extends StatelessComponent {
|
|||||||
const double kOuterRadius = kDiameter / 2;
|
const double kOuterRadius = kDiameter / 2;
|
||||||
const double kInnerRadius = 5.0;
|
const double kInnerRadius = 5.0;
|
||||||
return new GestureDetector(
|
return new GestureDetector(
|
||||||
onTap: () => onChanged(value),
|
onTap: enabled ? () => onChanged(value) : null,
|
||||||
child: new Container(
|
child: new Container(
|
||||||
margin: const EdgeDims.symmetric(horizontal: 5.0),
|
margin: const EdgeDims.symmetric(horizontal: 5.0),
|
||||||
width: kDiameter,
|
width: kDiameter,
|
||||||
@ -45,6 +47,8 @@ class Radio<T> extends StatelessComponent {
|
|||||||
child: new CustomPaint(
|
child: new CustomPaint(
|
||||||
onPaint: (Canvas canvas, Size size) {
|
onPaint: (Canvas canvas, Size size) {
|
||||||
|
|
||||||
|
// TODO(ianh): ink radial reaction
|
||||||
|
|
||||||
// Draw the outer circle
|
// Draw the outer circle
|
||||||
Paint paint = new Paint()
|
Paint paint = new Paint()
|
||||||
..color = _getColor(context)
|
..color = _getColor(context)
|
||||||
|
@ -243,4 +243,27 @@ class _GestureDetectorState extends State<GestureDetector> {
|
|||||||
child: config.child
|
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(", ")}');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user