From 5d454184858906fb74e18ef196dbaabef1edc896 Mon Sep 17 00:00:00 2001 From: Farheen khan Date: Thu, 12 Mar 2020 06:43:26 -0700 Subject: [PATCH 1/3] Create 08_animated_switcher.dart --- .../lib/src/basics/08_animated_switcher.dart | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 animations/lib/src/basics/08_animated_switcher.dart diff --git a/animations/lib/src/basics/08_animated_switcher.dart b/animations/lib/src/basics/08_animated_switcher.dart new file mode 100644 index 00000000000..78ed31109fb --- /dev/null +++ b/animations/lib/src/basics/08_animated_switcher.dart @@ -0,0 +1,55 @@ +import 'package:flutter/material.dart'; + +class AnimatedSwitcherDemo extends StatefulWidget { +static const String routeName= '/basics/animated_switcher'; + _AnimatedSwitcherDemoState createState() => new _AnimatedSwitcherDemoState(); +} + +class _AnimatedSwitcherDemoState extends State { + bool toggleValue = false; + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar(title: Text('AnimatedSwitcher Demonstration')), + body: Center( + child: AnimatedContainer( + duration: Duration(milliseconds: 1000), + height: 40.0, + width: 100.0, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(20.0), + color: toggleValue + ? Colors.greenAccent[100] + : Colors.redAccent[100].withOpacity(0.5)), + child: Stack(children: [ + AnimatedPositioned( + duration: Duration(milliseconds: 1000), + curve: Curves.easeIn, + top: 3.0, + left: toggleValue ? 60.0 : 0.0, + right: toggleValue ? 0.0 : 60.0, + child: InkWell( + onTap: toggleButton, + child: AnimatedSwitcher( + duration: const Duration(milliseconds: 1000), + transitionBuilder: (Widget child, Animation animation) { + return ScaleTransition(child: child, scale: animation); + }, + child: toggleValue + ? Icon(Icons.check_circle, + color: Colors.green, size: 35.0, key: UniqueKey()) + : Icon(Icons.remove_circle, + color: Colors.red, size: 35.0, key: UniqueKey()), + ), + ), + ) + ]), + )), + ); + } + + toggleButton() { + setState(() { + toggleValue = !toggleValue; + }); + } +} From 11c92dfb4fe174437fc6f91cf9ff10029054e05e Mon Sep 17 00:00:00 2001 From: Farheen khan Date: Thu, 12 Mar 2020 06:48:12 -0700 Subject: [PATCH 2/3] Update main.dart --- animations/lib/main.dart | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/animations/lib/main.dart b/animations/lib/main.dart index aface2c8ad8..e039eb2b296 100644 --- a/animations/lib/main.dart +++ b/animations/lib/main.dart @@ -11,6 +11,7 @@ import 'src/basics/04_tweens.dart'; import 'src/basics/05_animated_builder.dart'; import 'src/basics/06_custom_tween.dart'; import 'src/basics/07_tween_sequence.dart'; +import 'src/basics/08_animated_switcher.dart'; import 'src/misc/animated_list.dart'; import 'src/misc/card_swipe.dart'; import 'src/misc/carousel.dart'; @@ -58,6 +59,11 @@ final basicDemos = [ name: 'Tween Sequences', route: TweenSequenceDemo.routeName, builder: (context) => TweenSequenceDemo()), + Demo( + name: 'Animated Switcher', + route: AnimatedSwitcherDemo.routeName, + builder: (context) => AnimatedSwitcherDemo()), + ]; final miscDemos = [ From a8635ee6f30f45658b612adc00233a894edb2ccc Mon Sep 17 00:00:00 2001 From: Farheen khan Date: Thu, 12 Mar 2020 06:50:26 -0700 Subject: [PATCH 3/3] Update README.md --- animations/README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/animations/README.md b/animations/README.md index fdc981017b2..20448b55617 100644 --- a/animations/README.md +++ b/animations/README.md @@ -24,6 +24,7 @@ Building blocks and patterns 7. **TweenSequenceDemo** Demonstrates how to use `TweenSequence` to build a button that changes between different colors. 8. **AnimatedList** Demonstrates how to use `AnimatedList` +9. **AnimatedSwitcher** Demonstrates how to use `AnimatedSwitcher` ### Misc