Just start animating in Flutter

Blue square.
return ControlledAnimation(
duration: Duration(seconds: 1),
tween: Tween(begin: 100.0, end: 200.0),
builder: (context, width) {
return Container(width: width, height: 100, color: Colors.blue);
},
);
Blue square animates to rectangle.
  • a duration (length of the animation)
  • a tween (what to do while animating)
  • a builder (how does your movie scene look like) where the animated variable is accessible as a second parameter. In this example it’s width.
Animation using MIRROR playback
return ControlledAnimation(
playback: Playback.MIRROR,
duration: Duration(seconds: 1),
tween: Tween(begin: 100.0, end: 200.0),
builder: (context, width) {
return Container(width: width, height: 100, color: Colors.blue);
},
);
Animation using Curve.easeInOutSine
Pimped Square: animates five different properties.
final tween = MultiTrackTween([
Track("width")
.add(Duration(seconds: 1), Tween(begin: 100.0, end: 200.0))
.add(Duration(seconds: 1), ConstantTween(200.0)),
Track("height")
.add(Duration(seconds: 1), ConstantTween(100.0))
.add(Duration(seconds: 1), Tween(begin: 100.0, end: 300.0)),
Track("color")
.add(Duration(seconds: 2),
ColorTween(begin: Colors.blue, end: Colors.green)),
Track("rotation")
.add(Duration(seconds: 3), Tween(begin: 0.0, end: pi),
curve: Curves.easeIn),
Track("radius")
.add(Duration(milliseconds: 500), ConstantTween(0.0))
.add(Duration(milliseconds: 1500),
Tween(begin: 0.0, end: 50.0))
]);

return ControlledAnimation(
playback: Playback.MIRROR,
duration: tween.duration,
tween: tween,
curve: Curves.easeInOutSine,
builder: (context, animation) {
return Transform.rotate(
angle: animation["rotation"],
child: Container(
width: animation["width"],
height: animation["height"],
child: Center(
child: Text("simple\nanimations"),
),
decoration: BoxDecoration(
color: animation["color"],
borderRadius:
borderRadius.all(Radius.circular(animation["radius"]))),
),
);
},
);

--

--

--

Software Developer, http://felix-blaschke.de

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

IDAVOLL DAO Bi-Weekly Newsletter- January(2)

Agile and DevOps: Optimize Your Development and Operations

Check the Standings in Each Major Soccer League

How to Unsubscribe Bulk Mails

Golang pprof singleton performance

This month at SoftwareMill we’ve learned (Feb’19)

Microservices Decomposition Design Patterns

Best Practices of Docker

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Felix Blaschke

Felix Blaschke

Software Developer, http://felix-blaschke.de

More from Medium

Product Flavors in Flutter — Create admin and non-admin apps with distinct UI with a single…

Widgets Widgets Everywhere!

What is BuildContext in Super Simple Words

Spotify Interface || My First app on Flutter!