Wie würden Sie Flutter-Apps einen Begrüßungsbildschirm hinzufügen? Es sollte vor allen anderen Inhalten geladen und angezeigt werden. Derzeit gibt es einen kurzen Farbblitz, bevor das Scaffold-Widget (Home: X) geladen wird.

Ich möchte etwas mehr Licht in die tatsächliche Art und Weise bringen, einen Begrüßungsbildschirm in Flutter zu erstellen.

Ich folgte ein wenig die Spur Bit hier und ich sah , dass die Dinge nicht so schlecht über das Splash Screen in Flutter suchen.

Vielleicht denken die meisten Entwickler (wie ich), dass es in Flutter standardmäßig keinen Begrüßungsbildschirm gibt, und sie müssen etwas dagegen tun. Es gibt einen Begrüßungsbildschirm mit weißem Hintergrund, und niemand kann verstehen, dass es standardmäßig bereits einen Begrüßungsbildschirm für iOS und Android gibt.

Das einzige, was der Entwickler tun muss, ist, das Branding-Image an der richtigen Stelle zu platzieren, und der Begrüßungsbildschirm funktioniert einfach so.

So geht's Schritt für Schritt:

Zuerst auf Android (weil es meine Lieblingsplattform ist :))

1. Suchen Sie den Ordner "android" in Ihrem Flutter-Projekt.

2. Navigieren Sie zum Ordner app -> src -> main -> res und platzieren Sie alle Varianten Ihres Branding-Images in den entsprechenden Ordnern. Beispielsweise:

• Das Bild mit der Dichte 1 muss in mipmap-mdpi platziert werden.
• Das Bild mit einer Dichte von 1,5 muss in mipmap-hdpi platziert werden.
• Das Bild mit der Dichte 2 muss in mipmap-xdpi platziert werden.
• Das Bild mit der Dichte 3 muss in mipmap-xxdpi platziert werden.
• Das Bild mit der Dichte 4 muss in mipmap-xxxdpi platziert werden.

Standardmäßig gibt es im Android-Ordner kein drawable-mdpi, drawable-hdpi usw., aber wir können sie erstellen, wenn wir wollen. Aus diesem Grund müssen die Bilder in den Mipmap-Ordnern abgelegt werden. Außerdem verwendet der Standard-XML-Code für den Begrüßungsbildschirm (in Android) @mipmap anstelle der Ressource @drawable (Sie können ihn ändern, wenn Sie möchten).

3. Der letzte Schritt unter Android besteht darin, einen Teil des XML-Codes in der Datei drawable / launch_background.xml zu kommentieren. Navigieren Sie zu app -> src -> main -> res-> drawable und öffnen Sie die Datei launch_background.xml. In dieser Datei sehen Sie, warum der Hintergrund des Schrägstrichs weiß ist. Um das in Schritt 2 platzierte Branding-Image anzuwenden, müssen Sie einen Teil des XML-Codes in Ihrer Datei launch_background.xml auskommentieren. Nach der Änderung sollte der Code folgendermaßen aussehen:

    <!--<item android:drawable="@android:color/white" />-->
   
    <item>
   
        <bitmap
            android:gravity="center"
            android:src="@mipmap/your_image_name" />
   
    </item>

Bitte beachten Sie, dass wir den XML-Code für den weißen Hintergrund kommentieren und den Code zum Mipmap-Bild auskommentieren. Wenn jemand interessiert ist, wird die Datei launch_background.xml in der Datei styles.xml verwendet.

Zweiter unter iOS:

1. Suchen Sie den Ordner "ios" in Ihrem Flutter-Projekt.

2. Navigieren Sie zu Runner -> Assets.xcassets -> LaunchImage.imageset. Es sollte LaunchImage.png, LaunchImage@2x.png usw. geben. Jetzt müssen Sie diese Bilder durch Ihre Markenbildvarianten ersetzen. Beispielsweise:

• Das Bild mit Dichte 1 muss LaunchImage.png überschreiben.
• Das Bild mit Dichte 2 muss LaunchImage@2x.png überschreiben.
• Das Bild mit Dichte 3 muss LaunchImage@3x.png überschreiben.
• Das Bild mit Dichte 4 muss LaunchImage@4x.png überschreiben.

Wenn ich mich nicht irre, existiert LaunchImage@4x.png standardmäßig nicht, aber Sie können einfach eine erstellen. Wenn LaunchImage@4x.png nicht vorhanden ist, müssen Sie es auch in der Datei Contents.json deklarieren, die sich im selben Verzeichnis wie die Bilder befindet. Nach der Änderung sieht meine Datei Contents.json folgendermaßen aus:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

Das sollte alles sein, was Sie brauchen, wenn Sie Ihre App das nächste Mal auf Android oder iOS ausführen, sollten Sie den richtigen Begrüßungsbildschirm mit dem von Ihnen hinzugefügten Markenbild haben.

Vielen Dank

Wenn Sie flutter createIhr Projekt erstellt haben, können Sie die Schritte unter https://flutter.io/assets-and-images/#updating-the-launch-screen ausführen .

Flutter bietet tatsächlich eine einfachere Möglichkeit, Splash Screen zu unserer Anwendung hinzuzufügen. Wir müssen zuerst eine Basisseite entwerfen, während wir andere App-Bildschirme entwerfen. Sie müssen es zu einem StatefulWidget machen, da sich der Status in wenigen Sekunden ändert.

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

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

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 3),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => HomeScreen())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/splash.png'),
      ),
    );
  }
}

Logik Rufen Sie im initState () einen Timer () mit der gewünschten Dauer auf. Ich habe es 3 Sekunden lang gemacht. Sobald Sie fertig sind, schieben Sie den Navigator zum Startbildschirm unserer Anwendung.

Hinweis: Die Anwendung sollte den Begrüßungsbildschirm nur einmal anzeigen. Der Benutzer sollte beim Drücken der Zurück-Taste nicht erneut darauf zurückgreifen. Dazu verwenden wir Navigator.pushReplacement () . Es wird zu einem neuen Bildschirm verschoben und der vorherige Bildschirm aus dem Navigationsverlaufsstapel entfernt.

Besuchen Sie zum besseren Verständnis Flutter: Entwerfen Sie Ihren eigenen Begrüßungsbildschirm

Es gibt noch kein gutes Beispiel dafür, aber Sie können es selbst tun, indem Sie die nativen Tools für jede Plattform verwenden:

iOS: https://docs.nativescript.org/publishing/creating-launch-screens-ios

Android: https://www.bignerdranch.com/blog/splash-screens-the-right-way/

Abonnieren Sie die Ausgabe 8147, um Aktualisierungen des Beispielcodes für Begrüßungsbildschirme zu erhalten. Wenn Sie das schwarze Flackern zwischen dem Begrüßungsbildschirm und der App unter iOS stört, abonnieren Sie die Ausgabe 8127 für Updates.

Bearbeiten: Ab dem 31. August 2017 ist die verbesserte Unterstützung für Begrüßungsbildschirme in der neuen Projektvorlage verfügbar. Siehe # 11505 .

Gehen Sie für Android zu Android> App> src> main> res> drawable> launcher_background.xml

Kommentieren Sie dies jetzt aus und ersetzen Sie @ mipmap / launch_image durch Ihren Bildspeicherort.

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

Hier können Sie die Farbe Ihres Bildschirms ändern -

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

Der einfachste Weg, einen Begrüßungsbildschirm in Flutter hinzuzufügen, ist imho dieses Paket: https://pub.dev/packages/flutter_native_splash

Installationsanleitung (vom Autor des Pakets):

1. Einstellen des Begrüßungsbildschirms

Fügen Sie Ihre Einstellungen zur Datei pubspec.yaml Ihres Projekts hinzu oder erstellen Sie mit Ihren Einstellungen eine Datei in Ihrem Stammprojektordner mit dem Namen flutter_native_splash.yaml.

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

Bild muss eine PNG-Datei sein.

Sie können # auch in Farbe verwenden. Farbe: "# 42a5f5" Sie können auch Android oder iOS auf false setzen, wenn Sie keinen Begrüßungsbildschirm für eine bestimmte Plattform erstellen möchten.

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

Falls Ihr Bild den gesamten verfügbaren Bildschirm (Breite und Höhe) verwenden soll, können Sie die Fülleigenschaft verwenden.

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

Hinweis: Die Fülleigenschaft ist für iOS-Begrüßungsbildschirme noch nicht implementiert.

Wenn Sie den Vollbild-Begrüßungsbildschirm unter Android deaktivieren möchten, können Sie die Eigenschaft android_disable_fullscreen verwenden.

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

2. Führen Sie das Paket aus

Führen Sie das Paket nach dem Hinzufügen Ihrer Einstellungen mit aus

flutter pub pub run flutter_native_splash:create Wenn das Paket fertig ist, ist Ihr Begrüßungsbildschirm fertig.

Sie sollten unten Code versuchen, für mich gearbeitet

import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';

class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {


void handleTimeout() {
  Navigator.of(context).pushReplacement(new MaterialPageRoute(
    builder: (BuildContext context) => new MyHomePage()));
}

startTimeout() async {
  var duration = const Duration(seconds: 3);
  return new Timer(duration, handleTimeout);
}

@override
void initState() {
  // TODO: implement initState
  super.initState();

  _iconAnimationController = new AnimationController(
      vsync: this, duration: new Duration(milliseconds: 2000));

  _iconAnimation = new CurvedAnimation(
      parent: _iconAnimationController, curve: Curves.easeIn);
  _iconAnimation.addListener(() => this.setState(() {}));

  _iconAnimationController.forward();

  startTimeout();
}

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Scaffold(
      body: new Center(
        child: new Image(
        image: new AssetImage("images/logo.png"),
        width: _iconAnimation.value * 100,
        height: _iconAnimation.value * 100,
      )),
    ),
  );
}
}

Sowohl @Collin Jackson als auch @Sniper haben recht. Sie können diese Schritte ausführen, um Startbilder in Android bzw. iOS einzurichten. Dann können Sie in Ihrer MyApp (), in Ihrem initState () Future.delayed verwenden, um einen Timer einzurichten oder eine beliebige API aufzurufen. Bis die Antwort aus der Zukunft zurückgegeben wird, werden Ihre Startsymbole angezeigt. Sobald die Antwort eingeht, können Sie zu dem Bildschirm wechseln, zu dem Sie nach dem Begrüßungsbildschirm wechseln möchten. Sie können diesen Link sehen: Flatter Splash Screen

Personen, die nach dem Anwenden der verifizierten Antwort den Fehler "Bild nicht gefunden" erhalten, stellen sicher, dass Sie @ mipmap / ic_launcher anstelle von @ mipmap / ic_launcher.png hinzufügen

Das Hinzufügen einer Seite wie unten und das Weiterleiten können hilfreich sein

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

Weitere Informationen finden Sie unter: https://www.youtube.com/watch?v=FNBuo-7zg2Q

Sie können dies auf mehrere Arten tun, aber die einfachste, die ich verwende, ist:

Für Startsymbole verwende ich die Flatterbibliothek Flutter Launcher Icon

Für den benutzerdefinierten Begrüßungsbildschirm erstelle ich verschiedene Bildschirmauflösungen und füge dann die Begrüßungsbilder gemäß der Auflösung für Android im Mipmap-Ordner hinzu.

Der letzte Teil ist das Anpassen der Datei launch_background.xml im Zeichenordner im Ordner res in Android.

Ändern Sie einfach Ihren Code so, dass er wie folgt aussieht:

<?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>

Nur wenige Entwickler, die ich gesehen habe, haben den Splash als zeichnbar hinzugefügt. Ich habe dies versucht, aber irgendwie schlägt der Build in Flutter 1.0.0 und Dart SDK 2.0+ fehl. Daher ziehe ich es vor, den Splash im Bitmap-Bereich hinzuzufügen.

Die Erstellung von iOS-Begrüßungsbildschirmen ist einfacher.

Aktualisieren Sie im Ordner Runner in iOS einfach die Dateien LaunchImage.png mit Ihren benutzerdefinierten Begrüßungsbildschirmen mit denselben Namen wie LaunchImage.png @ 2x, @ 3x, @ 4x.

Nur eine Ergänzung Ich finde es gut, auch ein 4x-Bild im LaunchImage.imageset zu haben. Aktualisieren Sie einfach Ihren Code in Content.json mit den folgenden Zeilen unterhalb der 3-fachen Skalierung, um eine 4-fache Skalierungsoption hinzuzufügen:

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

mach deine materielle App so

=> Abhängigkeit hinzufügen

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

Bei dieser endgültigen Bildschirmausgabe können Sie die Sekunde entsprechend Ihren Anforderungen ändern. Der Kreis ist rund und kreisförmig

Dies ist die fehlerfreie und beste Möglichkeit, einen dynamischen Begrüßungsbildschirm in Flutter hinzuzufügen.

MAIN.DART

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.DART

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

CONSTANTS.DART

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

HOMESCREEN.DART

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

Der Code von Jaldhi Bhatt funktioniert bei mir nicht.

Flutter löst eine ' Navigator-Operation aus, die mit einem Kontext angefordert wird, der keinen Navigator enthält .'

Ich habe den Code behoben, der die Navigator-Verbraucherkomponente in eine andere Komponente einschließt, die den Navigator-Kontext mithilfe von Routen initialisiert, wie in diesem Artikel erwähnt.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';

class SplashView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Builder(
          builder: (context) => new _SplashContent(),
        ),
        routes: <String, WidgetBuilder>{
          '/main': (BuildContext context) => new MainView()}
    );
  }
}

class _SplashContent extends StatefulWidget{

  @override
  _SplashContentState createState() => new _SplashContentState();
}

class _SplashContentState extends State<_SplashContent>
    with SingleTickerProviderStateMixin {

  var _iconAnimationController;
  var _iconAnimation;

  startTimeout() async {
    var duration = const Duration(seconds: 3);
    return new Timer(duration, handleTimeout);
  }

  void handleTimeout() {
    Navigator.pushReplacementNamed(context, "/main");
  }

  @override
  void initState() {
    super.initState();

    _iconAnimationController = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 2000));

    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeIn);
    _iconAnimation.addListener(() => this.setState(() {}));

    _iconAnimationController.forward();

    startTimeout();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Image(
          image: new AssetImage("images/logo.png"),
          width: _iconAnimation.value * 100,
          height: _iconAnimation.value * 100,
        )
    );
  }
}

Wenn Sie einen sekundären Begrüßungsbildschirm (nach dem nativen) wünschen, ist hier ein einfaches Beispiel, das funktioniert:

class SplashPage extends StatelessWidget {
  SplashPage(BuildContext context) {
    Future.delayed(const Duration(seconds: 3), () {
      // Navigate here to next screen
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Splash screen here');
  }
}

Flutter bietet Ihnen die Möglichkeit, standardmäßig einen Begrüßungsbildschirm zu haben, aber es gibt viele Plugins, die diese Aufgabe übernehmen können. Wenn Sie kein Plugin für die Aufgabe verwenden möchten und befürchten, dass das Hinzufügen eines neuen Plugins Ihre App-Größe beeinträchtigen könnte. Dann können Sie es so machen.

Für Android

Öffnen Sie die Datei launch_background.xml und fügen Sie das gewünschte Begrüßungsbild oder die gewünschte Verlaufsfarbe ein. Dies ist das erste, was Ihr Benutzer sieht, wenn er Ihre App öffnet.

Für IOS

Öffnen Sie Ihre App mit Xcode. Klicken Sie auf Runner> Assest.xcassets> LaunchImage. Sie können das Bild hier hinzufügen. Wenn Sie bearbeiten möchten, welche Position das Startbildschirmbild einnehmen soll oder wie es aussehen soll, können Sie es auf LaunchScreen.storyboard bearbeiten.

Hier sind die Schritte zum Konfigurieren des Begrüßungsbildschirms auf iOS- und Android-Plattformen für Ihre Flutter-App.

IOS-Plattform

Alle an den Apple App Store gesendeten Apps müssen ein Xcode-Storyboard verwenden, um den Startbildschirm der App bereitzustellen. Lassen Sie uns dies in 3 Schritten tun: -

Schritt 1 : Öffnen Sie ios / Runner.xcworkspace im Stammverzeichnis Ihres App-Verzeichnisses.

Schritt 2 : Wählen Sie im Projektnavigator Runner / Assets.xcassets aus und ziehen Sie Ihre Startbilder aller Größen (2x, 3x usw.). Sie können auch verschiedene Größen von Bildern aus https://appicon.co/#image-sets generieren

Schritt 3 : Sie können sehen, dass in der Datei LaunchScreen.storyboard das bereitgestellte Bild angezeigt wird. Hier können Sie auch die Position des Bildes ändern, indem Sie das Bild einfach ziehen. Weitere Informationen finden Sie in der offiziellen Dokumentation unter https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/.

Android-Plattform

In Android wird ein Startbildschirm angezeigt, während Ihre Android-App initialisiert wird. Lassen Sie uns diesen Startbildschirm in 3 Schritten einstellen: -

Schritt 1 : Öffnen Sie die Datei android / app / src / main / res / drawable / launch_background.xml.

Schritt 2 : In Zeile 4 können Sie die gewünschte Farbe auswählen: -

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

Schritt 3 : In Zeile 10 können Sie das Bild ändern: -

android:src="@mipmap/launch_image"

Das ist alles, du bist fertig! Viel Spaß beim Codieren :)

Für Android
App -> src -> main -> res -> drawble-> launch_background.xml und kommentieren Sie den kommentierten Block wie folgt aus

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

Gibt es einen Fehler nach dem Codieren wie diesem ? Verwenden Sie die Synchronisierung mit dem System in Android Studio oder machen Sie den Cache ungültig und setzen Sie ihn zurück. Dies löste mein Problem. Im Flatter-Debug-Modus dauert es einige Zeit, bis der Begrüßungsbildschirm angezeigt wird

Flutter.dev gibt bereits die beste Antwort darauf, das ist weder ein Fehler noch ein Problem, nur config. Nehmen Sie sich einfach Zeit zum Lesen und alles wird gelöst. Ich wünsche allen einen schönen Tag.

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

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