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

[material_3_demo] Refactor application code into multiple small libraries (#2581)

Browse Source
This commit is contained in:
Kevin Moore
2025-02-18 09:41:16 -06:00
committed by GitHub
parent a8d02fbc7a
commit 6cf81895d1
23 changed files with 1000 additions and 910 deletions
Download Patch File Download Diff File Expand all files Collapse all files

863
material_3_demo/lib/home.dart
View File

@@ -1,863 +0,0 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'color_palettes_screen.dart';
import 'component_screen.dart';
import 'constants.dart';
import 'elevation_screen.dart';
import 'typography_screen.dart';
class Home extends StatefulWidget {
const Home({
super.key,
required this.useLightMode,
required this.useMaterial3,
required this.colorSelected,
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();
}
class _HomeState extends State<Home> 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;
int screenIndex = ScreenSelected.component.value;
@override
initState() {
super.initState();
controller = AnimationController(
duration: Duration(milliseconds: transitionLength.toInt() * 2),
value: 0,
vsync: this,
);
railAnimation = CurvedAnimation(
parent: controller,
curve: const Interval(0.5, 1.0),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
final double width = MediaQuery.of(context).size.width;
final AnimationStatus status = controller.status;
if (width > mediumWidthBreakpoint) {
if (width > largeWidthBreakpoint) {
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 > mediumWidthBreakpoint ? 1 : 0;
}
}
void handleScreenChanged(int screenSelected) {
setState(() {
screenIndex = screenSelected;
});
}
Widget createScreenFor(
ScreenSelected screenSelected,
bool showNavBarExample,
) => switch (screenSelected) {
ScreenSelected.component => Expanded(
child: OneTwoTransition(
animation: railAnimation,
one: FirstComponentList(
showNavBottomBar: showNavBarExample,
scaffoldKey: scaffoldKey,
showSecondList: showMediumSizeLayout || showLargeSizeLayout,
),
two: SecondComponentList(scaffoldKey: scaffoldKey),
),
),
ScreenSelected.color => const ColorPalettesScreen(),
ScreenSelected.typography => const TypographyScreen(),
ScreenSelected.elevation => const ElevationScreen(),
};
PreferredSizeWidget createAppBar() {
return AppBar(
title:
widget.useMaterial3
? const Text('Material 3')
: const Text('Material 2'),
actions:
!showMediumSizeLayout && !showLargeSizeLayout
? [
_BrightnessButton(
handleBrightnessChange: widget.handleBrightnessChange,
),
_Material3Button(
handleMaterialVersionChange:
widget.handleMaterialVersionChange,
),
_ColorSeedButton(
handleColorSelect: widget.handleColorSelect,
colorSelected: widget.colorSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
_ColorImageButton(
handleImageSelect: widget.handleImageSelect,
imageSelected: widget.imageSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
]
: [Container()],
);
}
Widget _trailingActions() => Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: _BrightnessButton(
handleBrightnessChange: widget.handleBrightnessChange,
showTooltipBelow: false,
),
),
Flexible(
child: _Material3Button(
handleMaterialVersionChange: widget.handleMaterialVersionChange,
showTooltipBelow: false,
),
),
Flexible(
child: _ColorSeedButton(
handleColorSelect: widget.handleColorSelect,
colorSelected: widget.colorSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
),
Flexible(
child: _ColorImageButton(
handleImageSelect: widget.handleImageSelect,
imageSelected: widget.imageSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
),
],
);
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
builder: (context, child) {
return NavigationTransition(
scaffoldKey: scaffoldKey,
animationController: controller,
railAnimation: railAnimation,
appBar: createAppBar(),
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(
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(),
),
),
),
navigationBar: NavigationBars(
onSelectItem: (index) {
setState(() {
screenIndex = index;
handleScreenChanged(screenIndex);
});
},
selectedIndex: screenIndex,
isExampleBar: false,
),
);
},
);
}
}
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,
required this.colorSelectionMethod,
});
final void Function(int) handleColorSelect;
final ColorSeed colorSelected;
final ColorSelectionMethod colorSelectionMethod;
@override
Widget build(BuildContext context) {
return PopupMenuButton(
icon: const Icon(Icons.palette_outlined),
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 ||
colorSelectionMethod != ColorSelectionMethod.colorSeed,
child: Wrap(
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Icon(
currentColor == colorSelected &&
colorSelectionMethod != ColorSelectionMethod.image
? Icons.color_lens
: Icons.color_lens_outlined,
color: currentColor.color,
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(currentColor.label),
),
],
),
);
});
},
onSelected: handleColorSelect,
);
}
}
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: const Icon(Icons.image_outlined),
tooltip: 'Select a color extraction image',
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
itemBuilder: (context) {
return List.generate(ColorImageProvider.values.length, (index) {
final 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(currentImageProvider.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);
},
tooltip: ColorSeed.values[i].label,
),
),
),
);
}
}
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) => Tooltip(
message: ColorImageProvider.values[i].name,
child: 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,
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: mediumWidthBreakpoint,
).animate(SizeAnimation(widget.animation));
}
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Flexible(flex: mediumWidthBreakpoint.toInt(), child: widget.one),
if (widthAnimation.value.toInt() > 0) ...[
Flexible(
flex: widthAnimation.value.toInt(),
child: FractionalTranslation(
translation: offsetAnimation.value,
child: widget.two,
),
),
],
],
);
}
}

78
material_3_demo/lib/main.dart
View File

@@ -4,8 +4,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'constants.dart'; import 'src/constants.dart';
import 'home.dart'; import 'src/home.dart';
void main() async { void main() async {
runApp(const App()); runApp(const App());
@@ -19,14 +19,14 @@ class App extends StatefulWidget {
} }
class _AppState extends State<App> { class _AppState extends State<App> {
bool useMaterial3 = true; bool _useMaterial3 = true;
ThemeMode themeMode = ThemeMode.system; ThemeMode _themeMode = ThemeMode.system;
ColorSeed colorSelected = ColorSeed.baseColor; ColorSeed _colorSelected = ColorSeed.baseColor;
ColorImageProvider imageSelected = ColorImageProvider.leaves; ColorImageProvider _imageSelected = ColorImageProvider.leaves;
ColorScheme? imageColorScheme = const ColorScheme.light(); ColorScheme? _imageColorScheme = const ColorScheme.light();
ColorSelectionMethod colorSelectionMethod = ColorSelectionMethod.colorSeed; ColorSelectionMethod _colorSelectionMethod = ColorSelectionMethod.colorSeed;
bool get useLightMode => switch (themeMode) { bool get _useLightMode => switch (_themeMode) {
ThemeMode.system => ThemeMode.system =>
View.of(context).platformDispatcher.platformBrightness == View.of(context).platformDispatcher.platformBrightness ==
Brightness.light, Brightness.light,
@@ -34,34 +34,34 @@ class _AppState extends State<App> {
ThemeMode.dark => false, ThemeMode.dark => false,
}; };
void handleBrightnessChange(bool useLightMode) { void _handleBrightnessChange(bool useLightMode) {
setState(() { setState(() {
themeMode = useLightMode ? ThemeMode.light : ThemeMode.dark; _themeMode = useLightMode ? ThemeMode.light : ThemeMode.dark;
}); });
} }
void handleMaterialVersionChange() { void _handleMaterialVersionChange() {
setState(() { setState(() {
useMaterial3 = !useMaterial3; _useMaterial3 = !_useMaterial3;
}); });
} }
void handleColorSelect(int value) { void _handleColorSelect(int value) {
setState(() { setState(() {
colorSelectionMethod = ColorSelectionMethod.colorSeed; _colorSelectionMethod = ColorSelectionMethod.colorSeed;
colorSelected = ColorSeed.values[value]; _colorSelected = ColorSeed.values[value];
}); });
} }
void handleImageSelect(int value) { void _handleImageSelect(int value) {
final String url = ColorImageProvider.values[value].url; final String url = ColorImageProvider.values[value].url;
ColorScheme.fromImageProvider(provider: NetworkImage(url)).then(( ColorScheme.fromImageProvider(provider: NetworkImage(url)).then((
newScheme, newScheme,
) { ) {
setState(() { setState(() {
colorSelectionMethod = ColorSelectionMethod.image; _colorSelectionMethod = ColorSelectionMethod.image;
imageSelected = ColorImageProvider.values[value]; _imageSelected = ColorImageProvider.values[value];
imageColorScheme = newScheme; _imageColorScheme = newScheme;
}); });
}); });
} }
@@ -71,37 +71,37 @@ class _AppState extends State<App> {
return MaterialApp( return MaterialApp(
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
title: 'Material 3', title: 'Material 3',
themeMode: themeMode, themeMode: _themeMode,
theme: ThemeData( theme: ThemeData(
colorSchemeSeed: colorSchemeSeed:
colorSelectionMethod == ColorSelectionMethod.colorSeed _colorSelectionMethod == ColorSelectionMethod.colorSeed
? colorSelected.color ? _colorSelected.color
: null, : null,
colorScheme: colorScheme:
colorSelectionMethod == ColorSelectionMethod.image _colorSelectionMethod == ColorSelectionMethod.image
? imageColorScheme ? _imageColorScheme
: null, : null,
useMaterial3: useMaterial3, useMaterial3: _useMaterial3,
brightness: Brightness.light, brightness: Brightness.light,
), ),
darkTheme: ThemeData( darkTheme: ThemeData(
colorSchemeSeed: colorSchemeSeed:
colorSelectionMethod == ColorSelectionMethod.colorSeed _colorSelectionMethod == ColorSelectionMethod.colorSeed
? colorSelected.color ? _colorSelected.color
: imageColorScheme!.primary, : _imageColorScheme!.primary,
useMaterial3: useMaterial3, useMaterial3: _useMaterial3,
brightness: Brightness.dark, brightness: Brightness.dark,
), ),
home: Home( home: Home(
useLightMode: useLightMode, useLightMode: _useLightMode,
useMaterial3: useMaterial3, useMaterial3: _useMaterial3,
colorSelected: colorSelected, colorSelected: _colorSelected,
imageSelected: imageSelected, imageSelected: _imageSelected,
handleBrightnessChange: handleBrightnessChange, handleBrightnessChange: _handleBrightnessChange,
handleMaterialVersionChange: handleMaterialVersionChange, handleMaterialVersionChange: _handleMaterialVersionChange,
handleColorSelect: handleColorSelect, handleColorSelect: _handleColorSelect,
handleImageSelect: handleImageSelect, handleImageSelect: _handleImageSelect,
colorSelectionMethod: colorSelectionMethod, colorSelectionMethod: _colorSelectionMethod,
), ),
); );
} }

31
material_3_demo/lib/src/animations.dart Normal file
View File

@@ -0,0 +1,31 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
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,
),
);
}

59
material_3_demo/lib/src/bar_transition.dart Normal file
View File

@@ -0,0 +1,59 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/widgets.dart';
import 'animations.dart';
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,
),
),
),
);
}
}

173
material_3_demo/lib/src/buttons.dart Normal file
View File

@@ -0,0 +1,173 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'constants.dart';
class BrightnessButton extends StatelessWidget {
const BrightnessButton({
super.key,
required this.handleBrightnessChange,
this.showTooltipBelow = true,
});
final void Function(bool useLightMode) 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({
super.key,
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({
super.key,
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 PopupMenuButton(
icon: const Icon(Icons.palette_outlined),
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 ||
colorSelectionMethod != ColorSelectionMethod.colorSeed,
child: Wrap(
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Icon(
currentColor == colorSelected &&
colorSelectionMethod != ColorSelectionMethod.image
? Icons.color_lens
: Icons.color_lens_outlined,
color: currentColor.color,
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(currentColor.label),
),
],
),
);
});
},
onSelected: handleColorSelect,
);
}
}
class ColorImageButton extends StatelessWidget {
const ColorImageButton({
super.key,
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: const Icon(Icons.image_outlined),
tooltip: 'Select a color extraction image',
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
itemBuilder: (context) {
return List.generate(ColorImageProvider.values.length, (index) {
final 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(currentImageProvider.url),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(currentImageProvider.label),
),
],
),
);
});
},
onSelected: handleImageSelect,
);
}
}

0
material_3_demo/lib/color_box.dart → material_3_demo/lib/src/color_box.dart
View File

3
material_3_demo/lib/color_palettes_screen.dart → material_3_demo/lib/src/color_palettes_screen.dart
View File

@@ -4,9 +4,10 @@
import 'package:flutter/gestures.dart'; import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:material_3_demo/scheme.dart';
import 'package:url_launcher/url_launcher.dart'; import 'package:url_launcher/url_launcher.dart';
import 'scheme.dart';
const Widget divider = SizedBox(height: 10); const Widget divider = SizedBox(height: 10);
// If screen content width is greater or equal to this value, the light and dark // If screen content width is greater or equal to this value, the light and dark

0
material_3_demo/lib/component_screen.dart → material_3_demo/lib/src/component_screen.dart
View File

0
material_3_demo/lib/constants.dart → material_3_demo/lib/src/constants.dart
View File

0
material_3_demo/lib/elevation_screen.dart → material_3_demo/lib/src/elevation_screen.dart
View File

45
material_3_demo/lib/src/expanded_color_seed_action.dart Normal file
View File

@@ -0,0 +1,45 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'constants.dart';
class ExpandedColorSeedAction extends StatelessWidget {
const ExpandedColorSeedAction({
super.key,
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);
},
tooltip: ColorSeed.values[i].label,
),
),
),
);
}
}

78
material_3_demo/lib/src/expanded_image_color_action.dart Normal file
View File

@@ -0,0 +1,78 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'constants.dart';
class ExpandedImageColorAction extends StatelessWidget {
const ExpandedImageColorAction({
super.key,
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) => _ImageButton(
index: i,
select:
imageSelected == ColorImageProvider.values[i] &&
colorSelectionMethod == ColorSelectionMethod.image
? null
: () => handleImageSelect(i),
),
),
),
),
);
}
}
class _ImageButton extends StatelessWidget {
const _ImageButton({required this.index, required this.select});
final void Function()? select;
final int index;
@override
Widget build(BuildContext context) {
return Tooltip(
message: ColorImageProvider.values[index].name,
child: InkWell(
borderRadius: BorderRadius.circular(4.0),
onTap: select,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Material(
borderRadius: BorderRadius.circular(4.0),
elevation: select != null ? 3 : 0,
child: Padding(
padding: const EdgeInsets.all(4.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(4.0),
child: Image(
image: NetworkImage(ColorImageProvider.values[index].url),
),
),
),
),
),
),
);
}
}

92
material_3_demo/lib/src/expanded_trailing_actions.dart Normal file
View File

@@ -0,0 +1,92 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'constants.dart';
import 'expanded_color_seed_action.dart';
import 'expanded_image_color_action.dart';
class ExpandedTrailingActions extends StatelessWidget {
const ExpandedTrailingActions({
super.key,
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);
}
}

269
material_3_demo/lib/src/home.dart Normal file
View File

@@ -0,0 +1,269 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'buttons.dart';
import 'color_palettes_screen.dart';
import 'component_screen.dart';
import 'constants.dart';
import 'elevation_screen.dart';
import 'expanded_trailing_actions.dart';
import 'navigation_transition.dart';
import 'one_two_transition.dart';
import 'typography_screen.dart';
class Home extends StatefulWidget {
const Home({
super.key,
required this.useLightMode,
required this.useMaterial3,
required this.colorSelected,
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();
}
class _HomeState extends State<Home> 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;
int screenIndex = ScreenSelected.component.value;
@override
initState() {
super.initState();
controller = AnimationController(
duration: Duration(milliseconds: transitionLength.toInt() * 2),
value: 0,
vsync: this,
);
railAnimation = CurvedAnimation(
parent: controller,
curve: const Interval(0.5, 1.0),
);
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
final double width = MediaQuery.of(context).size.width;
final AnimationStatus status = controller.status;
if (width > mediumWidthBreakpoint) {
if (width > largeWidthBreakpoint) {
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 > mediumWidthBreakpoint ? 1 : 0;
}
}
void handleScreenChanged(int screenSelected) {
setState(() {
screenIndex = screenSelected;
});
}
Widget createScreenFor(
ScreenSelected screenSelected,
bool showNavBarExample,
) => switch (screenSelected) {
ScreenSelected.component => Expanded(
child: OneTwoTransition(
animation: railAnimation,
one: FirstComponentList(
showNavBottomBar: showNavBarExample,
scaffoldKey: scaffoldKey,
showSecondList: showMediumSizeLayout || showLargeSizeLayout,
),
two: SecondComponentList(scaffoldKey: scaffoldKey),
),
),
ScreenSelected.color => const ColorPalettesScreen(),
ScreenSelected.typography => const TypographyScreen(),
ScreenSelected.elevation => const ElevationScreen(),
};
PreferredSizeWidget _createAppBar() {
return AppBar(
title:
widget.useMaterial3
? const Text('Material 3')
: const Text('Material 2'),
actions:
!showMediumSizeLayout && !showLargeSizeLayout
? [
BrightnessButton(
handleBrightnessChange: widget.handleBrightnessChange,
),
Material3Button(
handleMaterialVersionChange:
widget.handleMaterialVersionChange,
),
ColorSeedButton(
handleColorSelect: widget.handleColorSelect,
colorSelected: widget.colorSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
ColorImageButton(
handleImageSelect: widget.handleImageSelect,
imageSelected: widget.imageSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
]
: [Container()],
);
}
Widget _trailingActions() => Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: BrightnessButton(
handleBrightnessChange: widget.handleBrightnessChange,
showTooltipBelow: false,
),
),
Flexible(
child: Material3Button(
handleMaterialVersionChange: widget.handleMaterialVersionChange,
showTooltipBelow: false,
),
),
Flexible(
child: ColorSeedButton(
handleColorSelect: widget.handleColorSelect,
colorSelected: widget.colorSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
),
Flexible(
child: ColorImageButton(
handleImageSelect: widget.handleImageSelect,
imageSelected: widget.imageSelected,
colorSelectionMethod: widget.colorSelectionMethod,
),
),
],
);
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: controller,
builder: (context, child) {
return NavigationTransition(
scaffoldKey: scaffoldKey,
animationController: controller,
railAnimation: railAnimation,
appBar: _createAppBar(),
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(
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(),
),
),
),
navigationBar: NavigationBars(
onSelectItem: (index) {
setState(() {
screenIndex = index;
handleScreenChanged(screenIndex);
});
},
selectedIndex: screenIndex,
isExampleBar: false,
),
);
},
);
}
}
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(growable: false);

79
material_3_demo/lib/src/navigation_transition.dart Normal file
View File

@@ -0,0 +1,79 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'bar_transition.dart';
import 'component_screen.dart';
import 'rail_transition.dart';
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(),
);
}
}

62
material_3_demo/lib/src/one_two_transition.dart Normal file
View File

@@ -0,0 +1,62 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/material.dart';
import 'animations.dart';
import 'constants.dart';
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: mediumWidthBreakpoint,
).animate(SizeAnimation(widget.animation));
}
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Flexible(flex: mediumWidthBreakpoint.toInt(), child: widget.one),
if (widthAnimation.value.toInt() > 0) ...[
Flexible(
flex: widthAnimation.value.toInt(),
child: FractionalTranslation(
translation: offsetAnimation.value,
child: widget.two,
),
),
],
],
);
}
}

64
material_3_demo/lib/src/rail_transition.dart Normal file
View File

@@ -0,0 +1,64 @@
// Copyright 2021 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:flutter/widgets.dart';
import 'animations.dart';
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,
),
),
),
);
}
}

2
material_3_demo/lib/scheme.dart → material_3_demo/lib/src/scheme.dart
View File

@@ -4,7 +4,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../color_box.dart'; import 'color_box.dart';
class SchemePreview extends StatefulWidget { class SchemePreview extends StatefulWidget {
const SchemePreview({ const SchemePreview({

0
material_3_demo/lib/typography_screen.dart → material_3_demo/lib/src/typography_screen.dart
View File

6
material_3_demo/test/color_screen_test.dart
View File

@@ -7,10 +7,10 @@ import 'dart:ui';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; import 'package:flutter/services.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import 'package:material_3_demo/color_box.dart';
import 'package:material_3_demo/color_palettes_screen.dart';
import 'package:material_3_demo/main.dart'; import 'package:material_3_demo/main.dart';
import 'package:material_3_demo/scheme.dart'; import 'package:material_3_demo/src/color_box.dart';
import 'package:material_3_demo/src/color_palettes_screen.dart';
import 'package:material_3_demo/src/scheme.dart';
import 'component_screen_test.dart'; import 'component_screen_test.dart';

2
material_3_demo/test/component_screen_test.dart
View File

@@ -5,8 +5,8 @@
// ignore_for_file: avoid_types_on_closure_parameters // ignore_for_file: avoid_types_on_closure_parameters
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import 'package:material_3_demo/component_screen.dart';
import 'package:material_3_demo/main.dart'; import 'package:material_3_demo/main.dart';
import 'package:material_3_demo/src/component_screen.dart';
void main() { void main() {
testWidgets('Default main page shows all M3 components', (tester) async { testWidgets('Default main page shows all M3 components', (tester) async {

2
material_3_demo/test/elevation_screen_test.dart
View File

@@ -5,8 +5,8 @@
// ignore_for_file: avoid_types_on_closure_parameters // ignore_for_file: avoid_types_on_closure_parameters
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import 'package:material_3_demo/elevation_screen.dart';
import 'package:material_3_demo/main.dart'; import 'package:material_3_demo/main.dart';
import 'package:material_3_demo/src/elevation_screen.dart';
import 'component_screen_test.dart'; import 'component_screen_test.dart';

2
material_3_demo/test/typography_screen_test.dart
View File

@@ -6,7 +6,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart'; import 'package:flutter_test/flutter_test.dart';
import 'package:material_3_demo/main.dart'; import 'package:material_3_demo/main.dart';
import 'package:material_3_demo/typography_screen.dart'; import 'package:material_3_demo/src/typography_screen.dart';
import 'component_screen_test.dart'; import 'component_screen_test.dart';