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


当前回答

dev已经给出了最好的答案,这不是一个bug,也不是一个问题,只是配置。 花点时间阅读,一切都会迎刃而解。祝大家有愉快的一天。

https://flutter.dev/docs/development/ui/advanced/splash-screen

其他回答

当我们必须在应用程序启动之前获得用户位置或其他数据时,我们可以在flutter中使用自定义启动画面,这将使您的应用程序用户友好

代码如下:示例:-

import 'package:flutter/material.dart';
import 'package:bmi/HomePage.dart';
import 'dart:async';

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

 class MyApp extends StatelessWidget{
 @override
 Widget build(BuildContext context) {
    return SplashScreen();
 }
}

class SplashScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return SplashScreenState();
  }
}

class SplashScreenState extends State<SplashScreen>{
  @override
  void initState() {
    super.initState();
    when we have to get data we can show splash 
    Like this:- 
    FutureMethodForData.then((value) {
       Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(),
          )
        );

    });
    Or we can show splash for fix duration like this:-
    Future.delayed(
      Duration(
        seconds: 4
      ),
      (){
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => HomePage(),
          )
        );
      }
  );
}
@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      backgroundColor: Colors.red,
      body: // add image text or whatever you want as splash
    ),
  );
}
}


对于Android,转到这个路径,

Android > app > SRC > main > res > drawable > launcher_background.xml

默认代码为白色背景屏幕。 像这样,

<!-- You can insert your own image assets here -->
 <item>
    <bitmap
        android:gravity="center"
        android:src="@mipmap/launch_image" />
</item> 

您可以通过添加图标或任何自定义设计来更改它的颜色或修改它。更多的定制细节签出这为android。


为Ios

在Xcode中打开Ios项目。

选择Runner,然后。内部Runner文件夹Main。故事板文件在那里, 在这里输入图像描述

默认情况下,它的颜色是白色,你可以根据自己的要求自定义或改变颜色,更多的自定义检查这个Ios。

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),
    ),
  );

这是在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")),
    );
  }
}

对于Android,进入Android > app > src > main > res > drawable > launcher_background.xml

现在取消注释,用你的图像位置替换@mipmap/launch_image。

<item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

你可以在这里改变屏幕的颜色

<item android:drawable="@android:color/white" />