在flutter中lottiesplash.json完成后如何导航到主页?

Log*_*n K 2 flutter flutter-dependencies flutter-layout flutter-animation

当我运行代码时,Lottie 动画在颤动中完成后如何导航主页,它会重复显示 Lottie 动画。

chu*_*han 10

您可以在下面复制粘贴运行完整代码您可以在调用中
使用AnimationControllerand然后您可以执行 代码片段Lottie onLoadedAnimationController forward().whenCompleteNavigator.push

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this);
  }
...  
Lottie.asset(
            'assets/LottieLogo1.json',
            controller: _controller,
            onLoaded: (composition) {
              _controller
                ..duration = composition.duration
                ..forward().whenComplete(() => Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => SecondPage()),
                    ));
            },
          ),
Run Code Online (Sandbox Code Playgroud)

要运行工作演示,您需要此文件https://github.com/xvrh/lottie-flutter/blob/master/example/assets/LottieLogo1.json
工作演示

在此输入图像描述

完整代码

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(vsync: this);
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Lottie.asset(
            'assets/LottieLogo1.json',
            controller: _controller,
            onLoaded: (composition) {
              _controller
                ..duration = composition.duration
                ..forward().whenComplete(() => Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => SecondPage()),
                    ));
            },
          ),
        ],
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: Center(child: Text("Second Page")));
  }
}
Run Code Online (Sandbox Code Playgroud)