Fix ColorScheme example and tests (#150018)

## Description

This fixes the `ColorScheme` example to actually work.  The test had wrapped the app in an additional `MaterialApp`, which allowed the tests to work, but the real problem was using a `context` that was outside the `MaterialApp` to open the bottom sheet, which caused an exception when you actually try to run it interactively.

This fixes the example and the test.

## Tests
 - Fixed the test to not artificially add a second `MaterialApp`.
This commit is contained in:
Greg Spencer 2024-06-11 22:07:23 -07:00 committed by GitHub
parent 14df7be3f9
commit 966d2b9223
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 65 additions and 37 deletions

View File

@ -40,26 +40,17 @@ class _ColorSchemeExampleState extends State<ColorSchemeExample> {
seedColor: selectedColor,
brightness: selectedBrightness,
contrastLevel: selectedContrast,
)
),
),
home: Scaffold(
appBar: AppBar(
title: const Text('ColorScheme'),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.settings),
onPressed: () {
showModalBottomSheet<void>(
barrierColor: Colors.transparent,
context: context,
builder: (BuildContext context) => Settings(
selectedColor: selectedColor,
selectedBrightness: selectedBrightness,
selectedContrast: selectedContrast,
updateTheme: updateTheme
)
);
},
SettingsButton(
selectedColor: selectedColor,
selectedBrightness: selectedBrightness,
selectedContrast: selectedContrast,
updateTheme: updateTheme,
),
],
),
@ -118,7 +109,8 @@ class _SettingsState extends State<Settings> {
@override
Widget build(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(colorScheme: ColorScheme.fromSeed(
data: Theme.of(context).copyWith(
colorScheme: ColorScheme.fromSeed(
seedColor: selectedColor,
contrastLevel: selectedContrast,
brightness: selectedBrightness,
@ -139,31 +131,31 @@ class _SettingsState extends State<Settings> {
setState(() {
selectedBrightness = value ? Brightness.light : Brightness.dark;
});
widget.updateTheme.call(selectedBrightness, selectedColor, selectedContrast);
widget.updateTheme(selectedBrightness, selectedColor, selectedContrast);
},
)
],
),
Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: <Widget>[
const Text('Seed color: '),
...List<Widget>.generate(ColorSeed.values.length, (int index) {
Wrap(crossAxisAlignment: WrapCrossAlignment.center, children: <Widget>[
const Text('Seed color: '),
...List<Widget>.generate(
ColorSeed.values.length,
(int index) {
final Color itemColor = ColorSeed.values[index].color;
return IconButton(
icon: selectedColor == ColorSeed.values[index].color
? Icon(Icons.circle, color: itemColor)
: Icon(Icons.circle_outlined, color: itemColor),
? Icon(Icons.circle, color: itemColor)
: Icon(Icons.circle_outlined, color: itemColor),
onPressed: () {
setState(() {
selectedColor = itemColor;
});
widget.updateTheme.call(selectedBrightness, selectedColor, selectedContrast);
widget.updateTheme(selectedBrightness, selectedColor, selectedContrast);
},
);
}),
]
),
},
),
]),
Row(
children: <Widget>[
const Text('Contrast level: '),
@ -177,7 +169,7 @@ class _SettingsState extends State<Settings> {
setState(() {
selectedContrast = value;
});
widget.updateTheme.call(selectedBrightness, selectedColor, selectedContrast);
widget.updateTheme(selectedBrightness, selectedColor, selectedContrast);
},
),
),
@ -230,7 +222,7 @@ class ColorSchemeVariantColumn extends StatelessWidget {
),
),
],
)
),
);
}
}
@ -418,11 +410,47 @@ enum ColorSeed {
orange('Orange', Colors.orange),
deepOrange('Deep Orange', Colors.deepOrange),
pink('Pink', Colors.pink),
brightBlue('Bright Blue', Color(0xFF0000FF)),
brightGreen('Bright Green', Color(0xFF00FF00)),
brightRed('Bright Red', Color(0xFFFF0000));
brightBlue('Bright Blue', Color(0xFF0000FF)),
brightGreen('Bright Green', Color(0xFF00FF00)),
brightRed('Bright Red', Color(0xFFFF0000));
const ColorSeed(this.label, this.color);
final String label;
final Color color;
}
class SettingsButton extends StatelessWidget {
const SettingsButton({
super.key,
required this.updateTheme,
required this.selectedBrightness,
required this.selectedContrast,
required this.selectedColor,
});
final Brightness selectedBrightness;
final double selectedContrast;
final Color selectedColor;
final void Function(Brightness, Color, double) updateTheme;
@override
Widget build(BuildContext context) {
return IconButton(
icon: const Icon(Icons.settings),
onPressed: () {
showModalBottomSheet<void>(
barrierColor: Colors.transparent,
context: context,
builder: (BuildContext context) {
return Settings(
selectedColor: selectedColor,
selectedBrightness: selectedBrightness,
selectedContrast: selectedContrast,
updateTheme: updateTheme);
},
);
},
);
}
}

View File

@ -9,8 +9,7 @@ import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('ColorScheme Smoke Test', (WidgetTester tester) async {
await tester.pumpWidget(
const MaterialApp(home: example.ColorSchemeExample()
),
const example.ColorSchemeExample(),
);
expect(find.text('tonalSpot (Default)'), findsOneWidget);
@ -19,7 +18,7 @@ void main() {
testWidgets('Change color seed', (WidgetTester tester) async {
await tester.pumpWidget(
const MaterialApp(home: example.ColorSchemeExample()),
const example.ColorSchemeExample(),
);
ColoredBox coloredBox() {
@ -31,8 +30,9 @@ void main() {
);
}
expect(coloredBox().color, const Color(0xff65558f));
await tester.tap(find.byIcon(Icons.settings));
await tester.tap(find.byType(example.SettingsButton));
await tester.pumpAndSettle();
expect(find.text('Settings'), findsOneWidget);
await tester.tap(find.byType(IconButton).at(6));
await tester.pumpAndSettle();