I'd like to animate a gap between two items in a list. I thought of using an AminatedContainer with a height initially at zero but I'm not familiar with how to make this work. My code at the moment is:
new AnimatedContainer(
duration: const Duration(milliseconds: 200),
height: App.itemSelected==id ? 50.0 : 0.0,
curve: Curves.fastOutSlowIn,
),
That does change the height of the Container but not in an animated way as I had hoped. Any help would be gratefully received!
AnimatedBuilder is useful for more complex widgets that wish to include an animation as part of a larger build function. To use AnimatedBuilder, simply construct the widget and pass it a builder function. For simple cases without additional state, consider using AnimatedWidget.
Flutter made it easy with its packages. To animate the widgets without much effort, we can wrap them inside different defined animated widgets in the animate_do package. In this article, we will see how with the animate_do package we can animate widgets easily and enhance the user experience. In the pubspec.
You can use an AnimatedSize for that purpose.
https://docs.flutter.io/flutter/widgets/AnimatedSize-class.html
I am not sure if AnimatedSize
is suitable for your use case, but I have added an example on how to make a simple animation with it:
The coloring is a bit off due to the recording but you should be able to test this yourself.
class MyAppState extends State<MyApp> with TickerProviderStateMixin {
double _height = 50.0;
double _width = 20.0;
var _color = Colors.blue;
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new AnimatedSize(
curve: Curves.fastOutSlowIn, child: new Container(
width: _width,
height: _height,
color: _color,
), vsync: this, duration: new Duration(seconds: 2),),
new Divider(height: 35.0,),
new Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.arrow_upward, color: Colors.green,),
onPressed: () =>
setState(() {
_color = Colors.green;
_height = 95.0;
})),
new IconButton(
icon: new Icon(Icons.arrow_forward, color: Colors.red,),
onPressed: () =>
setState(() {
_color = Colors.red;
_width = 45.0;
})),
],
)
],)
,)
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With