你会如何在Flutter应用程序中添加启动画面?它应该在任何其他内容之前加载和显示。目前,在Scaffold(home:X)小部件加载之前,会有一个短暂的颜色闪烁。


当前回答

你有多种方法可以做到这一点,但我使用的最简单的方法是:

对于启动图标,我使用颤振库颤振启动图标

对于自定义启动画面,我创建了不同的屏幕分辨率,然后根据Android的分辨率在mipmap文件夹中添加启动图像。

最后是调整Android中res文件夹中drawable文件夹中的launch_background.xml。

只需更改代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- <item android:drawable="@android:color/white" />
    <item android:drawable="@drawable/<splashfilename>" />     --> -->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
    </item>
</layer-list>

我所见过的少数开发人员将splash添加为可绘制的,我尝试了这一点,但不知为何在Flutter 1.0.0和Dart SDK 2.0+中构建失败。因此,我更喜欢在位图部分添加飞溅。

iOS的飞溅屏幕制作相对简单。

在iOS的Runner文件夹中,只需将LaunchImage.png文件更新为自定义启动画面图像,名称与LaunchImage.png @2x, @3x, @4x相同。

只是一个补充,我觉得在LaunchImage.imageset中有一个4倍的图像很好。只需在Content中更新代码即可。Json与以下行,以下3x规模添加一个4倍规模的选项:

{
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

其他回答

在flutter中添加启动画面的最简单的方法是imho这个包: https://pub.dev/packages/flutter_native_splash

安装指南(由软件包作者提供):

1. 设置启动画面

将您的设置添加到项目的pubspec中。Yaml文件或在根项目文件夹中创建一个名为flutter_native_splash的文件。Yaml与您的设置。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"

图像必须为PNG文件。

你也可以在颜色中使用#。颜色:“# 42 a5f5” 如果你不想为特定平台创建启动画面,你也可以将android或ios设置为false。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false

如果你的图像应该使用所有可用的屏幕(宽度和高度),你可以使用填充属性。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  fill: true

注意:填充属性还没有在iOS启动画面中实现。

如果你想在Android上禁用全屏闪屏,你可以使用android_disable_fullscreen属性。

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true

2. 运行包

添加设置后,运行with的包

Flutter pub运行flutter_native_splash:创建 当包完成运行时,你的启动画面就准备好了。

让你的材料应用像这样

=>添加依赖

=> import import 'package:splashscreen/splashscreen.dart';

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:tic_tac_toe/HomePage.dart';
void main(){
  runApp(
    MaterialApp(
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: new MyApp(),
    )
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 26.0,
        color: Colors.purple,
       ),
      ),
      image: Image.asset("images/pic9.png"),
      backgroundColor: Colors.white,
      photoSize: 150.0,
    );
  }
}

最后的屏幕输出像这样,你可以根据你的要求改变秒 圆将是圆的

SplashScreen(
          seconds: 3,
          navigateAfterSeconds: new MyApp(),
          // title: new Text(
          //   'Welcome In SplashScreen',
          //   style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          // ),
          image: new Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png'),
          backgroundColor: Colors.white,
          styleTextUnderTheLoader: new TextStyle(),
          photoSize: 150.0,
          loaderColor: Colors.black),
    ),
  );

如果有人在应用验证答案后发现图像不存在,请确保您添加的是@mipmap/ic_launcher而不是@mipmap/ic_launcher .png

这是在Flutter中添加动态启动画面的最佳方法。

主要。飞镖

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

void main() => runApp(MaterialApp(
      title: 'GridView Demo',
      home: SplashScreen(),
      theme: ThemeData(
        primarySwatch: Colors.red,
        accentColor: Color(0xFF761322),
      ),
      routes: <String, WidgetBuilder>{
        SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
        HOME_SCREEN: (BuildContext context) => BasicTable(),
        //GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
      },
    ));



SPLASHSCREEN。飞镖

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.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);
    return new Timer(_duration, navigationPage);
  }

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

@override
dispose() {
  animationController.dispose();  
  super.dispose();
}

  @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/images/powered_by.png',
                  height: 25.0,
                  fit: BoxFit.scaleDown,
                ),
              )
            ],
          ),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}



常量。飞镖

String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';

主屏幕。飞镖

import 'package:flutter/material.dart';

class BasicTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Table Widget")),
      body: Center(child: Text("Table Widget")),
    );
  }
}