Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2025-11-08 22:09:06 +00:00
Code Issues Releases Wiki Activity

Add image-based color selection to M3 demo (#1703)

Browse Source 
* Add ColorScheme.fromImageProvider selection method

* method cleanup

* cleanup

* Move changes to experimental/

* Move changes from stable branch

* update image descriptions

* update image selection border

* add mac network permissions

* comment responses
This commit is contained in:
Eilidh Southren
2023-03-22 14:33:47 +00:00
committed by GitHub
parent 481c2e3d1d
commit abf8298657
8 changed files with 325 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
experimental/material_3_demo/lib/main.dart
View File

@@ -25,6 +25,9 @@ class _AppState extends State<App> {
bool useMaterial3 = true;
ThemeMode themeMode = ThemeMode.system;
ColorSeed colorSelected = ColorSeed.baseColor;
ColorImageProvider imageSelected = ColorImageProvider.leaves;
ColorScheme? imageColorScheme = const ColorScheme.light();
ColorSelectionMethod colorSelectionMethod = ColorSelectionMethod.colorSeed;
bool get useLightMode {
switch (themeMode) {
@@ -52,10 +55,23 @@ class _AppState extends State<App> {
void handleColorSelect(int value) {
setState(() {
colorSelectionMethod = ColorSelectionMethod.colorSeed;
colorSelected = ColorSeed.values[value];
});
}
void handleImageSelect(int value) {
final String url = ColorImageProvider.values[value].url;
ColorScheme.fromImageProvider(provider: NetworkImage(url))
.then((newScheme) {
setState(() {
colorSelectionMethod = ColorSelectionMethod.image;
imageSelected = ColorImageProvider.values[value];
imageColorScheme = newScheme;
});
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
@@ -63,12 +79,19 @@ class _AppState extends State<App> {
title: 'Material 3',
themeMode: themeMode,
theme: ThemeData(
colorSchemeSeed: colorSelected.color,
colorSchemeSeed: colorSelectionMethod == ColorSelectionMethod.colorSeed
? colorSelected.color
: null,
colorScheme: colorSelectionMethod == ColorSelectionMethod.image
? imageColorScheme
: null,
useMaterial3: useMaterial3,
brightness: Brightness.light,
),
darkTheme: ThemeData(
colorSchemeSeed: colorSelected.color,
colorSchemeSeed: colorSelectionMethod == ColorSelectionMethod.colorSeed
? colorSelected.color
: imageColorScheme!.primary,
useMaterial3: useMaterial3,
brightness: Brightness.dark,
),
@@ -76,9 +99,12 @@ class _AppState extends State<App> {
useLightMode: useLightMode,
useMaterial3: useMaterial3,
colorSelected: colorSelected,
imageSelected: imageSelected,
handleBrightnessChange: handleBrightnessChange,
handleMaterialVersionChange: handleMaterialVersionChange,
handleColorSelect: handleColorSelect,
handleImageSelect: handleImageSelect,
colorSelectionMethod: colorSelectionMethod,
),
);
}