-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Fixes accessibility/tappability of the FAB in the FadeScaleTransition example #135
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 4 commits
125a707
f12c8d1
0a074b7
bec09a6
e3c5763
5587e22
7f17be5
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,16 +16,16 @@ class _FadeScaleTransitionDemoState extends State<FadeScaleTransitionDemo> | |
| with SingleTickerProviderStateMixin { | ||
| AnimationController _controller; | ||
|
|
||
| bool _showFab = true; | ||
|
|
||
| @override | ||
| void initState() { | ||
| _controller = AnimationController( | ||
| value: 1.0, | ||
| value: 0.0, | ||
| duration: const Duration(milliseconds: 150), | ||
| reverseDuration: const Duration(milliseconds: 75), | ||
| vsync: this, | ||
| ); | ||
| )..addListener(() { | ||
| setState(() {}); | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. nit: add a comment inside the setState closure explaining why we have this empty set state. |
||
| }); | ||
| super.initState(); | ||
| } | ||
|
|
||
|
|
@@ -35,12 +35,25 @@ class _FadeScaleTransitionDemoState extends State<FadeScaleTransitionDemo> | |
| super.dispose(); | ||
| } | ||
|
|
||
| bool isAnimationRunningForwardsOrComplete() { | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. this could be private (and maybe just a getter). |
||
| switch (_controller.status) { | ||
| case AnimationStatus.forward: | ||
| case AnimationStatus.completed: | ||
| return true; | ||
| break; | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. These breaks shouldn't be necessary since you have the return. |
||
| case AnimationStatus.reverse: | ||
| case AnimationStatus.dismissed: | ||
| return false; | ||
| break; | ||
| } | ||
| assert(true); | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. assert(true)? Do you mean assert(false)? |
||
| return null; | ||
| } | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Scaffold( | ||
| appBar: AppBar( | ||
| title: const Text('Fade'), | ||
| ), | ||
| appBar: AppBar(title: const Text('Fade')), | ||
| floatingActionButton: AnimatedBuilder( | ||
| animation: _controller, | ||
| builder: (BuildContext context, Widget child) { | ||
|
|
@@ -49,9 +62,12 @@ class _FadeScaleTransitionDemoState extends State<FadeScaleTransitionDemo> | |
| child: child, | ||
| ); | ||
| }, | ||
| child: FloatingActionButton( | ||
| child: const Icon(Icons.add), | ||
| onPressed: () {}, | ||
| child: Visibility( | ||
| visible: _controller.value != 0, | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. maybe: !_controller.isDismissed |
||
| child: FloatingActionButton( | ||
| child: const Icon(Icons.add), | ||
| onPressed: () {}, | ||
| ), | ||
| ), | ||
| ), | ||
| bottomNavigationBar: Column( | ||
|
|
@@ -80,21 +96,15 @@ class _FadeScaleTransitionDemoState extends State<FadeScaleTransitionDemo> | |
| const SizedBox(width: 10), | ||
| RaisedButton( | ||
| onPressed: () { | ||
| if (_showFab) { | ||
| setState(() { | ||
| _showFab = false; | ||
| }); | ||
| if (isAnimationRunningForwardsOrComplete()) { | ||
| _controller.reverse(); | ||
| } else { | ||
| setState(() { | ||
| _showFab = true; | ||
| }); | ||
| _controller.forward(); | ||
| } | ||
| }, | ||
| color: Theme.of(context).colorScheme.primary, | ||
| textColor: Theme.of(context).colorScheme.onPrimary, | ||
| child: _showFab | ||
| child: isAnimationRunningForwardsOrComplete() | ||
| ? const Text('HIDE FAB') | ||
| : const Text('SHOW FAB'), | ||
| ), | ||
|
|
||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Wouldn't a statusListener be enough?