flutter 启动屏幕使用 Lottie 动画

猫哥说

由于出差关系来了重庆，很美的一个城市，走在街道上感受就是在登山，生活节奏相对比较慢，但愿疫情远离咱们。前端

感谢群里重庆好友能抽时间出来聚会。git

正题开始github

lottie 是一个夸平台的动画库，用这个能够作出酷炫动画。web

其实做为一个前端仍是要稍微会一点点美术、动画、几何数学。编程

lottiefiles.com/json

github.com/airbnb/lott…api

老铁记得转发，猫哥会呈现更多 Flutter 好文~~~~

微信 flutter 研修群 ducafecat

原文

mamuseferha.medium.com/how-to-use-…微信

代码

github.com/debbsefe/Lo…markdown

参考

正文

在构建移动应用程序时，启动画面很是常见。它们一般是在应用程序开始时显示的静态屏幕。这个屏幕能够帮助你告诉你的用户应用程序是关于什么的，经过显示你的应用程序标志或应用程序名称。less

若是你想更进一步，真正吸引用户的注意力，能够考虑在启动画面上使用动画图片。使用 Lottie 显示一个动画图像就像在你的应用程序中使用 Image 小部件同样简单。

开始

首先，建立一个新的 flutter 项目。

flutter pub add lottie
复制代码

经过粘贴如下代码建立启动画面小部件。

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key key}) : super(key: key);

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

class _SplashScreenState extends State<SplashScreen> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: (5)),
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Lottie.asset(
        'assets/splash_lottie.json',
        controller: _controller,
        height: MediaQuery.of(context).size.height * 1,
        animate: true,
        onLoaded: (composition) {
          _controller
            ..duration = composition.duration
            ..forward().whenComplete(() => Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(builder: (context) => HomePage()),
                ));
        },
      ),
    );
  }
}
复制代码

Splash screen 小部件是一个有状态小部件，它在其 build 方法中保存 Lottie 文件。动画控制器在 initState 中建立，并在控制器属性中使用。

若要在动画完成后导航到下一个页面，请使用带有 LottieComposition 的 onLoaded 回调。这容许您有更多的信息和控制的 Lottie 文件。

onLoaded: (composition) {
  _controller
  ..duration = composition.duration
  ..forward().whenComplete(() => Navigator.pushReplacement(
    context,
    MaterialPageRoute(builder: (context) => HomePage()),));
    },
复制代码

动画完成后，导航到下一页。

我在代码中添加了一个启动画面导航到的主页小部件。

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Homepage')),
    );
  }
}
复制代码

以 scaffold 为中心的简单文本小部件。

如今你能够继续为你的用户建立更具视觉吸引力的应用了。

不要忘记将 Lottie 文件做为资产添加到 pubspec.yaml 中，不然，动画将不会显示。你也能够在 GitHub 上找到完整的项目。

github.com/debbsefe/Lo…

ducafecat.tech/

github.com/ducafecat