flutter web 中的启动画面

max*_*max 8 splash-screen flutter flutter-web

我们可以更改各自文件夹中的 Android 和 ios 启动画面。flutter web 是否有任何启动画面?我在加载网页之前看到一个白屏。我们怎样才能改变它?那是启动画面还是加载等待时间?

Vic*_*khe 1

您现在看到的白屏是由于加载时间造成的



使用闪屏所做的是

我首先启动启动画面并在init方法内部启动

我正在使用计时器,计时器一结束

我正在调用另一个页面

主程序.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());
  }
}
Run Code Online (Sandbox Code Playgroud)

飞溅屏幕.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),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

  • 这不是实际的启动画面,而是强制延迟。要使用 Web 的本机启动屏幕,应编辑 web/index.html 文件以包含启动屏幕。[更多详情](https://medium.com/flutter-community/adding-a-splash-screen-to-flutter-web-7930e5e44bd) (11认同)