Run dart format

add_interactive_color_scheme
Qun Cheng 11 months ago
parent a55a69605d
commit 5b2eff51f7

@ -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<ColorSchemeView> {
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<ColorSchemeView> {
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<EditableColorChip> {
return GestureDetector(
onTap: () {
showDialog<void>(
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,

@ -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({

@ -75,39 +75,39 @@ class _AppState extends State<App> {
});
}
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<App> {
surfaceTint: surfaceTint,
);
}
setState(() {
switch (brightness) {
case Brightness.light:
@ -162,11 +162,11 @@ class _AppState extends State<App> {
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(

@ -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<Container>(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<void> updatePrimaryChipColor(WidgetTester tester, Color newColor, bool isLight) async {
Finder colorPageIndicator = find.descendant(of: find.byType(NavigationRail),
Future<void> 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));

Loading…
Cancel
Save