Dart动画MaterialApp主屏幕

时间:2018-08-24 20:35:06

标签: flutter

我想为第一个屏幕设置动画,当用户打开带有淡入淡出效果的应用程序时会显示该屏幕。我尝试将屏幕包裹到AnimatedOpacity小部件中,但没有任何效果。

    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();
      }
    ),
}

有人做过吗?我正在为MaterialApp挖掘文档,但我一直试图弄清楚它仍然不知道该怎么做。

1 个答案:

答案 0 :(得分:1)

我不确定这是否是您想要的,但是您可以使用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'))
      ),

    );
  }
}