Skip to content

Commit

Permalink
Merge pull request flutter#1805 from Hixie/Radio-Enabled
Browse files Browse the repository at this point in the history 
Radio button 'disabled' state.
  • Loading branch information
@Hixie
Hixie committed Oct 26, 2015
2 parents ff77fbe + 800ff31 commit cd6f852
Show file tree
Hide file tree
Showing 4 changed files with 93 additions and 16 deletions.
68 changes: 59 additions & 9 deletions examples/widgets/card_collection.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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),
Expand All @@ -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')
),
])
)
);
Expand All @@ -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;
Expand Down Expand Up @@ -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()) {
Expand All @@ -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
)
])
Expand Down Expand Up @@ -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,
Expand All @@ -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
)
)
)
)
);
Expand Down
4 changes: 2 additions & 2 deletions sky/packages/sky/lib/src/material/colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>{
Expand Down
14 changes: 9 additions & 5 deletions sky/packages/sky/lib/src/material/radio.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,45 +6,49 @@ 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
}) : super(key: key) {
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) {
const double kDiameter = 16.0;
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,
height: kDiameter,
child: new CustomPaint(
onPaint: (Canvas canvas, Size size) {

// TODO(ianh): ink radial reaction

// Draw the outer circle
Paint paint = new Paint()
..color = _getColor(context)
Expand Down
23 changes: 23 additions & 0 deletions sky/packages/sky/lib/src/widgets/gesture_detector.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(", ")}');
}
}

0 comments on commit cd6f852

Please sign in to comment.