Skip to content

F
Front-End
Unverified Commit 2bd7f9ff authored by Shi-Hao Hong's avatar Shi-Hao Hong Committed by GitHub
Browse files
Options

Update ToggleButtons constraints default and add new constraints parameter (#39857) 

* Add constraints property, updated default constraints for ToggleButtons to 48x48

* Add kMinInteractiveDimension constant to ToggleButtons
parent a7cfdbd3
Hide whitespace changes
Inline Side-by-side
Showing with 199 additions and 0 deletions
packages/flutter/lib/src/material/toggle_buttons.dart
View file @ 2bd7f9ff
......@@ -9,6 +9,7 @@ import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'button.dart';
import 'constants.dart';
import 'debug.dart';
import 'theme.dart';
import 'theme_data.dart';
......@@ -166,6 +167,7 @@ class ToggleButtons extends StatelessWidget {
@required this.isSelected,
this.onPressed,
this.textStyle,
this.constraints,
this.color,
this.selectedColor,
this.disabledColor,
......@@ -223,6 +225,14 @@ class ToggleButtons extends StatelessWidget {
/// are active, selected, or disabled.
final TextStyle textStyle;
/// Defines the button's size.
///
/// Typically used to constrain the button's minimum size.
///
/// If this property is null, then
/// BoxConstraints(minWidth: 48.0, minHeight: 48.0) is be used.
final BoxConstraints constraints;
/// The color for descendant [Text] and [Icon] widgets if the button is
/// enabled and not selected.
///
......@@ -578,6 +588,7 @@ class ToggleButtons extends StatelessWidget {
return _ToggleButton(
selected: isSelected[index],
textStyle: textStyle,
constraints: constraints,
color: color,
selectedColor: selectedColor,
disabledColor: disabledColor,
......@@ -645,6 +656,7 @@ class _ToggleButton extends StatelessWidget {
Key key,
this.selected = false,
this.textStyle,
this.constraints,
this.color,
this.selectedColor,
this.disabledColor,
......@@ -671,6 +683,11 @@ class _ToggleButton extends StatelessWidget {
/// The [TextStyle] to apply to any text that appears in this button.
final TextStyle textStyle;
/// Defines the button's size.
///
/// Typically used to constrain the button's minimum size.
final BoxConstraints constraints;
/// The color for [Text] and [Icon] widgets if the button is enabled.
///
/// If [selected] is false and [onPressed] is not null, this color will be used.
......@@ -784,6 +801,7 @@ class _ToggleButton extends StatelessWidget {
}
final TextStyle currentTextStyle = textStyle ?? toggleButtonsTheme.textStyle ?? theme.textTheme.body1;
final BoxConstraints currentConstraints = constraints ?? toggleButtonsTheme.constraints ?? const BoxConstraints(minWidth: kMinInteractiveDimension, minHeight: kMinInteractiveDimension);
final Widget result = ClipRRect(
borderRadius: clipRadius,
......@@ -791,6 +809,7 @@ class _ToggleButton extends StatelessWidget {
textStyle: currentTextStyle.copyWith(
color: currentColor,
),
constraints: currentConstraints,
elevation: 0.0,
highlightElevation: 0.0,
fillColor: currentFillColor,
......
packages/flutter/lib/src/material/toggle_buttons_theme.dart
View file @ 2bd7f9ff
......@@ -29,6 +29,7 @@ class ToggleButtonsThemeData extends Diagnosticable {
/// [ToggleButtons].
const ToggleButtonsThemeData({
this.textStyle,
this.constraints,
this.color,
this.selectedColor,
this.disabledColor,
......@@ -51,6 +52,11 @@ class ToggleButtonsThemeData extends Diagnosticable {
/// are active, selected, or disabled.
final TextStyle textStyle;
/// Defines the button's size.
///
/// Typically used to constrain the button's minimum size.
final BoxConstraints constraints;
/// The color for descendant [Text] and [Icon] widgets if the toggle button
/// is enabled.
final Color color;
......@@ -104,6 +110,7 @@ class ToggleButtonsThemeData extends Diagnosticable {
/// new values.
ToggleButtonsThemeData copyWith({
TextStyle textStyle,
BoxConstraints constraints,
Color color,
Color selectedColor,
Color disabledColor,
......@@ -120,6 +127,7 @@ class ToggleButtonsThemeData extends Diagnosticable {
}) {
return ToggleButtonsThemeData(
textStyle: textStyle ?? this.textStyle,
constraints: constraints ?? this.constraints,
color: color ?? this.color,
selectedColor: selectedColor ?? this.selectedColor,
disabledColor: disabledColor ?? this.disabledColor,
......@@ -143,6 +151,7 @@ class ToggleButtonsThemeData extends Diagnosticable {
return null;
return ToggleButtonsThemeData(
textStyle: TextStyle.lerp(a?.textStyle, b?.textStyle, t),
constraints: BoxConstraints.lerp(a?.constraints, b?.constraints, t),
color: Color.lerp(a?.color, b?.color, t),
selectedColor: Color.lerp(a?.selectedColor, b?.selectedColor, t),
disabledColor: Color.lerp(a?.disabledColor, b?.disabledColor, t),
......@@ -163,6 +172,7 @@ class ToggleButtonsThemeData extends Diagnosticable {
int get hashCode {
return hashValues(
textStyle,
constraints,
color,
selectedColor,
disabledColor,
......@@ -187,6 +197,7 @@ class ToggleButtonsThemeData extends Diagnosticable {
return false;
final ToggleButtonsThemeData typedOther = other;
return typedOther.textStyle == textStyle
&& typedOther.constraints == constraints
&& typedOther.color == color
&& typedOther.selectedColor == selectedColor
&& typedOther.disabledColor == disabledColor
......@@ -206,6 +217,7 @@ class ToggleButtonsThemeData extends Diagnosticable {
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
textStyle?.debugFillProperties(properties, prefix: 'textStyle.');
properties.add(DiagnosticsProperty<BoxConstraints>('constraints', constraints, defaultValue: null));
properties.add(ColorProperty('color', color, defaultValue: null));
properties.add(ColorProperty('selectedColor', selectedColor, defaultValue: null));
properties.add(ColorProperty('disabledColor', disabledColor, defaultValue: null));
......
packages/flutter/test/material/toggle_buttons_test.dart
View file @ 2bd7f9ff
......@@ -309,6 +309,98 @@ void main() {
expect(textStyle.color, isNot(Colors.orange));
});
testWidgets('Default BoxConstraints', (WidgetTester tester) async {
await tester.pumpWidget(
Material(
child: boilerplate(
child: ToggleButtons(
isSelected: const <bool>[false, false, false],
onPressed: (int index) {},
children: const <Widget>[
Icon(Icons.check),
Icon(Icons.access_alarm),
Icon(Icons.cake),
],
),
),
),
);
final Rect firstRect = tester.getRect(find.byType(RawMaterialButton).at(0));
expect(firstRect.width, 48.0);
expect(firstRect.height, 48.0);
final Rect secondRect = tester.getRect(find.byType(RawMaterialButton).at(1));
expect(secondRect.width, 48.0);
expect(secondRect.height, 48.0);
final Rect thirdRect = tester.getRect(find.byType(RawMaterialButton).at(2));
expect(thirdRect.width, 48.0);
expect(thirdRect.height, 48.0);
});
testWidgets('Custom BoxConstraints', (WidgetTester tester) async {
// Test for minimum constraints
await tester.pumpWidget(
Material(
child: boilerplate(
child: ToggleButtons(
constraints: const BoxConstraints(
minWidth: 50.0,
minHeight: 60.0,
),
isSelected: const <bool>[false, false, false],
onPressed: (int index) {},
children: const <Widget>[
Icon(Icons.check),
Icon(Icons.access_alarm),
Icon(Icons.cake),
],
),
),
),
);
Rect firstRect = tester.getRect(find.byType(RawMaterialButton).at(0));
expect(firstRect.width, 50.0);
expect(firstRect.height, 60.0);
Rect secondRect = tester.getRect(find.byType(RawMaterialButton).at(1));
expect(secondRect.width, 50.0);
expect(secondRect.height, 60.0);
Rect thirdRect = tester.getRect(find.byType(RawMaterialButton).at(2));
expect(thirdRect.width, 50.0);
expect(thirdRect.height, 60.0);
// Test for maximum constraints
await tester.pumpWidget(
Material(
child: boilerplate(
child: ToggleButtons(
constraints: const BoxConstraints(
maxWidth: 20.0,
maxHeight: 10.0,
),
isSelected: const <bool>[false, false, false],
onPressed: (int index) {},
children: const <Widget>[
Icon(Icons.check),
Icon(Icons.access_alarm),
Icon(Icons.cake),
],
),
),
),
);
firstRect = tester.getRect(find.byType(RawMaterialButton).at(0));
expect(firstRect.width, 20.0);
expect(firstRect.height, 10.0);
secondRect = tester.getRect(find.byType(RawMaterialButton).at(1));
expect(secondRect.width, 20.0);
expect(secondRect.height, 10.0);
thirdRect = tester.getRect(find.byType(RawMaterialButton).at(2));
expect(thirdRect.width, 20.0);
expect(thirdRect.height, 10.0);
});
testWidgets(
'Default text/icon colors for enabled, selected and disabled states',
(WidgetTester tester) async {
......
packages/flutter/test/material/toggle_buttons_theme_test.dart
View file @ 2bd7f9ff
......@@ -25,6 +25,7 @@ void main() {
test('ToggleButtonsThemeData defaults', () {
const ToggleButtonsThemeData themeData = ToggleButtonsThemeData();
expect(themeData.textStyle, null);
expect(themeData.constraints, null);
expect(themeData.color, null);
expect(themeData.selectedColor, null);
expect(themeData.disabledColor, null);
......@@ -41,6 +42,7 @@ void main() {
const ToggleButtonsTheme theme = ToggleButtonsTheme(data: ToggleButtonsThemeData());
expect(theme.data.textStyle, null);
expect(theme.data.constraints, null);
expect(theme.data.color, null);
expect(theme.data.selectedColor, null);
expect(theme.data.disabledColor, null);
......@@ -72,6 +74,7 @@ void main() {
final DiagnosticPropertiesBuilder builder = DiagnosticPropertiesBuilder();
const ToggleButtonsThemeData(
textStyle: TextStyle(fontSize: 10),
constraints: BoxConstraints(minHeight: 10.0, maxHeight: 20.0),
color: Color(0xfffffff0),
selectedColor: Color(0xfffffff1),
disabledColor: Color(0xfffffff2),
......@@ -95,6 +98,7 @@ void main() {
expect(description, <String>[
'textStyle.inherit: true',
'textStyle.size: 10.0',
'constraints: BoxConstraints(0.0<=w<=Infinity, 10.0<=h<=20.0)',
'color: Color(0xfffffff0)',
'selectedColor: Color(0xfffffff1)',
'disabledColor: Color(0xfffffff2)',
......@@ -154,6 +158,78 @@ void main() {
expect(textStyle.color, isNot(Colors.orange));
});
testWidgets('Custom BoxConstraints', (WidgetTester tester) async {
// Test for minimum constraints
await tester.pumpWidget(
Material(
child: boilerplate(
child: ToggleButtonsTheme(
data: const ToggleButtonsThemeData(
constraints: BoxConstraints(
minWidth: 50.0,
minHeight: 60.0,
),
),
child: ToggleButtons(
isSelected: const <bool>[false, false, false],
onPressed: (int index) {},
children: const <Widget>[
Icon(Icons.check),
Icon(Icons.access_alarm),
Icon(Icons.cake),
],
),
),
),
),
);
Rect firstRect = tester.getRect(find.byType(RawMaterialButton).at(0));
expect(firstRect.width, 50.0);
expect(firstRect.height, 60.0);
Rect secondRect = tester.getRect(find.byType(RawMaterialButton).at(1));
expect(secondRect.width, 50.0);
expect(secondRect.height, 60.0);
Rect thirdRect = tester.getRect(find.byType(RawMaterialButton).at(2));
expect(thirdRect.width, 50.0);
expect(thirdRect.height, 60.0);
// Test for maximum constraints
await tester.pumpWidget(
Material(
child: boilerplate(
child: ToggleButtonsTheme(
data: const ToggleButtonsThemeData(
constraints: BoxConstraints(
maxWidth: 20.0,
maxHeight: 10.0,
),
),
child: ToggleButtons(
isSelected: const <bool>[false, false, false],
onPressed: (int index) {},
children: const <Widget>[
Icon(Icons.check),
Icon(Icons.access_alarm),
Icon(Icons.cake),
],
),
),
),
),
);
firstRect = tester.getRect(find.byType(RawMaterialButton).at(0));
expect(firstRect.width, 20.0);
expect(firstRect.height, 10.0);
secondRect = tester.getRect(find.byType(RawMaterialButton).at(1));
expect(secondRect.width, 20.0);
expect(secondRect.height, 10.0);
thirdRect = tester.getRect(find.byType(RawMaterialButton).at(2));
expect(thirdRect.width, 20.0);
expect(thirdRect.height, 10.0);
});
testWidgets(
'Theme text/icon colors for enabled, selected and disabled states',
(WidgetTester tester) async {
......
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