无法将AnimatedCrossFade与本地mov文件Flutter一起使用

时间:2020-01-11 23:19:31

标签: animation flutter dart cross-fade

我有一个要在AnimatedCrossFade中使用的.Mov文件,但是我无法使视频与渐变一起使用。我出现黑屏,交叉淡入淡出从未发生。到目前为止,这是我的代码:

  VideoPlayerController _buddiesAnimatedController;
  Future<void> _initializeVideoPlayerFuture;
  bool firstStateEnabled = true;
AnimatedCrossFade(
          firstChild: _showBuddiesLogo(),
          secondChild: _signIn(),
          duration: Duration(seconds: 3),
          crossFadeState: firstStateEnabled
              ? CrossFadeState.showFirst
              : CrossFadeState.showSecond,
              firstCurve: Curves.easeOut,
              secondCurve: Curves.easeIn,
              sizeCurve: Curves.bounceIn,
        ),

初始化状态

@override
  void initState() {
    _buddiesAnimatedController = VideoPlayerController.asset('assets/BuddiesLogo.mov');
    _initializeVideoPlayerFuture = _buddiesAnimatedController.initialize();
    _buddiesAnimatedController.setLooping(false);

    super.initState();
  }

第一个孩子

  Widget _showBuddiesLogo() {
    return FutureBuilder(
      future: _initializeVideoPlayerFuture,
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {

          return AspectRatio(
            aspectRatio: _buddiesAnimatedController.value.aspectRatio,
            child: VideoPlayer(_buddiesAnimatedController),
          );
        }  else{
          return CircularProgressIndicator();
        }
      },
    );
  }

第二个孩子

Container(
child:    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        RaisedButton(
                          splashColor: Colors.greenAccent,
                          elevation: 8.0,

                          color: buddiesGreen,
                          child: Container(
                            width: 100,
                            child: Center(
                              child: Text(
                                'Sign In',
                                style: TextStyle(
                                    color: Colors.white, fontFamily: 'Roboto'),
                              ),
                            ),
                          ), //`Text` to display
                          shape: StadiumBorder(),
                          onPressed: () {
                            Navigator.of(context).pushReplacement(
                                MaterialPageRoute(
                                    builder: (BuildContext context) =>
                                        SignIn()));
                          },
                        ),
                        SizedBox(
                          width: 15,
                        ),
                        RaisedButton(
                            highlightColor: Colors.greenAccent,
                            splashColor: Colors.greenAccent,
                            elevation: 10.0,
                            color: Colors.white,
                            child: Container(
                              width: 100,
                              child: Center(
                                child: Text(
                                  'Sign Up',
                                  style: TextStyle(fontFamily: 'Roboto'),
                                ),
                              ),
                            ), //`Text` to display
                            shape: StadiumBorder(),
                            onPressed: () {
                              Navigator.of(context).pushReplacement(
                                  MaterialPageRoute(
                                      builder: (BuildContext context) =>
                                          Walkthrough()));
                            }),
                      ],
                    ),

看到圆形进度指示器后,屏幕变黑。我已经在yaml文件中声明了视频,并且已经导入import'package:video_player / video_player.dart';进入页面。验证命名正确。我希望播放动画,然后让第二个屏幕显示登录按钮。任何帮助将不胜感激

0 个答案:

没有答案