I want to animate first screen that will show when user opens the app with fade effect.I tried wrapping my screen into AnimatedOpacity widget but without any effect.

    MaterialApp{
    home:FutureBuilder<ApiResponse<Profile>>(
     future:api.fetchProfile(),
     builder:(context,snapshot){
       return snapshot.data != null ? AnimatedOpacity(
                    child: FirstScreen(),
                    duration: Duration(milliseconds: 500),
                    opacity: 1.0,
                   ):Container();
      }
    ),
}

Anyone did this before ? I was digging docs for MaterialApp and I've tried to figure it out still no idea how to do it.


Solution 1: Shady Aziza

I am not sure if this is what you want or not, but you can use FadeTransition:

enter image description here

void main() => runApp(MaterialApp(
  home:FirstPage(),
));

class FirstPage extends StatefulWidget {
  @override
  _FirstPageState createState() => new _FirstPageState();
}

class _FirstPageState extends State<FirstPage> with TickerProviderStateMixin {
  AnimationController animationController;
  @override
    void initState() {
      animationController=AnimationController(
        vsync:this,
        duration:(Duration(seconds: 2)),
      );
      super.initState();
    }
    @override
      void dispose() {
        animationController.dispose();
        super.dispose();
      }
  @override
  Widget build(BuildContext context) {
     animationController.forward();
    return FadeTransition(
      opacity: animationController,
      child: Scaffold(
        appBar:AppBar(
          backgroundColor: Colors.redAccent,
        ),
        body:Center(child:Text('I am your first page'))
      ),

    );
  }
}