Flutter collapse and expand widget with elastic animation. Use the below example code to collapse and expand widget with elastic animation.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | import 'package:flutter/material.dart'; import 'package:flutter/physics.dart'; import 'dart:math'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Spring Box", theme: ThemeData(), home: HomePage(), ); } } class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin { Animation animationIn, animationOut; AnimationController _animationController; @override void initState() { _animationController = AnimationController( vsync: this, value: 1.0, duration: Duration(milliseconds: 500), ); animationIn = CurvedAnimation(parent: _animationController, curve: Curves.elasticIn); animationOut = CurvedAnimation(parent: _animationController, curve: Curves.elasticIn); } _toggleExpanded() { if (_animationController.status == AnimationStatus.completed) { _animationController.reverse(); } else { _animationController.forward(); } } @override Widget build(BuildContext context) { var isExpanded = _animationController.status != AnimationStatus.completed; return Scaffold( floatingActionButton: FloatingActionButton( onPressed: _toggleExpanded, child: Icon(Icons.add), ), body: Row( mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[ CollapsAnimation( animation: isExpanded ? animationOut : animationIn, child: Container( color: Color(0xFF404bc4), ), ), ], ), backgroundColor: Color(0xFFe8e8e8), ); } } class CollapsAnimation extends AnimatedWidget { CollapsAnimation({key, animation, this.child}) : super( key: key, listenable: animation, ); final Widget child; final Tween tween = Tween<double>(begin: 0, end: 80); @override Widget build(BuildContext context) { Animation<double> animation = listenable; var animationValue = tween.evaluate(animation); double width = animationValue >= 0.0 ? animationValue : 0.0; return Container( width: width, child: child, ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
