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


当前回答

让你的材料应用像这样

=>添加依赖

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

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

其他回答

Flutter为您提供了默认的启动画面的能力,但有很多插件可以做这项工作。如果你不想使用插件来完成任务,你担心添加一个新的插件可能会影响你的应用程序大小。然后你可以这样做。

为安卓

打开launch_background.xml,然后你可以放入启动画面图像,或者你想要的渐变颜色。这是用户打开应用程序时看到的第一件事。

为IOS

用Xcode打开你的应用,点击Runner > asset。xcassets > LaunchImage,你可以在这里添加图像。如果你想编辑启动屏幕图像的位置,你可以在LaunchScreen.storyboard上编辑。

@Collin Jackson和@Sniper都是对的。你可以按照以下步骤分别在android和iOS上设置启动映像。然后在你的MyApp()中,在你的initState()中,你可以使用Future.delayed来设置定时器或调用任何api。在Future返回响应之前,你的启动图标将会显示,然后随着响应的到来,你可以在启动画面后移动到你想要去的屏幕。您可以看到此链接:颤振启动画面

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

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

以下是在IOS和Android平台上为Flutter应用程序配置启动画面的步骤。

IOS平台

所有提交到苹果应用商店的应用程序都必须使用Xcode故事板来提供应用程序的启动屏幕。让我们分三步来做:-

第一步:打开ios/Runner。Xcworkspace从应用程序目录的根目录。

步骤2:选择Runner/Assets。从Project Navigator中拖动所有大小的启动图像(2x, 3x等)。您还可以从https://appicon.co/#image-sets生成不同大小的图像

步骤3:你可以看到启动屏幕。故事板文件显示了所提供的图像,在这里您还可以通过简单地拖动图像来更改图像的位置。有关更多信息,请参阅官方文档https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Android平台

在Android中,当你的Android应用程序初始化时,会显示一个启动屏幕。让我们在3个步骤中设置这个启动屏幕:-

第一步:打开android/app/src/main/res/drawable/launch_background.xml文件。

第二步:在第4行,您可以选择所需的颜色:-

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

第三步:在第10行,你可以改变图像:-

android:src="@mipmap/launch_image"

就这样,你完成了!快乐编码:)

添加如下所示的页面和路由可能会有所帮助

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.redAccent),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 50.0,
                        child: Icon(
                          Icons.shopping_cart,
                          color: Colors.greenAccent,
                          size: 50.0,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 10.0),
                      ),
                      Text(
                        Flutkart.name,
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Padding(
                      padding: EdgeInsets.only(top: 20.0),
                    ),
                    Text(
                      Flutkart.store,
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                          color: Colors.white),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

如果你想坚持到底,请参见: https://www.youtube.com/watch?v=FNBuo-7zg2Q