mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
Flutter 3.7.0 (#1556)
* Update `simplistic_editor` for Flutter 3.4 beta * Re-enable beta and master CI * Disable on master * Added sample code for using plugins and channels from background isolates. * goderbauer feedback 1 * goderbauer feedback2 * goderbauer feedback 3 * Add `background_isolate_channels` to CI * Enable beta CI * Enable all `stable` CI projects * `dart fix --apply` * `print` -> `denugPrint` * Make deps min version not pinned * Drop `_isDebug` * Remove unused import * `dart format` * Fixup `linting_tool` * Fixup `form_app` * Enable all `master` CI * Basic fixes * Patch `simplistic_editor` * Fix nl at eol * Comment out `simplistic_editor` * Incorporating @bleroux's latest changes * Clean up CI scripts * Copy `experimental/material_3_demo` to top level * Update `game_template` * Update `animations` * Update `desktop_photo_search` * Update `flutter_maps_firestore` * Update `form_app` * Update `infinite_list` * Update `isolate_example` * Update `jsonexample` * Update `navigation_and_routing` * Update `place_tracker` * Update `platform_channels` * Update `platform_design` * Update `provider_shopper` * Fixup `context_menus` * `dart format` * Update the main `material_3_demo` * Make `tool/flutter_ci_script_stable.sh` executable again Co-authored-by: Bruno Leroux <bruno.leroux@gmail.com> Co-authored-by: Aaron Clarke <aaclarke@google.com>
This commit is contained in:
Brett Morgan
GitHub
@@ -17,10 +17,14 @@ class ColorPalettesScreen extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
Color selectedColor = Theme.of(context).primaryColor;
|
||||
ThemeData lightTheme =
|
||||
ThemeData(colorSchemeSeed: selectedColor, brightness: Brightness.light);
|
||||
ThemeData darkTheme =
|
||||
ThemeData(colorSchemeSeed: selectedColor, brightness: Brightness.dark);
|
||||
ThemeData lightTheme = ThemeData(
|
||||
colorSchemeSeed: selectedColor,
|
||||
brightness: Brightness.light,
|
||||
);
|
||||
ThemeData darkTheme = ThemeData(
|
||||
colorSchemeSeed: selectedColor,
|
||||
brightness: Brightness.dark,
|
||||
);
|
||||
|
||||
Widget schemeLabel(String brightness) {
|
||||
return Padding(
|
||||
@@ -48,12 +52,12 @@ class ColorPalettesScreen extends StatelessWidget {
|
||||
child: Column(
|
||||
children: [
|
||||
divider,
|
||||
schemeLabel("Light Theme"),
|
||||
schemeLabel('Light Theme'),
|
||||
schemeView(lightTheme),
|
||||
divider,
|
||||
divider,
|
||||
schemeLabel("Dark Theme"),
|
||||
schemeView(darkTheme)
|
||||
schemeLabel('Dark Theme'),
|
||||
schemeView(darkTheme),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -66,19 +70,19 @@ class ColorPalettesScreen extends StatelessWidget {
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
schemeLabel("Light Theme"),
|
||||
schemeView(lightTheme)
|
||||
schemeLabel('Light Theme'),
|
||||
schemeView(lightTheme),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
schemeLabel("Dark Theme"),
|
||||
schemeView(darkTheme)
|
||||
schemeLabel('Dark Theme'),
|
||||
schemeView(darkTheme),
|
||||
],
|
||||
),
|
||||
)
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -100,46 +104,46 @@ class ColorSchemeView extends StatelessWidget {
|
||||
children: [
|
||||
ColorGroup(children: [
|
||||
ColorChip(
|
||||
label: "primary",
|
||||
label: 'primary',
|
||||
color: colorScheme.primary,
|
||||
onColor: colorScheme.onPrimary,
|
||||
),
|
||||
ColorChip(
|
||||
label: "onPrimary",
|
||||
label: 'onPrimary',
|
||||
color: colorScheme.onPrimary,
|
||||
onColor: colorScheme.primary),
|
||||
ColorChip(
|
||||
label: "primaryContainer",
|
||||
label: 'primaryContainer',
|
||||
color: colorScheme.primaryContainer,
|
||||
onColor: colorScheme.onPrimaryContainer,
|
||||
),
|
||||
ColorChip(
|
||||
label: "onPrimaryContainer",
|
||||
label: 'onPrimaryContainer',
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
onColor: colorScheme.primaryContainer,
|
||||
)
|
||||
),
|
||||
]),
|
||||
divider,
|
||||
ColorGroup(children: [
|
||||
ColorChip(
|
||||
label: "secondary",
|
||||
label: 'secondary',
|
||||
color: colorScheme.secondary,
|
||||
onColor: colorScheme.onSecondary,
|
||||
),
|
||||
ColorChip(
|
||||
label: "onSecondary",
|
||||
label: 'onSecondary',
|
||||
color: colorScheme.onSecondary,
|
||||
onColor: colorScheme.secondary,
|
||||
),
|
||||
ColorChip(
|
||||
label: "secondaryContainer",
|
||||
label: 'secondaryContainer',
|
||||
color: colorScheme.secondaryContainer,
|
||||
onColor: colorScheme.onSecondaryContainer,
|
||||
),
|
||||
ColorChip(
|
||||
label: "onSecondaryContainer",
|
||||
label: 'onSecondaryContainer',
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
onColor: colorScheme.secondaryContainer)
|
||||
onColor: colorScheme.secondaryContainer),
|
||||
]),
|
||||
divider,
|
||||
ColorGroup(
|
||||
@@ -248,10 +252,12 @@ class ColorGroup extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Card(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Column(
|
||||
children: children,
|
||||
return RepaintBoundary(
|
||||
child: Card(
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: Column(
|
||||
children: children,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -12,37 +12,47 @@ class ElevationScreen extends StatelessWidget {
|
||||
Color shadowColor = Theme.of(context).colorScheme.shadow;
|
||||
Color surfaceTint = Theme.of(context).colorScheme.primary;
|
||||
return Expanded(
|
||||
child: ListView(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16.0, 20, 16.0, 0),
|
||||
child: Text(
|
||||
'Surface Tint only',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
child: CustomScrollView(
|
||||
slivers: [
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16.0, 20, 16.0, 0),
|
||||
child: Text(
|
||||
'Surface Tint Color Only',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
),
|
||||
),
|
||||
ElevationGrid(surfaceTintColor: surfaceTint),
|
||||
const SizedBox(height: 10),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 0),
|
||||
child: Text(
|
||||
'Surface Tint and Shadow',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
SliverList(
|
||||
delegate: SliverChildListDelegate(<Widget>[
|
||||
const SizedBox(height: 10),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 0),
|
||||
child: Text(
|
||||
'Surface Tint Color and Shadow Color',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
ElevationGrid(
|
||||
shadowColor: shadowColor,
|
||||
surfaceTintColor: surfaceTint,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 0),
|
||||
child: Text(
|
||||
'Shadow only',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
SliverList(
|
||||
delegate: SliverChildListDelegate(<Widget>[
|
||||
const SizedBox(height: 10),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 0),
|
||||
child: Text(
|
||||
'Shadow Color Only',
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
),
|
||||
]),
|
||||
),
|
||||
ElevationGrid(shadowColor: shadowColor)
|
||||
ElevationGrid(shadowColor: shadowColor),
|
||||
],
|
||||
),
|
||||
);
|
||||
@@ -72,18 +82,16 @@ class ElevationGrid extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
return SliverPadding(
|
||||
padding: const EdgeInsets.all(8),
|
||||
child: LayoutBuilder(builder: (context, constraints) {
|
||||
if (constraints.maxWidth < narrowScreenWidthThreshold) {
|
||||
return GridView.count(
|
||||
shrinkWrap: true,
|
||||
sliver: SliverLayoutBuilder(builder: (context, constraints) {
|
||||
if (constraints.crossAxisExtent < narrowScreenWidthThreshold) {
|
||||
return SliverGrid.count(
|
||||
crossAxisCount: 3,
|
||||
children: elevationCards(shadowColor, surfaceTintColor),
|
||||
);
|
||||
} else {
|
||||
return GridView.count(
|
||||
shrinkWrap: true,
|
||||
return SliverGrid.count(
|
||||
crossAxisCount: 6,
|
||||
children: elevationCards(shadowColor, surfaceTintColor),
|
||||
);
|
||||
@@ -117,7 +125,6 @@ class _ElevationCardState extends State<ElevationCard> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
const BorderRadius borderRadius = BorderRadius.all(Radius.circular(4.0));
|
||||
final bool showOpacity = _elevation == widget.info.elevation;
|
||||
final Color color = Theme.of(context).colorScheme.surface;
|
||||
|
||||
return Padding(
|
||||
@@ -142,7 +149,7 @@ class _ElevationCardState extends State<ElevationCard> {
|
||||
'${widget.info.level.toInt()} dp',
|
||||
style: Theme.of(context).textTheme.labelMedium,
|
||||
),
|
||||
if (showOpacity)
|
||||
if (widget.surfaceTint != null)
|
||||
Expanded(
|
||||
child: Align(
|
||||
alignment: Alignment.bottomRight,
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/scheduler.dart';
|
||||
|
||||
import 'color_palettes_screen.dart';
|
||||
import 'component_screen.dart';
|
||||
@@ -10,7 +11,12 @@ import 'elevation_screen.dart';
|
||||
import 'typography_screen.dart';
|
||||
|
||||
void main() {
|
||||
runApp(const Material3Demo());
|
||||
runApp(
|
||||
const MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
home: Material3Demo(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class Material3Demo extends StatefulWidget {
|
||||
@@ -24,180 +30,708 @@ class Material3Demo extends StatefulWidget {
|
||||
// screenWidthThreshold; otherwise, NavigationBar is used for navigation.
|
||||
const double narrowScreenWidthThreshold = 450;
|
||||
|
||||
const Color m3BaseColor = Color(0xff6750a4);
|
||||
const List<Color> colorOptions = [
|
||||
m3BaseColor,
|
||||
Colors.blue,
|
||||
Colors.teal,
|
||||
Colors.green,
|
||||
Colors.yellow,
|
||||
Colors.orange,
|
||||
Colors.pink
|
||||
];
|
||||
const List<String> colorText = <String>[
|
||||
"M3 Baseline",
|
||||
"Blue",
|
||||
"Teal",
|
||||
"Green",
|
||||
"Yellow",
|
||||
"Orange",
|
||||
"Pink",
|
||||
];
|
||||
const double transitionLength = 500;
|
||||
|
||||
class _Material3DemoState extends State<Material3Demo> {
|
||||
enum ColorSeed {
|
||||
baseColor('M3 Baseline', Color(0xff6750a4)),
|
||||
indigo('Indigo', Colors.indigo),
|
||||
blue('Blue', Colors.blue),
|
||||
teal('Teal', Colors.teal),
|
||||
green('Green', Colors.green),
|
||||
yellow('Yellow', Colors.yellow),
|
||||
orange('Orange', Colors.orange),
|
||||
deepOrange('Deep Orange', Colors.deepOrange),
|
||||
pink('Pink', Colors.pink);
|
||||
|
||||
const ColorSeed(this.label, this.color);
|
||||
final String label;
|
||||
final Color color;
|
||||
}
|
||||
|
||||
enum ScreenSelected {
|
||||
component(0),
|
||||
color(1),
|
||||
typography(2),
|
||||
elevation(3);
|
||||
|
||||
const ScreenSelected(this.value);
|
||||
final int value;
|
||||
}
|
||||
|
||||
class _Material3DemoState extends State<Material3Demo>
|
||||
with SingleTickerProviderStateMixin {
|
||||
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
|
||||
late final AnimationController controller;
|
||||
late final CurvedAnimation railAnimation;
|
||||
bool controllerInitialized = false;
|
||||
bool showMediumSizeLayout = false;
|
||||
bool showLargeSizeLayout = false;
|
||||
bool useMaterial3 = true;
|
||||
bool useLightMode = true;
|
||||
int colorSelected = 0;
|
||||
int screenIndex = 0;
|
||||
ThemeMode themeMode = ThemeMode.system;
|
||||
bool get useLightMode {
|
||||
switch (themeMode) {
|
||||
case ThemeMode.system:
|
||||
return SchedulerBinding.instance.window.platformBrightness ==
|
||||
Brightness.light;
|
||||
case ThemeMode.light:
|
||||
return true;
|
||||
case ThemeMode.dark:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
late ThemeData themeData;
|
||||
ColorSeed colorSelected = ColorSeed.baseColor;
|
||||
int screenIndex = ScreenSelected.component.value;
|
||||
|
||||
@override
|
||||
initState() {
|
||||
super.initState();
|
||||
themeData = updateThemes(colorSelected, useMaterial3, useLightMode);
|
||||
controller = AnimationController(
|
||||
duration: Duration(milliseconds: transitionLength.toInt() * 2),
|
||||
value: 0,
|
||||
vsync: this,
|
||||
);
|
||||
railAnimation = CurvedAnimation(
|
||||
parent: controller,
|
||||
curve: const Interval(0.5, 1.0),
|
||||
);
|
||||
}
|
||||
|
||||
ThemeData updateThemes(int colorIndex, bool useMaterial3, bool useLightMode) {
|
||||
return ThemeData(
|
||||
colorSchemeSeed: colorOptions[colorSelected],
|
||||
useMaterial3: useMaterial3,
|
||||
brightness: useLightMode ? Brightness.light : Brightness.dark);
|
||||
@override
|
||||
void dispose() {
|
||||
controller.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void handleScreenChanged(int selectedScreen) {
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
|
||||
final double width = MediaQuery.of(context).size.width;
|
||||
final AnimationStatus status = controller.status;
|
||||
if (width > 1000) {
|
||||
if (width > 1500) {
|
||||
showMediumSizeLayout = false;
|
||||
showLargeSizeLayout = true;
|
||||
} else {
|
||||
showMediumSizeLayout = true;
|
||||
showLargeSizeLayout = false;
|
||||
}
|
||||
if (status != AnimationStatus.forward &&
|
||||
status != AnimationStatus.completed) {
|
||||
controller.forward();
|
||||
}
|
||||
} else {
|
||||
showMediumSizeLayout = false;
|
||||
showLargeSizeLayout = false;
|
||||
if (status != AnimationStatus.reverse &&
|
||||
status != AnimationStatus.dismissed) {
|
||||
controller.reverse();
|
||||
}
|
||||
}
|
||||
if (!controllerInitialized) {
|
||||
controllerInitialized = true;
|
||||
controller.value = width > 1000 ? 1 : 0;
|
||||
}
|
||||
}
|
||||
|
||||
void handleScreenChanged(int screenSelected) {
|
||||
setState(() {
|
||||
screenIndex = selectedScreen;
|
||||
screenIndex = screenSelected;
|
||||
});
|
||||
}
|
||||
|
||||
void handleBrightnessChange() {
|
||||
void handleBrightnessChange(bool useLightMode) {
|
||||
setState(() {
|
||||
useLightMode = !useLightMode;
|
||||
themeData = updateThemes(colorSelected, useMaterial3, useLightMode);
|
||||
themeMode = useLightMode ? ThemeMode.light : ThemeMode.dark;
|
||||
});
|
||||
}
|
||||
|
||||
void handleMaterialVersionChange() {
|
||||
setState(() {
|
||||
useMaterial3 = !useMaterial3;
|
||||
themeData = updateThemes(colorSelected, useMaterial3, useLightMode);
|
||||
});
|
||||
}
|
||||
|
||||
void handleColorSelect(int value) {
|
||||
setState(() {
|
||||
colorSelected = value;
|
||||
themeData = updateThemes(colorSelected, useMaterial3, useLightMode);
|
||||
colorSelected = ColorSeed.values[value];
|
||||
});
|
||||
}
|
||||
|
||||
Widget createScreenFor(int screenIndex, bool showNavBarExample) {
|
||||
switch (screenIndex) {
|
||||
case 0:
|
||||
return ComponentScreen(showNavBottomBar: showNavBarExample);
|
||||
case 1:
|
||||
Widget createScreenFor(
|
||||
ScreenSelected screenSelected, bool showNavBarExample) {
|
||||
switch (screenSelected) {
|
||||
case ScreenSelected.component:
|
||||
return Expanded(
|
||||
child: OneTwoTransition(
|
||||
animation: railAnimation,
|
||||
one: FirstComponentList(
|
||||
showNavBottomBar: showNavBarExample,
|
||||
scaffoldKey: scaffoldKey,
|
||||
showSecondList: showMediumSizeLayout || showLargeSizeLayout),
|
||||
two: SecondComponentList(
|
||||
scaffoldKey: scaffoldKey,
|
||||
),
|
||||
),
|
||||
);
|
||||
case ScreenSelected.color:
|
||||
return const ColorPalettesScreen();
|
||||
case 2:
|
||||
case ScreenSelected.typography:
|
||||
return const TypographyScreen();
|
||||
case 3:
|
||||
case ScreenSelected.elevation:
|
||||
return const ElevationScreen();
|
||||
default:
|
||||
return ComponentScreen(showNavBottomBar: showNavBarExample);
|
||||
return FirstComponentList(
|
||||
showNavBottomBar: showNavBarExample,
|
||||
scaffoldKey: scaffoldKey,
|
||||
showSecondList: showMediumSizeLayout || showLargeSizeLayout);
|
||||
}
|
||||
}
|
||||
|
||||
PreferredSizeWidget createAppBar() {
|
||||
return AppBar(
|
||||
title: useMaterial3 ? const Text("Material 3") : const Text("Material 2"),
|
||||
actions: [
|
||||
IconButton(
|
||||
icon: useLightMode
|
||||
? const Icon(Icons.wb_sunny_outlined)
|
||||
: const Icon(Icons.wb_sunny),
|
||||
onPressed: handleBrightnessChange,
|
||||
tooltip: "Toggle brightness",
|
||||
),
|
||||
IconButton(
|
||||
icon: useMaterial3
|
||||
? const Icon(Icons.filter_3)
|
||||
: const Icon(Icons.filter_2),
|
||||
onPressed: handleMaterialVersionChange,
|
||||
tooltip: "Switch to Material ${useMaterial3 ? 2 : 3}",
|
||||
),
|
||||
PopupMenuButton(
|
||||
icon: const Icon(Icons.more_vert),
|
||||
shape:
|
||||
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
itemBuilder: (context) {
|
||||
return List.generate(colorOptions.length, (index) {
|
||||
return PopupMenuItem(
|
||||
value: index,
|
||||
child: Wrap(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 10),
|
||||
child: Icon(
|
||||
index == colorSelected
|
||||
? Icons.color_lens
|
||||
: Icons.color_lens_outlined,
|
||||
color: colorOptions[index],
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 20),
|
||||
child: Text(colorText[index]))
|
||||
],
|
||||
));
|
||||
});
|
||||
},
|
||||
onSelected: handleColorSelect,
|
||||
),
|
||||
],
|
||||
title: useMaterial3 ? const Text('Material 3') : const Text('Material 2'),
|
||||
actions: !showMediumSizeLayout && !showLargeSizeLayout
|
||||
? [
|
||||
_BrightnessButton(
|
||||
handleBrightnessChange: handleBrightnessChange,
|
||||
),
|
||||
_Material3Button(
|
||||
handleMaterialVersionChange: handleMaterialVersionChange,
|
||||
),
|
||||
_ColorSeedButton(
|
||||
handleColorSelect: handleColorSelect,
|
||||
colorSelected: colorSelected,
|
||||
),
|
||||
]
|
||||
: [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: 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(),
|
||||
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,
|
||||
selectedIcon: const Icon(Icons.circle),
|
||||
onPressed: () {
|
||||
handleColorSelect(i);
|
||||
},
|
||||
)),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
Widget _trailingActions() => Column(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Flexible(
|
||||
child: _BrightnessButton(
|
||||
handleBrightnessChange: handleBrightnessChange,
|
||||
showTooltipBelow: false,
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: _Material3Button(
|
||||
handleMaterialVersionChange: handleMaterialVersionChange,
|
||||
showTooltipBelow: false,
|
||||
),
|
||||
),
|
||||
Flexible(
|
||||
child: _ColorSeedButton(
|
||||
handleColorSelect: handleColorSelect,
|
||||
colorSelected: colorSelected,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return MaterialApp(
|
||||
debugShowCheckedModeBanner: false,
|
||||
title: 'Material 3',
|
||||
themeMode: useLightMode ? ThemeMode.light : ThemeMode.dark,
|
||||
theme: themeData,
|
||||
home: LayoutBuilder(builder: (context, constraints) {
|
||||
if (constraints.maxWidth < narrowScreenWidthThreshold) {
|
||||
return Scaffold(
|
||||
themeMode: themeMode,
|
||||
theme: ThemeData(
|
||||
colorSchemeSeed: colorSelected.color,
|
||||
useMaterial3: useMaterial3,
|
||||
brightness: Brightness.light,
|
||||
),
|
||||
darkTheme: ThemeData(
|
||||
colorSchemeSeed: colorSelected.color,
|
||||
useMaterial3: useMaterial3,
|
||||
brightness: Brightness.dark,
|
||||
),
|
||||
home: AnimatedBuilder(
|
||||
animation: controller,
|
||||
builder: (context, child) {
|
||||
return NavigationTransition(
|
||||
scaffoldKey: scaffoldKey,
|
||||
animationController: controller,
|
||||
railAnimation: railAnimation,
|
||||
appBar: createAppBar(),
|
||||
body: Row(children: <Widget>[
|
||||
createScreenFor(screenIndex, false),
|
||||
]),
|
||||
bottomNavigationBar: NavigationBars(
|
||||
onSelectItem: handleScreenChanged,
|
||||
body: createScreenFor(
|
||||
ScreenSelected.values[screenIndex], controller.value == 1),
|
||||
navigationRail: NavigationRail(
|
||||
extended: showLargeSizeLayout,
|
||||
destinations: navRailDestinations,
|
||||
selectedIndex: screenIndex,
|
||||
onDestinationSelected: (index) {
|
||||
setState(() {
|
||||
screenIndex = index;
|
||||
handleScreenChanged(screenIndex);
|
||||
});
|
||||
},
|
||||
trailing: Expanded(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 20),
|
||||
child: showLargeSizeLayout
|
||||
? _expandedTrailingActions()
|
||||
: _trailingActions(),
|
||||
),
|
||||
),
|
||||
),
|
||||
navigationBar: NavigationBars(
|
||||
onSelectItem: (index) {
|
||||
setState(() {
|
||||
screenIndex = index;
|
||||
handleScreenChanged(screenIndex);
|
||||
});
|
||||
},
|
||||
selectedIndex: screenIndex,
|
||||
isExampleBar: false,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return Scaffold(
|
||||
appBar: createAppBar(),
|
||||
body: SafeArea(
|
||||
bottom: false,
|
||||
top: false,
|
||||
child: Row(
|
||||
children: <Widget>[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 5),
|
||||
child: NavigationRailSection(
|
||||
onSelectItem: handleScreenChanged,
|
||||
selectedIndex: screenIndex)),
|
||||
const VerticalDivider(thickness: 1, width: 1),
|
||||
createScreenFor(screenIndex, true),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}),
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _BrightnessButton extends StatelessWidget {
|
||||
const _BrightnessButton({
|
||||
required this.handleBrightnessChange,
|
||||
this.showTooltipBelow = true,
|
||||
});
|
||||
|
||||
final Function handleBrightnessChange;
|
||||
final bool showTooltipBelow;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isBright = Theme.of(context).brightness == Brightness.light;
|
||||
return Tooltip(
|
||||
preferBelow: showTooltipBelow,
|
||||
message: 'Toggle brightness',
|
||||
child: IconButton(
|
||||
icon: isBright
|
||||
? const Icon(Icons.dark_mode_outlined)
|
||||
: const Icon(Icons.light_mode_outlined),
|
||||
onPressed: () => handleBrightnessChange(!isBright),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _Material3Button extends StatelessWidget {
|
||||
const _Material3Button({
|
||||
required this.handleMaterialVersionChange,
|
||||
this.showTooltipBelow = true,
|
||||
});
|
||||
|
||||
final void Function() handleMaterialVersionChange;
|
||||
final bool showTooltipBelow;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final useMaterial3 = Theme.of(context).useMaterial3;
|
||||
return Tooltip(
|
||||
preferBelow: showTooltipBelow,
|
||||
message: 'Switch to Material ${useMaterial3 ? 2 : 3}',
|
||||
child: IconButton(
|
||||
icon: useMaterial3
|
||||
? const Icon(Icons.filter_2)
|
||||
: const Icon(Icons.filter_3),
|
||||
onPressed: handleMaterialVersionChange,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ColorSeedButton extends StatelessWidget {
|
||||
const _ColorSeedButton({
|
||||
required this.handleColorSelect,
|
||||
required this.colorSelected,
|
||||
});
|
||||
|
||||
final void Function(int) handleColorSelect;
|
||||
final ColorSeed colorSelected;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return PopupMenuButton(
|
||||
icon: Icon(
|
||||
Icons.palette_outlined,
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
tooltip: 'Select a seed color',
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
|
||||
itemBuilder: (context) {
|
||||
return List.generate(ColorSeed.values.length, (index) {
|
||||
ColorSeed currentColor = ColorSeed.values[index];
|
||||
|
||||
return PopupMenuItem(
|
||||
value: index,
|
||||
enabled: currentColor != colorSelected,
|
||||
child: Wrap(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 10),
|
||||
child: Icon(
|
||||
currentColor == colorSelected
|
||||
? Icons.color_lens
|
||||
: Icons.color_lens_outlined,
|
||||
color: currentColor.color,
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 20),
|
||||
child: Text(currentColor.label),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
});
|
||||
},
|
||||
onSelected: handleColorSelect,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class NavigationTransition extends StatefulWidget {
|
||||
const NavigationTransition(
|
||||
{super.key,
|
||||
required this.scaffoldKey,
|
||||
required this.animationController,
|
||||
required this.railAnimation,
|
||||
required this.navigationRail,
|
||||
required this.navigationBar,
|
||||
required this.appBar,
|
||||
required this.body});
|
||||
|
||||
final GlobalKey<ScaffoldState> scaffoldKey;
|
||||
final AnimationController animationController;
|
||||
final CurvedAnimation railAnimation;
|
||||
final Widget navigationRail;
|
||||
final Widget navigationBar;
|
||||
final PreferredSizeWidget appBar;
|
||||
final Widget body;
|
||||
|
||||
@override
|
||||
State<NavigationTransition> createState() => _NavigationTransitionState();
|
||||
}
|
||||
|
||||
class _NavigationTransitionState extends State<NavigationTransition> {
|
||||
late final AnimationController controller;
|
||||
late final CurvedAnimation railAnimation;
|
||||
late final ReverseAnimation barAnimation;
|
||||
bool controllerInitialized = false;
|
||||
bool showDivider = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
controller = widget.animationController;
|
||||
railAnimation = widget.railAnimation;
|
||||
|
||||
barAnimation = ReverseAnimation(
|
||||
CurvedAnimation(
|
||||
parent: controller,
|
||||
curve: const Interval(0.0, 0.5),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final ColorScheme colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return Scaffold(
|
||||
key: widget.scaffoldKey,
|
||||
appBar: widget.appBar,
|
||||
body: Row(
|
||||
children: <Widget>[
|
||||
RailTransition(
|
||||
animation: railAnimation,
|
||||
backgroundColor: colorScheme.surface,
|
||||
child: widget.navigationRail,
|
||||
),
|
||||
widget.body,
|
||||
],
|
||||
),
|
||||
bottomNavigationBar: BarTransition(
|
||||
animation: barAnimation,
|
||||
backgroundColor: colorScheme.surface,
|
||||
child: widget.navigationBar,
|
||||
),
|
||||
endDrawer: const NavigationDrawerSection(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
final List<NavigationRailDestination> navRailDestinations = appBarDestinations
|
||||
.map(
|
||||
(destination) => NavigationRailDestination(
|
||||
icon: Tooltip(
|
||||
message: destination.label,
|
||||
child: destination.icon,
|
||||
),
|
||||
selectedIcon: Tooltip(
|
||||
message: destination.label,
|
||||
child: destination.selectedIcon,
|
||||
),
|
||||
label: Text(destination.label),
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
|
||||
class SizeAnimation extends CurvedAnimation {
|
||||
SizeAnimation(Animation<double> parent)
|
||||
: super(
|
||||
parent: parent,
|
||||
curve: const Interval(
|
||||
0.2,
|
||||
0.8,
|
||||
curve: Curves.easeInOutCubicEmphasized,
|
||||
),
|
||||
reverseCurve: Interval(
|
||||
0,
|
||||
0.2,
|
||||
curve: Curves.easeInOutCubicEmphasized.flipped,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class OffsetAnimation extends CurvedAnimation {
|
||||
OffsetAnimation(Animation<double> parent)
|
||||
: super(
|
||||
parent: parent,
|
||||
curve: const Interval(
|
||||
0.4,
|
||||
1.0,
|
||||
curve: Curves.easeInOutCubicEmphasized,
|
||||
),
|
||||
reverseCurve: Interval(
|
||||
0,
|
||||
0.2,
|
||||
curve: Curves.easeInOutCubicEmphasized.flipped,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
class RailTransition extends StatefulWidget {
|
||||
const RailTransition(
|
||||
{super.key,
|
||||
required this.animation,
|
||||
required this.backgroundColor,
|
||||
required this.child});
|
||||
|
||||
final Animation<double> animation;
|
||||
final Widget child;
|
||||
final Color backgroundColor;
|
||||
|
||||
@override
|
||||
State<RailTransition> createState() => _RailTransition();
|
||||
}
|
||||
|
||||
class _RailTransition extends State<RailTransition> {
|
||||
late Animation<Offset> offsetAnimation;
|
||||
late Animation<double> widthAnimation;
|
||||
|
||||
@override
|
||||
void didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
|
||||
// The animations are only rebuilt by this method when the text
|
||||
// direction changes because this widget only depends on Directionality.
|
||||
final bool ltr = Directionality.of(context) == TextDirection.ltr;
|
||||
|
||||
widthAnimation = Tween<double>(
|
||||
begin: 0,
|
||||
end: 1,
|
||||
).animate(SizeAnimation(widget.animation));
|
||||
|
||||
offsetAnimation = Tween<Offset>(
|
||||
begin: ltr ? const Offset(-1, 0) : const Offset(1, 0),
|
||||
end: Offset.zero,
|
||||
).animate(OffsetAnimation(widget.animation));
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipRect(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(color: widget.backgroundColor),
|
||||
child: Align(
|
||||
alignment: Alignment.topLeft,
|
||||
widthFactor: widthAnimation.value,
|
||||
child: FractionalTranslation(
|
||||
translation: offsetAnimation.value,
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class BarTransition extends StatefulWidget {
|
||||
const BarTransition(
|
||||
{super.key,
|
||||
required this.animation,
|
||||
required this.backgroundColor,
|
||||
required this.child});
|
||||
|
||||
final Animation<double> animation;
|
||||
final Color backgroundColor;
|
||||
final Widget child;
|
||||
|
||||
@override
|
||||
State<BarTransition> createState() => _BarTransition();
|
||||
}
|
||||
|
||||
class _BarTransition extends State<BarTransition> {
|
||||
late final Animation<Offset> offsetAnimation;
|
||||
late final Animation<double> heightAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
offsetAnimation = Tween<Offset>(
|
||||
begin: const Offset(0, 1),
|
||||
end: Offset.zero,
|
||||
).animate(OffsetAnimation(widget.animation));
|
||||
|
||||
heightAnimation = Tween<double>(
|
||||
begin: 0,
|
||||
end: 1,
|
||||
).animate(SizeAnimation(widget.animation));
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ClipRect(
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(color: widget.backgroundColor),
|
||||
child: Align(
|
||||
alignment: Alignment.topLeft,
|
||||
heightFactor: heightAnimation.value,
|
||||
child: FractionalTranslation(
|
||||
translation: offsetAnimation.value,
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class OneTwoTransition extends StatefulWidget {
|
||||
const OneTwoTransition({
|
||||
super.key,
|
||||
required this.animation,
|
||||
required this.one,
|
||||
required this.two,
|
||||
});
|
||||
|
||||
final Animation<double> animation;
|
||||
final Widget one;
|
||||
final Widget two;
|
||||
|
||||
@override
|
||||
State<OneTwoTransition> createState() => _OneTwoTransitionState();
|
||||
}
|
||||
|
||||
class _OneTwoTransitionState extends State<OneTwoTransition> {
|
||||
late final Animation<Offset> offsetAnimation;
|
||||
late final Animation<double> widthAnimation;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
offsetAnimation = Tween<Offset>(
|
||||
begin: const Offset(1, 0),
|
||||
end: Offset.zero,
|
||||
).animate(OffsetAnimation(widget.animation));
|
||||
|
||||
widthAnimation = Tween<double>(
|
||||
begin: 0,
|
||||
end: 1000,
|
||||
).animate(SizeAnimation(widget.animation));
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Row(
|
||||
children: <Widget>[
|
||||
Flexible(
|
||||
flex: 1000,
|
||||
child: widget.one,
|
||||
),
|
||||
if (widthAnimation.value.toInt() > 0) ...[
|
||||
Flexible(
|
||||
flex: widthAnimation.value.toInt(),
|
||||
child: FractionalTranslation(
|
||||
translation: offsetAnimation.value,
|
||||
child: widget.two,
|
||||
),
|
||||
)
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,26 +17,26 @@ class TypographyScreen extends StatelessWidget {
|
||||
children: <Widget>[
|
||||
const SizedBox(height: 7),
|
||||
TextStyleExample(
|
||||
name: "Display Large", style: textTheme.displayLarge!),
|
||||
name: 'Display Large', style: textTheme.displayLarge!),
|
||||
TextStyleExample(
|
||||
name: "Display Medium", style: textTheme.displayMedium!),
|
||||
name: 'Display Medium', style: textTheme.displayMedium!),
|
||||
TextStyleExample(
|
||||
name: "Display Small", style: textTheme.displaySmall!),
|
||||
name: 'Display Small', style: textTheme.displaySmall!),
|
||||
TextStyleExample(
|
||||
name: "Headline Large", style: textTheme.headlineLarge!),
|
||||
name: 'Headline Large', style: textTheme.headlineLarge!),
|
||||
TextStyleExample(
|
||||
name: "Headline Medium", style: textTheme.headlineMedium!),
|
||||
name: 'Headline Medium', style: textTheme.headlineMedium!),
|
||||
TextStyleExample(
|
||||
name: "Headline Small", style: textTheme.headlineSmall!),
|
||||
TextStyleExample(name: "Title Large", style: textTheme.titleLarge!),
|
||||
TextStyleExample(name: "Title Medium", style: textTheme.titleMedium!),
|
||||
TextStyleExample(name: "Title Small", style: textTheme.titleSmall!),
|
||||
TextStyleExample(name: "Label Large", style: textTheme.labelLarge!),
|
||||
TextStyleExample(name: "Label Medium", style: textTheme.labelMedium!),
|
||||
TextStyleExample(name: "Label Small", style: textTheme.labelSmall!),
|
||||
TextStyleExample(name: "Body Large", style: textTheme.bodyLarge!),
|
||||
TextStyleExample(name: "Body Medium", style: textTheme.bodyMedium!),
|
||||
TextStyleExample(name: "Body Small", style: textTheme.bodySmall!),
|
||||
name: 'Headline Small', style: textTheme.headlineSmall!),
|
||||
TextStyleExample(name: 'Title Large', style: textTheme.titleLarge!),
|
||||
TextStyleExample(name: 'Title Medium', style: textTheme.titleMedium!),
|
||||
TextStyleExample(name: 'Title Small', style: textTheme.titleSmall!),
|
||||
TextStyleExample(name: 'Label Large', style: textTheme.labelLarge!),
|
||||
TextStyleExample(name: 'Label Medium', style: textTheme.labelMedium!),
|
||||
TextStyleExample(name: 'Label Small', style: textTheme.labelSmall!),
|
||||
TextStyleExample(name: 'Body Large', style: textTheme.bodyLarge!),
|
||||
TextStyleExample(name: 'Body Medium', style: textTheme.bodyMedium!),
|
||||
TextStyleExample(name: 'Body Small', style: textTheme.bodySmall!),
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user