mirror of https://github.com/flutter/samples.git
Improvements to M3 demo app (#1647)
* improvements * fix focus * add comment * add comment * copy changes to root material_3_demo * fix large breakpoint * fix large breakpoint * Create integration_test.dart * refactor main.dart into home.dart and constants.dart * add integration_test to pubspec * copy to root material_3_demo * remove removal of constraints * address feedbackpull/1654/head
Pierre-Louis
1 year ago
committed by
GitHub
parent
cdc9025be2
commit
79bd62952d
@ -0,0 +1,15 @@
|
||||
// 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_test/flutter_test.dart';
|
||||
import 'package:integration_test/integration_test.dart';
|
||||
import 'package:material_3_demo/main.dart' as app;
|
||||
|
||||
void main() {
|
||||
IntegrationTestWidgetsFlutterBinding.ensureInitialized();
|
||||
|
||||
testWidgets('verify app can run', (tester) async {
|
||||
app.main();
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
// 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';
|
||||
|
||||
// NavigationRail shows if the screen width is greater or equal to
|
||||
// narrowScreenWidthThreshold; otherwise, NavigationBar is used for navigation.
|
||||
const double narrowScreenWidthThreshold = 450;
|
||||
|
||||
const double mediumWidthBreakpoint = 1000;
|
||||
const double largeWidthBreakpoint = 1500;
|
||||
|
||||
const double transitionLength = 500;
|
||||
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,665 @@
|
||||
// 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,
|
||||
});
|
||||
|
||||
final bool useLightMode;
|
||||
final bool useMaterial3;
|
||||
final ColorSeed colorSelected;
|
||||
final void Function(bool useLightMode) handleBrightnessChange;
|
||||
final void Function() handleMaterialVersionChange;
|
||||
final void Function(int value) handleColorSelect;
|
||||
|
||||
@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) {
|
||||
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 ScreenSelected.typography:
|
||||
return const TypographyScreen();
|
||||
case ScreenSelected.elevation:
|
||||
return const ElevationScreen();
|
||||
default:
|
||||
return FirstComponentList(
|
||||
showNavBottomBar: showNavBarExample,
|
||||
scaffoldKey: scaffoldKey,
|
||||
showSecondList: showMediumSizeLayout || showLargeSizeLayout);
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
),
|
||||
]
|
||||
: [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: [
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@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()
|
||||
: _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,
|
||||
});
|
||||
|
||||
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: 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,
|
||||
),
|
||||
)
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
// 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_test/flutter_test.dart';
|
||||
import 'package:integration_test/integration_test.dart';
|
||||
import 'package:material_3_demo/main.dart' as app;
|
||||
|
||||
void main() {
|
||||
IntegrationTestWidgetsFlutterBinding.ensureInitialized();
|
||||
|
||||
testWidgets('verify app can run', (tester) async {
|
||||
app.main();
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,40 @@
|
||||
// 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';
|
||||
|
||||
// NavigationRail shows if the screen width is greater or equal to
|
||||
// narrowScreenWidthThreshold; otherwise, NavigationBar is used for navigation.
|
||||
const double narrowScreenWidthThreshold = 450;
|
||||
|
||||
const double mediumWidthBreakpoint = 1000;
|
||||
const double largeWidthBreakpoint = 1500;
|
||||
|
||||
const double transitionLength = 500;
|
||||
|
||||
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;
|
||||
}
|
||||
@ -0,0 +1,665 @@
|
||||
// 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,
|
||||
});
|
||||
|
||||
final bool useLightMode;
|
||||
final bool useMaterial3;
|
||||
final ColorSeed colorSelected;
|
||||
final void Function(bool useLightMode) handleBrightnessChange;
|
||||
final void Function() handleMaterialVersionChange;
|
||||
final void Function(int value) handleColorSelect;
|
||||
|
||||
@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) {
|
||||
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 ScreenSelected.typography:
|
||||
return const TypographyScreen();
|
||||
case ScreenSelected.elevation:
|
||||
return const ElevationScreen();
|
||||
default:
|
||||
return FirstComponentList(
|
||||
showNavBottomBar: showNavBarExample,
|
||||
scaffoldKey: scaffoldKey,
|
||||
showSecondList: showMediumSizeLayout || showLargeSizeLayout);
|
||||
}
|
||||
}
|
||||
|
||||
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,
|
||||
),
|
||||
]
|
||||
: [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: [
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
@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()
|
||||
: _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,
|
||||
});
|
||||
|
||||
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: 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,
|
||||
),
|
||||
)
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue