Visitar URL original
[animations] Polish fade demo (#74) · creatorpiyush/packages@3cf0d10 · GitHub
Skip to content

Commit 3cf0d10

Browse files
goderbauergoderbauer
authored
[animations] Polish fade demo (flutter#74)
1 parent d978140 commit 3cf0d10

2 files changed

Lines changed: 125 additions & 96 deletions

File tree

‎packages/animations/example/lib/fade_scale_transition.dart‎

Lines changed: 59 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,14 @@ class FadeScaleTransitionDemo extends StatefulWidget {
1414

1515
class _FadeScaleTransitionDemoState extends State<FadeScaleTransitionDemo>
1616
with SingleTickerProviderStateMixin {
17-
AnimationController controller;
17+
AnimationController _controller;
1818

19-
bool shouldEnter = true;
19+
bool _showFab = true;
2020

2121
@override
2222
void initState() {
23-
controller = AnimationController(
23+
_controller = AnimationController(
24+
value: 1.0,
2425
duration: const Duration(milliseconds: 150),
2526
reverseDuration: const Duration(milliseconds: 75),
2627
vsync: this,
@@ -30,72 +31,66 @@ class _FadeScaleTransitionDemoState extends State<FadeScaleTransitionDemo>
3031

3132
@override
3233
void dispose() {
33-
controller.dispose();
34+
_controller.dispose();
3435
super.dispose();
3536
}
3637

37-
void updateAnimationController() {
38-
switch (controller.status) {
39-
case AnimationStatus.completed:
40-
case AnimationStatus.forward:
41-
controller.reverse();
42-
setState(() {
43-
shouldEnter = true;
44-
});
45-
break;
46-
case AnimationStatus.dismissed:
47-
case AnimationStatus.reverse:
48-
controller.forward();
49-
setState(() {
50-
shouldEnter = false;
51-
});
52-
break;
53-
}
54-
}
55-
5638
@override
5739
Widget build(BuildContext context) {
5840
return Scaffold(
5941
appBar: AppBar(
6042
title: const Text('Fade Transition Demo'),
6143
),
62-
body: Column(
63-
children: <Widget>[
64-
Expanded(
65-
child: ListView(
66-
children: <Widget>[
67-
SizedBox(
68-
height: 200,
69-
child: Center(
70-
child: FadeScaleTransition(
71-
animation: controller,
72-
child: _ExampleAlertDialog(),
73-
),
74-
),
75-
),
76-
],
77-
),
78-
),
79-
const Divider(thickness: 2.0),
80-
Padding(
81-
padding: const EdgeInsets.only(
82-
bottom: 8.0,
44+
floatingActionButton: AnimatedBuilder(
45+
animation: _controller,
46+
builder: (BuildContext context, Widget child) {
47+
return FadeScaleTransition(
48+
animation: _controller,
49+
child: child,
50+
);
51+
},
52+
child: FloatingActionButton(
53+
child: Icon(Icons.add),
54+
onPressed: () {},
55+
),
56+
),
57+
body: Center(
58+
child: Column(
59+
mainAxisSize: MainAxisSize.min,
60+
children: <Widget>[
61+
RaisedButton(
62+
onPressed: () {
63+
if (_showFab) {
64+
setState(() {
65+
_showFab = false;
66+
});
67+
_controller.reverse();
68+
} else {
69+
setState(() {
70+
_showFab = true;
71+
});
72+
_controller.forward();
73+
}
74+
},
75+
color: Theme.of(context).colorScheme.primary,
76+
textColor: Theme.of(context).colorScheme.onPrimary,
77+
child: _showFab ? const Text('HIDE FAB') : const Text('SHOW FAB'),
8378
),
84-
child: Row(
85-
mainAxisAlignment: MainAxisAlignment.center,
86-
children: <Widget>[
87-
RaisedButton(
88-
onPressed: updateAnimationController,
89-
color: Theme.of(context).colorScheme.primary,
90-
textColor: Theme.of(context).colorScheme.onPrimary,
91-
child: shouldEnter
92-
? const Text('FADE ENTER')
93-
: const Text('FADE EXIT'),
94-
),
95-
],
79+
RaisedButton(
80+
onPressed: () {
81+
showModal<void>(
82+
context: context,
83+
configuration: FadeScaleTransitionConfiguration(),
84+
builder: (BuildContext context) {
85+
return _ExampleAlertDialog();
86+
});
87+
},
88+
color: Theme.of(context).colorScheme.primary,
89+
textColor: Theme.of(context).colorScheme.onPrimary,
90+
child: const Text('SHOW MODAL'),
9691
),
97-
),
98-
],
92+
],
93+
),
9994
),
10095
);
10196
}
@@ -108,11 +103,15 @@ class _ExampleAlertDialog extends StatelessWidget {
108103
content: const Text('Alert Dialog'),
109104
actions: <Widget>[
110105
FlatButton(
111-
onPressed: () {},
106+
onPressed: () {
107+
Navigator.of(context).pop();
108+
},
112109
child: const Text('CANCEL'),
113110
),
114111
FlatButton(
115-
onPressed: () {},
112+
onPressed: () {
113+
Navigator.of(context).pop();
114+
},
116115
child: const Text('DISCARD'),
117116
),
118117
],

‎packages/animations/example/lib/main.dart‎

Lines changed: 66 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
// found in the LICENSE file.
44

55
import 'package:flutter/material.dart';
6+
import 'package:flutter/scheduler.dart';
67

78
import 'fade_scale_transition.dart';
89
import 'fade_through_transition.dart';
@@ -25,55 +26,84 @@ void main() {
2526
);
2627
}
2728

28-
class _TransitionsHomePage extends StatelessWidget {
29+
class _TransitionsHomePage extends StatefulWidget {
30+
@override
31+
_TransitionsHomePageState createState() => _TransitionsHomePageState();
32+
}
33+
34+
class _TransitionsHomePageState extends State<_TransitionsHomePage> {
35+
bool _slowAnimations = false;
36+
2937
@override
3038
Widget build(BuildContext context) {
3139
return Scaffold(
3240
appBar: AppBar(title: const Text('Material Transitions')),
3341
body: Column(
3442
children: <Widget>[
35-
_TransitionListTile(
36-
title: 'Shared Axis',
37-
subtitle: 'Page transition where outgoing and incoming '
38-
'elements share a fade transition',
39-
onTap: () {
40-
Navigator.of(context).push(
41-
MaterialPageRoute<void>(
42-
builder: (BuildContext context) {
43-
return SharedAxisTransitionDemo();
43+
Expanded(
44+
child: ListView(
45+
children: <Widget>[
46+
_TransitionListTile(
47+
title: 'Shared Axis',
48+
subtitle: 'Page transition where outgoing and incoming '
49+
'elements share a fade transition',
50+
onTap: () {
51+
Navigator.of(context).push(
52+
MaterialPageRoute<void>(
53+
builder: (BuildContext context) {
54+
return SharedAxisTransitionDemo();
55+
},
56+
),
57+
);
4458
},
4559
),
46-
);
47-
},
48-
),
49-
_TransitionListTile(
50-
title: 'Fade Through',
51-
subtitle: 'Page transition outgoing elements first fade '
52-
'out and then incoming elements fade in while scaling',
53-
onTap: () {
54-
Navigator.of(context).push(
55-
MaterialPageRoute<void>(
56-
builder: (BuildContext context) {
57-
return FadeThroughTransitionDemo();
60+
_TransitionListTile(
61+
title: 'Fade Through',
62+
subtitle: 'Page transition outgoing elements first fade '
63+
'out and then incoming elements fade in while scaling',
64+
onTap: () {
65+
Navigator.of(context).push(
66+
MaterialPageRoute<void>(
67+
builder: (BuildContext context) {
68+
return FadeThroughTransitionDemo();
69+
},
70+
),
71+
);
5872
},
5973
),
60-
);
61-
},
62-
),
63-
_TransitionListTile(
64-
title: 'Fade',
65-
subtitle: 'The fade pattern is used for UI elements that '
66-
'enter or exit within the screen bounds. Elements '
67-
'that enter use a quick fade in and they scale.',
68-
onTap: () {
69-
Navigator.of(context).push(
70-
MaterialPageRoute<void>(
71-
builder: (BuildContext context) {
72-
return FadeScaleTransitionDemo();
74+
_TransitionListTile(
75+
title: 'Fade',
76+
subtitle: 'The fade pattern is used for UI elements that '
77+
'enter or exit within the screen bounds. Elements '
78+
'that enter use a quick fade in and they scale.',
79+
onTap: () {
80+
Navigator.of(context).push(
81+
MaterialPageRoute<void>(
82+
builder: (BuildContext context) {
83+
return FadeScaleTransitionDemo();
84+
},
85+
),
86+
);
7387
},
7488
),
75-
);
89+
],
90+
),
91+
),
92+
const Divider(height: 0.0),
93+
SwitchListTile(
94+
value: _slowAnimations,
95+
onChanged: (bool value) async {
96+
setState(() {
97+
_slowAnimations = value;
98+
});
99+
// Wait until the Switch is done animating before actually slowing
100+
// down time.
101+
if (_slowAnimations) {
102+
await Future<void>.delayed(const Duration(milliseconds: 300));
103+
}
104+
timeDilation = _slowAnimations ? 20.0 : 1.0;
76105
},
106+
title: const Text('Slow animations'),
77107
),
78108
],
79109
),

0 commit comments

Comments
 (0)