flutter 打开应用的闪屏动画

Posted loaderman

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了flutter 打开应用的闪屏动画相关的知识,希望对你有一定的参考价值。

import ‘package:flutter/material.dart‘;
import ‘package:flutter_app/pages/SplashScreen.dart‘;



void main() => runApp(MyApp());

class MyApp extends StatelessWidget 

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: ‘Flutter Demo‘,
      theme: ThemeData(
        primarySwatch: Colors.green,  //定义主题风格    primarySwatch
      ),
      home:  SplashScreen(),
    );
  

import ‘package:flutter/material.dart‘;

import ‘../MyHomePage.dart‘;


class SplashScreen extends StatefulWidget 
  _SplashScreenState createState() => _SplashScreenState();


class _SplashScreenState extends State<SplashScreen> with SingleTickerProviderStateMixin 

  AnimationController _controller;
  Animation _animation;

  void initState() 
    super.initState();
    _controller = AnimationController(vsync:this,duration:Duration(milliseconds:3000));
    _animation = Tween(begin: 0.0,end:1.0).animate(_controller);


    /*动画事件监听器,
    它可以监听到动画的执行状态,
    我们这里只监听动画是否结束,
    如果结束则执行页面跳转动作。 */
    _animation.addStatusListener((status)
      if(status == AnimationStatus.completed)
        Navigator.of(context).pushAndRemoveUntil(
            MaterialPageRoute(builder: (context)=>MyHomePage()),
                (route)=> route==null);
      
    );
    //播放动画
    _controller.forward();
  

  @override
  void dispose() 
    _controller.dispose();
    super.dispose();
  


  @override
  Widget build(BuildContext context) 
    return FadeTransition( //透明度动画组件
      opacity: _animation,  //执行动画
      child: Image.network(  //网络图片
          ‘https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1546851657199&di=fdd278c2029f7826790191d59279dbbe&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0112cb554438090000019ae93094f1.jpg%401280w_1l_2o_100sh.jpg‘,
          scale: 2.0,  //进行缩放
          fit:BoxFit.cover  // 充满父容器
      ),
    );
  

以上是关于flutter 打开应用的闪屏动画的主要内容,如果未能解决你的问题,请参考以下文章

闪屏中的闪屏

Flutter:快速创建简单闪屏页

如何在 Flutter 中移除原生闪屏和主屏幕之间的默认淡入淡出过渡? (仅使用本机启动画面)

Flutter入门篇- 如何实现登录动画效果

如何为闪屏生成清单文件?

flutter闪屏过渡动画,闪光占位动画