[Material] Add splashColor to FAB and FAB ThemeData (#38467)
* [Material] Add splashColor param to FAB and FAB ThemeData
This commit is contained in:
parent
55c979ea09
commit
1033155fb9
@ -133,6 +133,7 @@ class FloatingActionButton extends StatelessWidget {
|
|||||||
this.backgroundColor,
|
this.backgroundColor,
|
||||||
this.focusColor,
|
this.focusColor,
|
||||||
this.hoverColor,
|
this.hoverColor,
|
||||||
|
this.splashColor,
|
||||||
this.heroTag = const _DefaultHeroTag(),
|
this.heroTag = const _DefaultHeroTag(),
|
||||||
this.elevation,
|
this.elevation,
|
||||||
this.focusElevation,
|
this.focusElevation,
|
||||||
@ -173,6 +174,7 @@ class FloatingActionButton extends StatelessWidget {
|
|||||||
this.elevation,
|
this.elevation,
|
||||||
this.focusElevation,
|
this.focusElevation,
|
||||||
this.hoverElevation,
|
this.hoverElevation,
|
||||||
|
this.splashColor,
|
||||||
this.highlightElevation,
|
this.highlightElevation,
|
||||||
this.disabledElevation,
|
this.disabledElevation,
|
||||||
@required this.onPressed,
|
@required this.onPressed,
|
||||||
@ -243,6 +245,12 @@ class FloatingActionButton extends StatelessWidget {
|
|||||||
/// Defaults to [ThemeData.hoverColor] for the current theme.
|
/// Defaults to [ThemeData.hoverColor] for the current theme.
|
||||||
final Color hoverColor;
|
final Color hoverColor;
|
||||||
|
|
||||||
|
/// The splash color for this [FloatingActionButton]'s [InkWell].
|
||||||
|
///
|
||||||
|
/// If null, [FloatingActionButtonThemeData.splashColor] is used, if that is
|
||||||
|
/// null, [ThemeData.splashColor] is used.
|
||||||
|
final Color splashColor;
|
||||||
|
|
||||||
/// The tag to apply to the button's [Hero] widget.
|
/// The tag to apply to the button's [Hero] widget.
|
||||||
///
|
///
|
||||||
/// Defaults to a tag that matches other floating action buttons.
|
/// Defaults to a tag that matches other floating action buttons.
|
||||||
@ -410,6 +418,9 @@ class FloatingActionButton extends StatelessWidget {
|
|||||||
final Color hoverColor = this.hoverColor
|
final Color hoverColor = this.hoverColor
|
||||||
?? floatingActionButtonTheme.hoverColor
|
?? floatingActionButtonTheme.hoverColor
|
||||||
?? theme.hoverColor;
|
?? theme.hoverColor;
|
||||||
|
final Color splashColor = this.splashColor
|
||||||
|
?? floatingActionButtonTheme.splashColor
|
||||||
|
?? theme.splashColor;
|
||||||
final double elevation = this.elevation
|
final double elevation = this.elevation
|
||||||
?? floatingActionButtonTheme.elevation
|
?? floatingActionButtonTheme.elevation
|
||||||
?? _defaultElevation;
|
?? _defaultElevation;
|
||||||
@ -447,6 +458,7 @@ class FloatingActionButton extends StatelessWidget {
|
|||||||
fillColor: backgroundColor,
|
fillColor: backgroundColor,
|
||||||
focusColor: focusColor,
|
focusColor: focusColor,
|
||||||
hoverColor: hoverColor,
|
hoverColor: hoverColor,
|
||||||
|
splashColor: splashColor,
|
||||||
textStyle: textStyle,
|
textStyle: textStyle,
|
||||||
shape: shape,
|
shape: shape,
|
||||||
clipBehavior: clipBehavior ?? Clip.none,
|
clipBehavior: clipBehavior ?? Clip.none,
|
||||||
@ -480,6 +492,7 @@ class FloatingActionButton extends StatelessWidget {
|
|||||||
properties.add(ColorProperty('backgroundColor', backgroundColor, defaultValue: null));
|
properties.add(ColorProperty('backgroundColor', backgroundColor, defaultValue: null));
|
||||||
properties.add(ColorProperty('focusColor', focusColor, defaultValue: null));
|
properties.add(ColorProperty('focusColor', focusColor, defaultValue: null));
|
||||||
properties.add(ColorProperty('hoverColor', hoverColor, defaultValue: null));
|
properties.add(ColorProperty('hoverColor', hoverColor, defaultValue: null));
|
||||||
|
properties.add(ColorProperty('splashColor', splashColor, defaultValue: null));
|
||||||
properties.add(ObjectFlagProperty<Object>('heroTag', heroTag, ifPresent: 'hero'));
|
properties.add(ObjectFlagProperty<Object>('heroTag', heroTag, ifPresent: 'hero'));
|
||||||
properties.add(DoubleProperty('elevation', elevation, defaultValue: null));
|
properties.add(DoubleProperty('elevation', elevation, defaultValue: null));
|
||||||
properties.add(DoubleProperty('focusElevation', focusElevation, defaultValue: null));
|
properties.add(DoubleProperty('focusElevation', focusElevation, defaultValue: null));
|
||||||
|
@ -34,6 +34,7 @@ class FloatingActionButtonThemeData extends Diagnosticable {
|
|||||||
this.backgroundColor,
|
this.backgroundColor,
|
||||||
this.focusColor,
|
this.focusColor,
|
||||||
this.hoverColor,
|
this.hoverColor,
|
||||||
|
this.splashColor,
|
||||||
this.elevation,
|
this.elevation,
|
||||||
this.focusElevation,
|
this.focusElevation,
|
||||||
this.hoverElevation,
|
this.hoverElevation,
|
||||||
@ -57,6 +58,9 @@ class FloatingActionButtonThemeData extends Diagnosticable {
|
|||||||
/// hovering over it.
|
/// hovering over it.
|
||||||
final Color hoverColor;
|
final Color hoverColor;
|
||||||
|
|
||||||
|
/// The splash color for this [FloatingActionButton]'s [InkWell].
|
||||||
|
final Color splashColor;
|
||||||
|
|
||||||
/// The z-coordinate to be used for the unselected, enabled
|
/// The z-coordinate to be used for the unselected, enabled
|
||||||
/// [FloatingActionButton]'s elevation foreground.
|
/// [FloatingActionButton]'s elevation foreground.
|
||||||
final double elevation;
|
final double elevation;
|
||||||
@ -91,6 +95,7 @@ class FloatingActionButtonThemeData extends Diagnosticable {
|
|||||||
Color backgroundColor,
|
Color backgroundColor,
|
||||||
Color focusColor,
|
Color focusColor,
|
||||||
Color hoverColor,
|
Color hoverColor,
|
||||||
|
Color splashColor,
|
||||||
double elevation,
|
double elevation,
|
||||||
double focusElevation,
|
double focusElevation,
|
||||||
double hoverElevation,
|
double hoverElevation,
|
||||||
@ -103,6 +108,7 @@ class FloatingActionButtonThemeData extends Diagnosticable {
|
|||||||
backgroundColor: backgroundColor ?? this.backgroundColor,
|
backgroundColor: backgroundColor ?? this.backgroundColor,
|
||||||
focusColor: focusColor ?? this.focusColor,
|
focusColor: focusColor ?? this.focusColor,
|
||||||
hoverColor: hoverColor ?? this.hoverColor,
|
hoverColor: hoverColor ?? this.hoverColor,
|
||||||
|
splashColor: splashColor ?? this.splashColor,
|
||||||
elevation: elevation ?? this.elevation,
|
elevation: elevation ?? this.elevation,
|
||||||
focusElevation: focusElevation ?? this.focusElevation,
|
focusElevation: focusElevation ?? this.focusElevation,
|
||||||
hoverElevation: hoverElevation ?? this.hoverElevation,
|
hoverElevation: hoverElevation ?? this.hoverElevation,
|
||||||
@ -126,6 +132,7 @@ class FloatingActionButtonThemeData extends Diagnosticable {
|
|||||||
backgroundColor: Color.lerp(a?.backgroundColor, b?.backgroundColor, t),
|
backgroundColor: Color.lerp(a?.backgroundColor, b?.backgroundColor, t),
|
||||||
focusColor: Color.lerp(a?.focusColor, b?.focusColor, t),
|
focusColor: Color.lerp(a?.focusColor, b?.focusColor, t),
|
||||||
hoverColor: Color.lerp(a?.hoverColor, b?.hoverColor, t),
|
hoverColor: Color.lerp(a?.hoverColor, b?.hoverColor, t),
|
||||||
|
splashColor: Color.lerp(a?.splashColor, b?.splashColor, t),
|
||||||
elevation: lerpDouble(a?.elevation, b?.elevation, t),
|
elevation: lerpDouble(a?.elevation, b?.elevation, t),
|
||||||
focusElevation: lerpDouble(a?.focusElevation, b?.focusElevation, t),
|
focusElevation: lerpDouble(a?.focusElevation, b?.focusElevation, t),
|
||||||
hoverElevation: lerpDouble(a?.hoverElevation, b?.hoverElevation, t),
|
hoverElevation: lerpDouble(a?.hoverElevation, b?.hoverElevation, t),
|
||||||
@ -142,6 +149,7 @@ class FloatingActionButtonThemeData extends Diagnosticable {
|
|||||||
backgroundColor,
|
backgroundColor,
|
||||||
focusColor,
|
focusColor,
|
||||||
hoverColor,
|
hoverColor,
|
||||||
|
splashColor,
|
||||||
elevation,
|
elevation,
|
||||||
focusElevation,
|
focusElevation,
|
||||||
hoverElevation,
|
hoverElevation,
|
||||||
@ -162,6 +170,7 @@ class FloatingActionButtonThemeData extends Diagnosticable {
|
|||||||
&& otherData.backgroundColor == backgroundColor
|
&& otherData.backgroundColor == backgroundColor
|
||||||
&& otherData.focusColor == focusColor
|
&& otherData.focusColor == focusColor
|
||||||
&& otherData.hoverColor == hoverColor
|
&& otherData.hoverColor == hoverColor
|
||||||
|
&& otherData.splashColor == splashColor
|
||||||
&& otherData.elevation == elevation
|
&& otherData.elevation == elevation
|
||||||
&& otherData.focusElevation == focusElevation
|
&& otherData.focusElevation == focusElevation
|
||||||
&& otherData.hoverElevation == hoverElevation
|
&& otherData.hoverElevation == hoverElevation
|
||||||
@ -179,6 +188,7 @@ class FloatingActionButtonThemeData extends Diagnosticable {
|
|||||||
properties.add(ColorProperty('backgroundColor', backgroundColor, defaultValue: defaultData.backgroundColor));
|
properties.add(ColorProperty('backgroundColor', backgroundColor, defaultValue: defaultData.backgroundColor));
|
||||||
properties.add(ColorProperty('focusColor', focusColor, defaultValue: defaultData.focusColor));
|
properties.add(ColorProperty('focusColor', focusColor, defaultValue: defaultData.focusColor));
|
||||||
properties.add(ColorProperty('hoverColor', hoverColor, defaultValue: defaultData.hoverColor));
|
properties.add(ColorProperty('hoverColor', hoverColor, defaultValue: defaultData.hoverColor));
|
||||||
|
properties.add(ColorProperty('splashColor', splashColor, defaultValue: defaultData.splashColor));
|
||||||
properties.add(DoubleProperty('elevation', elevation, defaultValue: defaultData.elevation));
|
properties.add(DoubleProperty('elevation', elevation, defaultValue: defaultData.elevation));
|
||||||
properties.add(DoubleProperty('focusElevation', focusElevation, defaultValue: defaultData.focusElevation));
|
properties.add(DoubleProperty('focusElevation', focusElevation, defaultValue: defaultData.focusElevation));
|
||||||
properties.add(DoubleProperty('hoverElevation', hoverElevation, defaultValue: defaultData.hoverElevation));
|
properties.add(DoubleProperty('hoverElevation', hoverElevation, defaultValue: defaultData.hoverElevation));
|
||||||
|
@ -799,6 +799,26 @@ void main() {
|
|||||||
);
|
);
|
||||||
expect(iconRichText.text.style.color, foregroundColor);
|
expect(iconRichText.text.style.color, foregroundColor);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
testWidgets('FloatingActionButton uses custom splash color', (WidgetTester tester) async {
|
||||||
|
const Color splashColor = Color(0xcafefeed);
|
||||||
|
|
||||||
|
await tester.pumpWidget(MaterialApp(
|
||||||
|
home: FloatingActionButton(
|
||||||
|
onPressed: () {},
|
||||||
|
splashColor: splashColor,
|
||||||
|
child: const Icon(Icons.access_alarm),
|
||||||
|
),
|
||||||
|
));
|
||||||
|
|
||||||
|
await tester.press(find.byType(FloatingActionButton));
|
||||||
|
await tester.pumpAndSettle();
|
||||||
|
|
||||||
|
expect(
|
||||||
|
find.byType(FloatingActionButton),
|
||||||
|
paints..circle(color: splashColor),
|
||||||
|
);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
Offset _rightEdgeOfFab(WidgetTester tester) {
|
Offset _rightEdgeOfFab(WidgetTester tester) {
|
||||||
|
@ -31,11 +31,13 @@ void main() {
|
|||||||
expect(_getRawMaterialButton(tester).elevation, 6);
|
expect(_getRawMaterialButton(tester).elevation, 6);
|
||||||
expect(_getRawMaterialButton(tester).highlightElevation, 12);
|
expect(_getRawMaterialButton(tester).highlightElevation, 12);
|
||||||
expect(_getRawMaterialButton(tester).shape, const CircleBorder());
|
expect(_getRawMaterialButton(tester).shape, const CircleBorder());
|
||||||
|
expect(_getRawMaterialButton(tester).splashColor, ThemeData().splashColor);
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('FloatingActionButtonThemeData values are used when no FloatingActionButton properties are specified', (WidgetTester tester) async {
|
testWidgets('FloatingActionButtonThemeData values are used when no FloatingActionButton properties are specified', (WidgetTester tester) async {
|
||||||
const Color backgroundColor = Color(0xBEEFBEEF);
|
const Color backgroundColor = Color(0xBEEFBEEF);
|
||||||
const Color foregroundColor = Color(0xFACEFACE);
|
const Color foregroundColor = Color(0xFACEFACE);
|
||||||
|
const Color splashColor = Color(0xCAFEFEED);
|
||||||
const double elevation = 7;
|
const double elevation = 7;
|
||||||
const double disabledElevation = 1;
|
const double disabledElevation = 1;
|
||||||
const double highlightElevation = 13;
|
const double highlightElevation = 13;
|
||||||
@ -46,6 +48,7 @@ void main() {
|
|||||||
floatingActionButtonTheme: const FloatingActionButtonThemeData(
|
floatingActionButtonTheme: const FloatingActionButtonThemeData(
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
foregroundColor: foregroundColor,
|
foregroundColor: foregroundColor,
|
||||||
|
splashColor: splashColor,
|
||||||
elevation: elevation,
|
elevation: elevation,
|
||||||
disabledElevation: disabledElevation,
|
disabledElevation: disabledElevation,
|
||||||
highlightElevation: highlightElevation,
|
highlightElevation: highlightElevation,
|
||||||
@ -66,11 +69,13 @@ void main() {
|
|||||||
expect(_getRawMaterialButton(tester).disabledElevation, disabledElevation);
|
expect(_getRawMaterialButton(tester).disabledElevation, disabledElevation);
|
||||||
expect(_getRawMaterialButton(tester).highlightElevation, highlightElevation);
|
expect(_getRawMaterialButton(tester).highlightElevation, highlightElevation);
|
||||||
expect(_getRawMaterialButton(tester).shape, shape);
|
expect(_getRawMaterialButton(tester).shape, shape);
|
||||||
|
expect(_getRawMaterialButton(tester).splashColor, splashColor);
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('FloatingActionButton values take priority over FloatingActionButtonThemeData values when both properties are specified', (WidgetTester tester) async {
|
testWidgets('FloatingActionButton values take priority over FloatingActionButtonThemeData values when both properties are specified', (WidgetTester tester) async {
|
||||||
const Color backgroundColor = Color(0xBEEFBEEF);
|
const Color backgroundColor = Color(0x00000001);
|
||||||
const Color foregroundColor = Color(0xFACEFACE);
|
const Color foregroundColor = Color(0x00000002);
|
||||||
|
const Color splashColor = Color(0x00000003);
|
||||||
const double elevation = 7;
|
const double elevation = 7;
|
||||||
const double disabledElevation = 1;
|
const double disabledElevation = 1;
|
||||||
const double highlightElevation = 13;
|
const double highlightElevation = 13;
|
||||||
@ -79,8 +84,9 @@ void main() {
|
|||||||
await tester.pumpWidget(MaterialApp(
|
await tester.pumpWidget(MaterialApp(
|
||||||
theme: ThemeData().copyWith(
|
theme: ThemeData().copyWith(
|
||||||
floatingActionButtonTheme: const FloatingActionButtonThemeData(
|
floatingActionButtonTheme: const FloatingActionButtonThemeData(
|
||||||
backgroundColor: Color(0xCAFECAFE),
|
backgroundColor: Color(0x00000004),
|
||||||
foregroundColor: Color(0xFEEDFEED),
|
foregroundColor: Color(0x00000005),
|
||||||
|
splashColor: Color(0x00000006),
|
||||||
elevation: 23,
|
elevation: 23,
|
||||||
disabledElevation: 11,
|
disabledElevation: 11,
|
||||||
highlightElevation: 43,
|
highlightElevation: 43,
|
||||||
@ -93,6 +99,7 @@ void main() {
|
|||||||
child: const Icon(Icons.add),
|
child: const Icon(Icons.add),
|
||||||
backgroundColor: backgroundColor,
|
backgroundColor: backgroundColor,
|
||||||
foregroundColor: foregroundColor,
|
foregroundColor: foregroundColor,
|
||||||
|
splashColor: splashColor,
|
||||||
elevation: elevation,
|
elevation: elevation,
|
||||||
disabledElevation: disabledElevation,
|
disabledElevation: disabledElevation,
|
||||||
highlightElevation: highlightElevation,
|
highlightElevation: highlightElevation,
|
||||||
@ -107,6 +114,7 @@ void main() {
|
|||||||
expect(_getRawMaterialButton(tester).disabledElevation, disabledElevation);
|
expect(_getRawMaterialButton(tester).disabledElevation, disabledElevation);
|
||||||
expect(_getRawMaterialButton(tester).highlightElevation, highlightElevation);
|
expect(_getRawMaterialButton(tester).highlightElevation, highlightElevation);
|
||||||
expect(_getRawMaterialButton(tester).shape, shape);
|
expect(_getRawMaterialButton(tester).shape, shape);
|
||||||
|
expect(_getRawMaterialButton(tester).splashColor, splashColor);
|
||||||
});
|
});
|
||||||
|
|
||||||
testWidgets('FloatingActionButton foreground color uses iconAccentTheme if no widget or widget theme color is specified', (WidgetTester tester) async {
|
testWidgets('FloatingActionButton foreground color uses iconAccentTheme if no widget or widget theme color is specified', (WidgetTester tester) async {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user