How can i fade in widgets when the screen loads using Flutter?

Question

Its a login page and I want that when I load my screen , my all widgets should fade in smoothly

Answer 1

Hey you take a look at Animated Opacity using this you can achieve the fade in transition

Sample Snippet :

    class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double widget1Opacity = 0.0;
  

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Future.delayed(Duration(milliseconds: 300), () {
      widget1Opacity = 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedOpacity(
            opacity: widget1Opacity,
            duration: Duration(seconds: 3),
            child: FlutterLogo(
              size: 200,
              style: FlutterLogoStyle.markOnly,
            )),
      ),
    );
  }
}