diff --git a/experimental/material_3_demo/lib/color_palettes_screen.dart b/experimental/material_3_demo/lib/color_palettes_screen.dart index db5b6d764..52918075c 100644 --- a/experimental/material_3_demo/lib/color_palettes_screen.dart +++ b/experimental/material_3_demo/lib/color_palettes_screen.dart @@ -46,7 +46,9 @@ class ColorPalettesScreen extends StatelessWidget { padding: const EdgeInsets.symmetric(horizontal: 15), child: ColorSchemeView( handleColorRoleChange: handleColorRoleChange, - colorScheme: brightness == Brightness.light ? lightColorScheme : darkColorScheme, + colorScheme: brightness == Brightness.light + ? lightColorScheme + : darkColorScheme, brightness: brightness, ), ); @@ -266,7 +268,8 @@ class _ColorSchemeViewState extends State { color: _colorScheme.onSecondaryContainer, onColor: _colorScheme.secondaryContainer, updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onSecondaryContainer: color); + _colorScheme = + _colorScheme.copyWith(onSecondaryContainer: color); widget.handleColorRoleChange( widget.brightness, onSecondaryContainer: color, @@ -319,7 +322,8 @@ class _ColorSchemeViewState extends State { color: _colorScheme.onTertiaryContainer, onColor: _colorScheme.tertiaryContainer, updateColorScheme: (color) { - _colorScheme = _colorScheme.copyWith(onTertiaryContainer: color); + _colorScheme = + _colorScheme.copyWith(onTertiaryContainer: color); widget.handleColorRoleChange( widget.brightness, onTertiaryContainer: color, @@ -596,49 +600,51 @@ class _EditableColorChipState extends State { return GestureDetector( onTap: () { showDialog( - context: context, - builder: (context) { - return AlertDialog( - content: Column( - mainAxisSize: MainAxisSize.min, - children: [ - ColorPicker( - pickerColor: widget.color, - onColorChanged: widget.updateColorScheme, - paletteType: PaletteType.hsvWithHue, - labelTypes: const [ - ColorLabelType.rgb, - ColorLabelType.hsv, - ColorLabelType.hsl - ], - pickerAreaBorderRadius: const BorderRadius.all(Radius.circular(10)), - hexInputController: textController, - portraitOnly: true, - ), - Padding( - padding: const EdgeInsets.fromLTRB(16, 0, 16, 16), - child: TextField( - controller: textController, - decoration: InputDecoration( - prefixText: '#', - suffix: IconButton( - icon: const Icon(Icons.content_paste_rounded), - onPressed: () => copyToClipboard(textController.text), - ), - ), - autofocus: true, - maxLength: 8, - inputFormatters: [ - UpperCaseTextFormatter(), - FilteringTextInputFormatter.allow(RegExp(kValidHexPattern)), + context: context, + builder: (context) { + return AlertDialog( + content: Column( + mainAxisSize: MainAxisSize.min, + children: [ + ColorPicker( + pickerColor: widget.color, + onColorChanged: widget.updateColorScheme, + paletteType: PaletteType.hsvWithHue, + labelTypes: const [ + ColorLabelType.rgb, + ColorLabelType.hsv, + ColorLabelType.hsl ], + pickerAreaBorderRadius: + const BorderRadius.all(Radius.circular(10)), + hexInputController: textController, + portraitOnly: true, ), - ) - ], - ), - ); - } - ); + Padding( + padding: const EdgeInsets.fromLTRB(16, 0, 16, 16), + child: TextField( + controller: textController, + decoration: InputDecoration( + prefixText: '#', + suffix: IconButton( + icon: const Icon(Icons.content_paste_rounded), + onPressed: () => + copyToClipboard(textController.text), + ), + ), + autofocus: true, + maxLength: 8, + inputFormatters: [ + UpperCaseTextFormatter(), + FilteringTextInputFormatter.allow( + RegExp(kValidHexPattern)), + ], + ), + ) + ], + ), + ); + }); }, child: ColorChip( label: widget.label, diff --git a/experimental/material_3_demo/lib/home.dart b/experimental/material_3_demo/lib/home.dart index ff28f1185..b00670719 100644 --- a/experimental/material_3_demo/lib/home.dart +++ b/experimental/material_3_demo/lib/home.dart @@ -10,38 +10,39 @@ import 'constants.dart'; import 'elevation_screen.dart'; import 'typography_screen.dart'; -typedef ConfigColorSchemeCallback = void Function(Brightness brightness, - { Color? primary, - Color? onPrimary, - Color? primaryContainer, - Color? onPrimaryContainer, - Color? secondary, - Color? onSecondary, - Color? secondaryContainer, - Color? onSecondaryContainer, - Color? tertiary, - Color? onTertiary, - Color? tertiaryContainer, - Color? onTertiaryContainer, - Color? error, - Color? onError, - Color? errorContainer, - Color? onErrorContainer, - Color? background, - Color? onBackground, - Color? surface, - Color? onSurface, - Color? surfaceVariant, - Color? onSurfaceVariant, - Color? outline, - Color? outlineVariant, - Color? shadow, - Color? scrim, - Color? inverseSurface, - Color? onInverseSurface, - Color? inversePrimary, - Color? surfaceTint, - }); +typedef ConfigColorSchemeCallback = void Function( + Brightness brightness, { + Color? primary, + Color? onPrimary, + Color? primaryContainer, + Color? onPrimaryContainer, + Color? secondary, + Color? onSecondary, + Color? secondaryContainer, + Color? onSecondaryContainer, + Color? tertiary, + Color? onTertiary, + Color? tertiaryContainer, + Color? onTertiaryContainer, + Color? error, + Color? onError, + Color? errorContainer, + Color? onErrorContainer, + Color? background, + Color? onBackground, + Color? surface, + Color? onSurface, + Color? surfaceVariant, + Color? onSurfaceVariant, + Color? outline, + Color? outlineVariant, + Color? shadow, + Color? scrim, + Color? inverseSurface, + Color? onInverseSurface, + Color? inversePrimary, + Color? surfaceTint, +}); class Home extends StatefulWidget { const Home({ diff --git a/experimental/material_3_demo/lib/main.dart b/experimental/material_3_demo/lib/main.dart index 177bdf5ea..e1df15013 100644 --- a/experimental/material_3_demo/lib/main.dart +++ b/experimental/material_3_demo/lib/main.dart @@ -75,39 +75,39 @@ class _AppState extends State { }); } - void handleColorRoleChange(Brightness brightness, - { Color? primary, - Color? onPrimary, - Color? primaryContainer, - Color? onPrimaryContainer, - Color? secondary, - Color? onSecondary, - Color? secondaryContainer, - Color? onSecondaryContainer, - Color? tertiary, - Color? onTertiary, - Color? tertiaryContainer, - Color? onTertiaryContainer, - Color? error, - Color? onError, - Color? errorContainer, - Color? onErrorContainer, - Color? background, - Color? onBackground, - Color? surface, - Color? onSurface, - Color? surfaceVariant, - Color? onSurfaceVariant, - Color? outline, - Color? outlineVariant, - Color? shadow, - Color? scrim, - Color? inverseSurface, - Color? onInverseSurface, - Color? inversePrimary, - Color? surfaceTint, - } - ) { + void handleColorRoleChange( + Brightness brightness, { + Color? primary, + Color? onPrimary, + Color? primaryContainer, + Color? onPrimaryContainer, + Color? secondary, + Color? onSecondary, + Color? secondaryContainer, + Color? onSecondaryContainer, + Color? tertiary, + Color? onTertiary, + Color? tertiaryContainer, + Color? onTertiaryContainer, + Color? error, + Color? onError, + Color? errorContainer, + Color? onErrorContainer, + Color? background, + Color? onBackground, + Color? surface, + Color? onSurface, + Color? surfaceVariant, + Color? onSurfaceVariant, + Color? outline, + Color? outlineVariant, + Color? shadow, + Color? scrim, + Color? inverseSurface, + Color? onInverseSurface, + Color? inversePrimary, + Color? surfaceTint, + }) { ColorScheme? copyWith(ColorScheme? colorScheme) { return colorScheme?.copyWith( primary: primary, @@ -142,7 +142,7 @@ class _AppState extends State { surfaceTint: surfaceTint, ); } - + setState(() { switch (brightness) { case Brightness.light: @@ -162,11 +162,11 @@ class _AppState extends State { Widget build(BuildContext context) { ThemeData lightTheme = ThemeData( colorSchemeSeed: colorSelectionMethod == ColorSelectionMethod.colorSeed - ? colorSelected.color - : null, + ? colorSelected.color + : null, colorScheme: colorSelectionMethod == ColorSelectionMethod.image - ? imageColorScheme - : null, + ? imageColorScheme + : null, useMaterial3: useMaterial3, brightness: Brightness.light, ).copyWith( diff --git a/experimental/material_3_demo/test/color_screen_test.dart b/experimental/material_3_demo/test/color_screen_test.dart index 4d624937c..ec868cc90 100644 --- a/experimental/material_3_demo/test/color_screen_test.dart +++ b/experimental/material_3_demo/test/color_screen_test.dart @@ -70,8 +70,9 @@ void main() { addTearDown(tester.view.resetPhysicalSize); await tester.pumpWidget(const App()); - Finder colorPageIndicator = find.descendant(of: find.byType(NavigationRail), - matching: find.byIcon(Icons.format_paint_outlined)); + Finder colorPageIndicator = find.descendant( + of: find.byType(NavigationRail), + matching: find.byIcon(Icons.format_paint_outlined)); expect(colorPageIndicator, findsOneWidget); await tester.tap(colorPageIndicator); await tester.pumpAndSettle(); @@ -85,7 +86,8 @@ void main() { addTearDown(tester.view.resetPhysicalSize); await tester.pumpWidget(const App()); - Finder colorPageIndicator = find.descendant(of: find.byType(NavigationRail), + Finder colorPageIndicator = find.descendant( + of: find.byType(NavigationRail), matching: find.byIcon(Icons.format_paint_outlined)); expect(colorPageIndicator, findsOneWidget); await tester.tap(colorPageIndicator); @@ -104,12 +106,16 @@ void main() { expect(find.text('73a450'), findsOneWidget); // Test if the chip color is changed to 73a450. - Finder primaryChip = find.descendant(of: find.widgetWithText(ColorChip, 'primary').first, matching: find.byType(Container)); + Finder primaryChip = find.descendant( + of: find.widgetWithText(ColorChip, 'primary').first, + matching: find.byType(Container)); Container container = tester.widget(primaryChip); expect(container.color, const Color(0xFF73A450)); }); - testWidgets('Light ColorScheme is configurable; changes can be applied to the widget page', (tester) async { + testWidgets( + 'Light ColorScheme is configurable; changes can be applied to the widget page', + (tester) async { widgetSetup(tester, 1200); addTearDown(tester.view.resetPhysicalSize); await tester.pumpWidget(const App()); @@ -121,7 +127,8 @@ void main() { await updatePrimaryChipColor(tester, const Color(0xff123456), true); // Go to the component screen - Finder componentPageIndicator = find.descendant(of: find.byType(NavigationRail), + Finder componentPageIndicator = find.descendant( + of: find.byType(NavigationRail), matching: find.byIcon(Icons.widgets_outlined)); expect(componentPageIndicator, findsOneWidget); await tester.tap(componentPageIndicator); @@ -140,7 +147,9 @@ void main() { expect(material.color, const Color(0xff123456)); }); - testWidgets('Dark ColorScheme is configurable; changes can be applied to the widget page', (tester) async { + testWidgets( + 'Dark ColorScheme is configurable; changes can be applied to the widget page', + (tester) async { widgetSetup(tester, 1200); addTearDown(tester.view.resetPhysicalSize); await tester.pumpWidget(const App()); @@ -155,7 +164,8 @@ void main() { await updatePrimaryChipColor(tester, const Color(0xff654321), false); // Go to the component screen - Finder componentPageIndicator = find.descendant(of: find.byType(NavigationRail), + Finder componentPageIndicator = find.descendant( + of: find.byType(NavigationRail), matching: find.byIcon(Icons.widgets_outlined)); expect(componentPageIndicator, findsOneWidget); await tester.tap(componentPageIndicator); @@ -175,22 +185,27 @@ void main() { }); } -Future updatePrimaryChipColor(WidgetTester tester, Color newColor, bool isLight) async { - Finder colorPageIndicator = find.descendant(of: find.byType(NavigationRail), +Future updatePrimaryChipColor( + WidgetTester tester, Color newColor, bool isLight) async { + Finder colorPageIndicator = find.descendant( + of: find.byType(NavigationRail), matching: find.byIcon(Icons.format_paint_outlined)); expect(colorPageIndicator, findsOneWidget); await tester.tap(colorPageIndicator); await tester.pumpAndSettle(); - expect(isLight ? find.text('Light ColorScheme') : find.text('Dark ColorScheme'), findsOneWidget); + expect( + isLight ? find.text('Light ColorScheme') : find.text('Dark ColorScheme'), + findsOneWidget); Finder primaryColorChip = isLight - ? find.widgetWithText(EditableColorChip, 'primary').first - : find.widgetWithText(EditableColorChip, 'primary').last; + ? find.widgetWithText(EditableColorChip, 'primary').first + : find.widgetWithText(EditableColorChip, 'primary').last; await tester.tap(primaryColorChip); await tester.pump(); expect(find.byType(AlertDialog), findsOneWidget); - await tester.enterText(find.byType(TextField), newColor.value.toRadixString(16)); + await tester.enterText( + find.byType(TextField), newColor.value.toRadixString(16)); // Tap on the barrier. await tester.tapAt(const Offset(10.0, 10.0));