mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 22:09:06 +00:00
Update for Flutter 3.10 beta (#1746)
## Pre-launch Checklist - [x] I read the [Flutter Style Guide] _recently_, and have followed its advice. - [x] I signed the [CLA]. - [x] I read the [Contributors Guide]. - [x] I updated/added relevant documentation (doc comments with `///`). - [ ] All existing and new tests are passing. --------- Co-authored-by: David Iglesias <ditman@gmail.com> Co-authored-by: Mark Thompson <2554588+MarkTechson@users.noreply.github.com> Co-authored-by: John Ryan <ryjohn@google.com>
This commit is contained in:
Brett Morgan
GitHub
@@ -19,14 +19,21 @@ class Home extends StatefulWidget {
|
||||
required this.handleBrightnessChange,
|
||||
required this.handleMaterialVersionChange,
|
||||
required this.handleColorSelect,
|
||||
required this.handleImageSelect,
|
||||
required this.colorSelectionMethod,
|
||||
required this.imageSelected,
|
||||
});
|
||||
|
||||
final bool useLightMode;
|
||||
final bool useMaterial3;
|
||||
final ColorSeed colorSelected;
|
||||
final ColorImageProvider imageSelected;
|
||||
final ColorSelectionMethod colorSelectionMethod;
|
||||
|
||||
final void Function(bool useLightMode) handleBrightnessChange;
|
||||
final void Function() handleMaterialVersionChange;
|
||||
final void Function(int value) handleColorSelect;
|
||||
final void Function(int value) handleImageSelect;
|
||||
|
||||
@override
|
||||
State<Home> createState() => _HomeState();
|
||||
@@ -146,66 +153,18 @@ class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
|
||||
_ColorSeedButton(
|
||||
handleColorSelect: widget.handleColorSelect,
|
||||
colorSelected: widget.colorSelected,
|
||||
colorSelectionMethod: widget.colorSelectionMethod,
|
||||
),
|
||||
_ColorImageButton(
|
||||
handleImageSelect: widget.handleImageSelect,
|
||||
imageSelected: widget.imageSelected,
|
||||
colorSelectionMethod: widget.colorSelectionMethod,
|
||||
)
|
||||
]
|
||||
: [Container()],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _expandedTrailingActions() => Container(
|
||||
constraints: const BoxConstraints.tightFor(width: 250),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 30),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const Text('Brightness'),
|
||||
Expanded(child: Container()),
|
||||
Switch(
|
||||
value: widget.useLightMode,
|
||||
onChanged: (value) {
|
||||
widget.handleBrightnessChange(value);
|
||||
})
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
widget.useMaterial3
|
||||
? const Text('Material 3')
|
||||
: const Text('Material 2'),
|
||||
Expanded(child: Container()),
|
||||
Switch(
|
||||
value: widget.useMaterial3,
|
||||
onChanged: (_) {
|
||||
widget.handleMaterialVersionChange();
|
||||
})
|
||||
],
|
||||
),
|
||||
const Divider(),
|
||||
ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 200.0),
|
||||
child: GridView.count(
|
||||
crossAxisCount: 3,
|
||||
children: List.generate(
|
||||
ColorSeed.values.length,
|
||||
(i) => IconButton(
|
||||
icon: const Icon(Icons.radio_button_unchecked),
|
||||
color: ColorSeed.values[i].color,
|
||||
isSelected: widget.colorSelected.color ==
|
||||
ColorSeed.values[i].color,
|
||||
selectedIcon: const Icon(Icons.circle),
|
||||
onPressed: () {
|
||||
widget.handleColorSelect(i);
|
||||
},
|
||||
)),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
Widget _trailingActions() => Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
@@ -225,6 +184,14 @@ class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
|
||||
child: _ColorSeedButton(
|
||||
handleColorSelect: widget.handleColorSelect,
|
||||
colorSelected: widget.colorSelected,
|
||||
colorSelectionMethod: widget.colorSelectionMethod,
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: _ColorImageButton(
|
||||
handleImageSelect: widget.handleImageSelect,
|
||||
imageSelected: widget.imageSelected,
|
||||
colorSelectionMethod: widget.colorSelectionMethod,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -256,7 +223,18 @@ class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 20),
|
||||
child: showLargeSizeLayout
|
||||
? _expandedTrailingActions()
|
||||
? _ExpandedTrailingActions(
|
||||
useLightMode: widget.useLightMode,
|
||||
handleBrightnessChange: widget.handleBrightnessChange,
|
||||
useMaterial3: widget.useMaterial3,
|
||||
handleMaterialVersionChange:
|
||||
widget.handleMaterialVersionChange,
|
||||
handleImageSelect: widget.handleImageSelect,
|
||||
handleColorSelect: widget.handleColorSelect,
|
||||
colorSelectionMethod: widget.colorSelectionMethod,
|
||||
imageSelected: widget.imageSelected,
|
||||
colorSelected: widget.colorSelected,
|
||||
)
|
||||
: _trailingActions(),
|
||||
),
|
||||
),
|
||||
@@ -331,10 +309,12 @@ class _ColorSeedButton extends StatelessWidget {
|
||||
const _ColorSeedButton({
|
||||
required this.handleColorSelect,
|
||||
required this.colorSelected,
|
||||
required this.colorSelectionMethod,
|
||||
});
|
||||
|
||||
final void Function(int) handleColorSelect;
|
||||
final ColorSeed colorSelected;
|
||||
final ColorSelectionMethod colorSelectionMethod;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -351,13 +331,15 @@ class _ColorSeedButton extends StatelessWidget {
|
||||
|
||||
return PopupMenuItem(
|
||||
value: index,
|
||||
enabled: currentColor != colorSelected,
|
||||
enabled: currentColor != colorSelected ||
|
||||
colorSelectionMethod != ColorSelectionMethod.colorSeed,
|
||||
child: Wrap(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 10),
|
||||
child: Icon(
|
||||
currentColor == colorSelected
|
||||
currentColor == colorSelected &&
|
||||
colorSelectionMethod != ColorSelectionMethod.image
|
||||
? Icons.color_lens
|
||||
: Icons.color_lens_outlined,
|
||||
color: currentColor.color,
|
||||
@@ -377,6 +359,234 @@ class _ColorSeedButton extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
class _ColorImageButton extends StatelessWidget {
|
||||
const _ColorImageButton({
|
||||
required this.handleImageSelect,
|
||||
required this.imageSelected,
|
||||
required this.colorSelectionMethod,
|
||||
});
|
||||
|
||||
final void Function(int) handleImageSelect;
|
||||
final ColorImageProvider imageSelected;
|
||||
final ColorSelectionMethod colorSelectionMethod;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return PopupMenuButton(
|
||||
icon: Icon(
|
||||
Icons.image_outlined,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
tooltip: 'Select a color extraction image',
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
itemBuilder: (context) {
|
||||
return List.generate(ColorImageProvider.values.length, (index) {
|
||||
ColorImageProvider currentImageProvider =
|
||||
ColorImageProvider.values[index];
|
||||
|
||||
return PopupMenuItem(
|
||||
value: index,
|
||||
enabled: currentImageProvider != imageSelected ||
|
||||
colorSelectionMethod != ColorSelectionMethod.image,
|
||||
child: Wrap(
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 10),
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 48),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(8.0),
|
||||
child: Image(
|
||||
image: NetworkImage(
|
||||
ColorImageProvider.values[index].url),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 20),
|
||||
child: Text(currentImageProvider.label),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
onSelected: handleImageSelect,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ExpandedTrailingActions extends StatelessWidget {
|
||||
const _ExpandedTrailingActions({
|
||||
required this.useLightMode,
|
||||
required this.handleBrightnessChange,
|
||||
required this.useMaterial3,
|
||||
required this.handleMaterialVersionChange,
|
||||
required this.handleColorSelect,
|
||||
required this.handleImageSelect,
|
||||
required this.imageSelected,
|
||||
required this.colorSelected,
|
||||
required this.colorSelectionMethod,
|
||||
});
|
||||
|
||||
final void Function(bool) handleBrightnessChange;
|
||||
final void Function() handleMaterialVersionChange;
|
||||
final void Function(int) handleImageSelect;
|
||||
final void Function(int) handleColorSelect;
|
||||
|
||||
final bool useLightMode;
|
||||
final bool useMaterial3;
|
||||
|
||||
final ColorImageProvider imageSelected;
|
||||
final ColorSeed colorSelected;
|
||||
final ColorSelectionMethod colorSelectionMethod;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final screenHeight = MediaQuery.of(context).size.height;
|
||||
final trailingActionsBody = Container(
|
||||
constraints: const BoxConstraints.tightFor(width: 250),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 30),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
const Text('Brightness'),
|
||||
Expanded(child: Container()),
|
||||
Switch(
|
||||
value: useLightMode,
|
||||
onChanged: (value) {
|
||||
handleBrightnessChange(value);
|
||||
})
|
||||
],
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
useMaterial3
|
||||
? const Text('Material 3')
|
||||
: const Text('Material 2'),
|
||||
Expanded(child: Container()),
|
||||
Switch(
|
||||
value: useMaterial3,
|
||||
onChanged: (_) {
|
||||
handleMaterialVersionChange();
|
||||
})
|
||||
],
|
||||
),
|
||||
const Divider(),
|
||||
_ExpandedColorSeedAction(
|
||||
handleColorSelect: handleColorSelect,
|
||||
colorSelected: colorSelected,
|
||||
colorSelectionMethod: colorSelectionMethod,
|
||||
),
|
||||
const Divider(),
|
||||
_ExpandedImageColorAction(
|
||||
handleImageSelect: handleImageSelect,
|
||||
imageSelected: imageSelected,
|
||||
colorSelectionMethod: colorSelectionMethod,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
return screenHeight > 740
|
||||
? trailingActionsBody
|
||||
: SingleChildScrollView(child: trailingActionsBody);
|
||||
}
|
||||
}
|
||||
|
||||
class _ExpandedColorSeedAction extends StatelessWidget {
|
||||
const _ExpandedColorSeedAction({
|
||||
required this.handleColorSelect,
|
||||
required this.colorSelected,
|
||||
required this.colorSelectionMethod,
|
||||
});
|
||||
|
||||
final void Function(int) handleColorSelect;
|
||||
final ColorSeed colorSelected;
|
||||
final ColorSelectionMethod colorSelectionMethod;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 200.0),
|
||||
child: GridView.count(
|
||||
crossAxisCount: 3,
|
||||
children: List.generate(
|
||||
ColorSeed.values.length,
|
||||
(i) => IconButton(
|
||||
icon: const Icon(Icons.radio_button_unchecked),
|
||||
color: ColorSeed.values[i].color,
|
||||
isSelected: colorSelected.color == ColorSeed.values[i].color &&
|
||||
colorSelectionMethod == ColorSelectionMethod.colorSeed,
|
||||
selectedIcon: const Icon(Icons.circle),
|
||||
onPressed: () {
|
||||
handleColorSelect(i);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ExpandedImageColorAction extends StatelessWidget {
|
||||
const _ExpandedImageColorAction({
|
||||
required this.handleImageSelect,
|
||||
required this.imageSelected,
|
||||
required this.colorSelectionMethod,
|
||||
});
|
||||
|
||||
final void Function(int) handleImageSelect;
|
||||
final ColorImageProvider imageSelected;
|
||||
final ColorSelectionMethod colorSelectionMethod;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxHeight: 150.0),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8.0),
|
||||
child: GridView.count(
|
||||
crossAxisCount: 3,
|
||||
children: List.generate(
|
||||
ColorImageProvider.values.length,
|
||||
(i) => InkWell(
|
||||
borderRadius: BorderRadius.circular(4.0),
|
||||
onTap: () => handleImageSelect(i),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(8.0),
|
||||
child: Material(
|
||||
borderRadius: BorderRadius.circular(4.0),
|
||||
elevation: imageSelected == ColorImageProvider.values[i] &&
|
||||
colorSelectionMethod == ColorSelectionMethod.image
|
||||
? 3
|
||||
: 0,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(4.0),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(4.0),
|
||||
child: Image(
|
||||
image: NetworkImage(ColorImageProvider.values[i].url),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NavigationTransition extends StatefulWidget {
|
||||
const NavigationTransition(
|
||||
{super.key,
|
||||
|
||||
Reference in New Issue
Block a user