Flutter Web 中的启动画面

Posted 2023-02-23

【中文标题】Flutter Web 中的启动画面

【英文标题】：Splash Screen in flutter web

【发布时间】：2020-04-16 05:55:24

【问题描述】：

在它们各自的文件夹中有 android 和 ios 闪屏，我们可以更改它们。 Flutter web 有闪屏吗？我在加载网页之前看到一个白屏。我们怎样才能改变呢？这是启动画面还是加载等待时间？

【问题讨论】：

加载等待时间

我维护了一个包flutter_native_splash，您可以使用它来替换加载时显示的白屏。

【参考方案1】：

当您的应用打开时，原生应用会在一段时间内加载 Flutter。默认情况下，在此期间，本机应用会显示白色启动画面。

您可以使用 flutter_native_splash 更改此设置，其中包含使用此包的丰富文档。

您无需阅读其余文本，只需前往flutter_native_splash。

从这个包的setting-the-splash-screen开始，它带有一些参数，如background_image，color，image用于启动等，可用于修改启动画面。

我的flutter_native_splash.yaml 文件（位于根目录）包含

flutter_native_splash:
  color: "#FFFFFF" #backgound color
  image: assets/images/splash.png

只需在终端上运行即可生成启动画面。

flutter pub run flutter_native_splash:create

【参考方案2】：

带有动画的闪屏

ma​​in.dart

import 'package:flutter/material.dart';
import 'src/splash_screen.dart';

main() 
  runApp(App());


class App extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      color: Colors.white,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
          primaryColor: Colors.purple,
          primarySwatch: Colors.purple,
          fontFamily: 'FIRSNEUE'),
       home: SplashScreen());
  

splashScreen.dart

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SplashScreen extends StatefulWidget 
  @override
  SplashScreenState createState() => new SplashScreenState();


class SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin 
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async 
    var _duration = new Duration(seconds: 3);  //SetUp duration here
    return new Timer(_duration, navigationPage);
  

  void navigationPage() 
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  

  @override
  void initState() 
    super.initState();
    animationController = new AnimationController(
        vsync: this, duration: new Duration(seconds: 2));
    animation =
    new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() ));
    animationController.forward();

    setState(() 
      _visible = !_visible;
    );
    startTime();
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[

              Padding(padding: EdgeInsets.only(bottom: 30.0),child:new 
        Image.asset('assets/img.png',height: 25.0,fit: BoxFit.scaleDown,))


            ],),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  

【参考方案3】：

你现在看到的白屏是因为加载时间

---

---

使用闪屏我所做的是

我首先在init 方法中启动我的初始屏幕

我正在使用计时器，一旦计时器结束

我正在调用另一个页面

ma​​in.dart

import 'package:flutter/material.dart';
import 'src/splash_screen.dart';

main() 
  runApp(App());


class App extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
        title: 'AppName',
        theme: ThemeData(
          primaryColor: Colors.white,
          backgroundColor: Colors.white,
          primaryIconTheme: new IconThemeData(color: Colors.black),
        ),
        home: SplashScreen());
  

splash_screen.dart

import "package:flutter/material.dart";
import 'dart:async';
import 'login/login.dart';

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


class _SplashScreenState extends State<SplashScreen> 
  @override
  void initState() 
    super.initState();
    new Timer(new Duration(milliseconds: 1000), ()  // set your desired delay time here
      Navigator.of(context).pushReplacement(
          new MaterialPageRoute(builder: (context) => new LoginScreen()));
    );
  

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        alignment: Alignment.center,
        child: Image.asset(fullLogoPng,
            width: MediaQuery.of(context).size.width / 1.5,
            fit: BoxFit.scaleDown),
      ),
    );
  

【讨论】：

这不是实际的启动画面，而是强制延迟。要为 Web 使用原生启动画面，应该编辑 web/index.html 文件以包含启动画面。 More details