Fade in your UIs in Flutter

UI smoothly fades in.
UI that wants to get animated.
  • delay: an abstract unit to specify the order in which we fade-in our elements. We’ll use on a Double value. (Larger values = appear later)
  • child: the Widget to animate.
  • the opacity from 0.0 (invisible) to 1.0 (fully visible) and
  • a translation on the x-axis from 130.0 (looking a little displaced) to 0.0 (looking unmodified).
delay: Duration(milliseconds: (300 * delay).round())
builderWithChild: (context, child, animation) => Opacity(             
opacity: animation["opacity"],
child: Transform.translate(
offset: Offset(animation["translateX"], 0),
child: child),
FadeIn(1.0, HeaderPlaceholder())
UI smoothly fades in.




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

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

Recommended from Medium

If you haven’t gotten this must-read account of the September 11th attacks, you need to put The…

5G Core Network Evolution

Is API Gateway Right For You?

Real time plot audio wave by speaking to the microphone by MATLAB

Node.js vs. Python: choose the best technology for your web

API Testing with HTTPie

Sensing: Potentiometer

Gateway to the Autonomous Database with the SQL Developer

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

Flutter Strings Internationalization Manually

Briefly Explanied — How Flutter framework optimizes widget rendering?

Flutter animation for beginners

User Interaction Detector in Flutter.