如何在 flutter 上设置启动画面超时

Question

我是 Flutter 的新手，有点不知道如何设置启动画面的时间，所以在这之后它会进入主屏幕。我正在使用 rive 作为启动画面

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';
void main() {
 runApp(const MaterialApp(home: SimpleAnimation()));
}
class SimpleAnimation extends StatelessWidget {
 const SimpleAnimation({Key? key, this.loading}) : super(key: key);
 final bool? loading;

 @override
 Widget build(BuildContext context) {
   return const Scaffold(
     body: Center(
       child: RiveAnimation.asset('assets/splash/splash.riv',
         fit: BoxFit.cover)
     ),
   );
 }
}

Answer 1

  @override
void initState() { 
//set timer for splash screen
Timer(const Duration(seconds: 4), () async {
//add your logic here 
 Navigator.pushNamedAndRemoveUntil(
        context, ScreenRoute.mainScreen, (route) => false);
super.initState();
}

Answer 2

您可以在导航到您想要的屏幕后在 initstate 中设置 3 秒

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

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

class _SplashScreenState extends State<SplashScreen> {
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    
    // after 3 second it will navigate
    
    Future.delayed(const Duration(seconds: 3)).then((val) {
      // Navigation Here
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      // your code
    );
  }
}

Answer 3

此 SimpleAnimation 小部件显示在初始屏幕之后。虽然这是 StatelessWidget 小部件，但您可以在 build 方法中定义方法。根据您的需要更改 Duration(seconds: 2)。

class SimpleAnimation extends StatelessWidget {
  const SimpleAnimation({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Future.delayed(const Duration(seconds: 2)).then((value) {
      Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => const NextScreen(),
          ));
    });
    return const Scaffold(
      body: Center(

Answer 4

正如人们已经提到的，直接的方法是添加延迟并在延迟之后进行导航：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: SplashScreen(),
    );
  }
}

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

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Future.delayed(const Duration(seconds: 2), () {
      if (mounted) {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(
            builder: (context) => const MainScreen(),
          ),
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return const ColoredBox(color: Colors.green);
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const ColoredBox(color: Colors.yellow);
  }
}

不过，对于此实现，您将不得不依赖于动画长度。所以当你更新动画时——你不会忘记在初始屏幕内更新它。一个更可靠（和复杂）的解决方案是监听动画状态并在动画结束后进行导航。像这样（警告，更改）：

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

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

class _PlayOneShotAnimationState extends State<PlayOneShotAnimation> {
  late RiveAnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = OneShotAnimation(
      'bounce',
      autoplay: true,
      onStop: () {
        Navigator.of(context).push(
          MaterialPageRoute<void>(
            builder: (context) => const MainScreen(),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RiveAnimation.network(
          'https://cdn.rive.app/animations/vehicles.riv',
          animations: const ['idle', 'curves'],
          controllers: [_controller],
        ),
      ),
    );
  }
}

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const ColoredBox(color: Colors.yellow);
  }
}

如何在 flutter 上设置启动画面超时

How to set splash screen time out on flutter

splash-screen

flutter

rive