Hinzufügen eines Begrüßungsbildschirms zu Flutter-Apps
141
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 weiß nicht, ob es der richtige Weg ist, einen Begrüßungsbildschirm durch Einstellen eines benutzerdefinierten Timers hinzuzufügen. Ich mag es nicht, Prozessoren im Leerlauf zu halten, warum nicht einige Haushaltsaufgaben wie das Überprüfen der erforderlichen Dateien oder Verzeichnisse oder das Synchronisieren einiger Protokolle oder das Sichern einiger Dateien im Hintergrund und machen Sie das Branding auf der Vorderseite in der Zwischenzeit. Nach allen 3-4 Sekunden ist viel Zeit für einen Prozessor.
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 :))
Suchen Sie den Ordner "android" in Ihrem Flutter-Projekt.
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).
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:
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:
Suchen Sie den Ordner "ios" in Ihrem Flutter-Projekt.
Navigieren Sie zu Runner -> Assets.xcassets -> LaunchImage.imageset. Es sollte LaunchImage.png, [email protected] usw. geben. Jetzt müssen Sie diese Bilder durch Ihre Markenbildvarianten ersetzen. Beispielsweise:
Das Bild mit Dichte 1 muss LaunchImage.png überschreiben.
Wenn ich mich nicht irre, existiert [email protected] standardmäßig nicht, aber Sie können einfach eine erstellen. Wenn [email protected] 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:
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.
Ich habe Cannot resolve symbol '@mipmap/ic_launcher'in Android Studio 3.1.1 einen Fehler erhalten (auch nach der Neuerstellung des Caches), die App wurde jedoch ohne Fehler kompiliert und ausgeführt, und die Startgrafik wird angezeigt.
IanB
1
Ich habe das gleiche Problem, aber ich kann es nicht ausführen, da es zur Laufzeit abstürzt und mir sagt, dass das Bild fehlt. aber es kann mipmap aus irgendeinem Grund nicht auflösen. Hat jemand eine Idee warum das so ist?
Carlosx2
Hallo Leute, ich bin mir nicht sicher, warum Sie dieses Problem haben, aber für mich sieht es nach einem Problem mit der Projektsynchronisierung aus (es gibt keinen anderen Grund, die Ressource nicht zu finden, wenn sie vorhanden ist). Ich weiß nicht, wie ich es beheben soll, da ich dieses Problem nie hatte, aber versuche, das Projekt zu synchronisieren, zu bereinigen, neu zu erstellen usw., was auch immer in Ihrer IDEE möglich ist. Versuchen Sie auch, die Ressource in einem zeichnbaren Ordner zu verwenden und die Mipmap-Annotation durch eine zeichnbare Annotation zu ersetzen. Ich
rate
1
Neugierig, warum Sie das 4x-Bild hinzufügen. XCode scheint nur 3x zu erwarten. Gibt es einen Grund, warum Sie das 4x hinzufügen?
Bin ich der einzige, der seine Symbole durch Ausführen des Begrüßungsbildschirms und / oder durch Spritzen seines Begrüßungsbildschirms beim Aktualisieren von Symbolen abspritzen lässt? Mit genau dieser Methode ...?
ChrisH
21
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.
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.
Der standardmäßige weiße Begrüßungsbildschirm wird noch 1+ Sekunden lang angezeigt, bevor dieser benutzerdefinierte angezeigt wird. Müssen in den generierten Xcode- und Android-Projekten überschreiben, um es zu beseitigen.
d3vtoolsmith
Ja. Der Standard-Spalsh-Bildschirm in iOS und Android wird immer angezeigt. Dieser Flatter-Begrüßungsbildschirm ist zusätzlich dazu.
Mahesh Peri
Die Sache ist, dass dieses Beispiel nicht zuverlässig ist ... Was ist, wenn Ihre App aus Gründen wie der Netzwerkkonnektivität länger als 3 Sekunden geladen wird?
Emanuel Sanga
Für zusätzliche Anpassungen unterstütze ich diese Antwort mehr. Ich möchte zuerst eine HTTP-Anforderung ausführen, während ein Begrüßungsbildschirm angezeigt wird. Dieser Ansatz war viel einfacher
Idris Stack
16
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:
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 .
Ich habe es herausgefunden ... anscheinend war das iOS-Image schlecht. iOS und ANDROID funktionieren jetzt perfekt. Fehlalarm
IrishGringo
@SmrutiRanjanRana Was ist die ideale Größe für dieses Bild?
Mattias
Diese Antwort wäre viel hilfreicher, wenn es ein Beispiel für den Bildort gäbe. Andernfalls muss der Benutzer raten, wie der Pfad hinzugefügt werden soll.
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.
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.
Können Sie bitte den vollständigen Code (einen Code, den wir unabhängig ausführen können, ohne unsere Variablen definieren zu müssen) oder einen Github-Link veröffentlichen?
Biniam
7
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
Wenn Sie auf eine andere Seite außerhalb von SO verlinken, veröffentlichen Sie bitte den antwortenden Teil des Inhalts hier, um tote Links zu vermeiden.
Rak007
7
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
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"?><!--Modifythis 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:
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.
Können Sie auch eine Erklärung hinzufügen? Ein einfacher Codeblock allein ist nicht
allzu
3
Wenn Sie einen sekundären Begrüßungsbildschirm (nach dem nativen) wünschen, ist hier ein einfaches Beispiel, das funktioniert:
classSplashPageextendsStatelessWidget{SplashPage(BuildContext context){Future.delayed(constDuration(seconds:3),(){// Navigate here to next screen});}
@override
Widget build(BuildContext context){returnText('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
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 :)
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.
Antworten:
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 :))
Suchen Sie den Ordner "android" in Ihrem Flutter-Projekt.
Navigieren Sie zum Ordner app -> src -> main -> res und platzieren Sie alle Varianten Ihres Branding-Images in den entsprechenden Ordnern. Beispielsweise:
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).
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:
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:
Suchen Sie den Ordner "ios" in Ihrem Flutter-Projekt.
Navigieren Sie zu Runner -> Assets.xcassets -> LaunchImage.imageset. Es sollte LaunchImage.png, [email protected] usw. geben. Jetzt müssen Sie diese Bilder durch Ihre Markenbildvarianten ersetzen. Beispielsweise:
Wenn ich mich nicht irre, existiert [email protected] standardmäßig nicht, aber Sie können einfach eine erstellen. Wenn [email protected] 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:
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
quelle
Cannot resolve symbol '@mipmap/ic_launcher'
in Android Studio 3.1.1 einen Fehler erhalten (auch nach der Neuerstellung des Caches), die App wurde jedoch ohne Fehler kompiliert und ausgeführt, und die Startgrafik wird angezeigt.Wenn Sie
flutter create
Ihr Projekt erstellt haben, können Sie die Schritte unter https://flutter.io/assets-and-images/#updating-the-launch-screen ausführen .quelle
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.
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
quelle
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 .
quelle
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.
Hier können Sie die Farbe Ihres Bildschirms ändern -
quelle
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.
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.
Falls Ihr Bild den gesamten verfügbaren Bildschirm (Breite und Höhe) verwenden soll, können Sie die Fülleigenschaft verwenden.
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.
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.quelle
Sie sollten unten Code versuchen, für mich gearbeitet
quelle
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
quelle
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
quelle
Das Hinzufügen einer Seite wie unten und das Weiterleiten können hilfreich sein
Weitere Informationen finden Sie unter: https://www.youtube.com/watch?v=FNBuo-7zg2Q
quelle
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:
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:
quelle
mach deine materielle App so
=> Abhängigkeit hinzufügen
=> import import 'package: splashscreen / splashscreen.dart';
Bei dieser endgültigen Bildschirmausgabe können Sie die Sekunde entsprechend Ihren Anforderungen ändern. Der Kreis ist rund und kreisförmig
quelle
Dies ist die fehlerfreie und beste Möglichkeit, einen dynamischen Begrüßungsbildschirm in Flutter hinzuzufügen.
MAIN.DART
SPLASHSCREEN.DART
CONSTANTS.DART
HOMESCREEN.DART
quelle
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.
quelle
Wenn Sie einen sekundären Begrüßungsbildschirm (nach dem nativen) wünschen, ist hier ein einfaches Beispiel, das funktioniert:
quelle
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.
quelle
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: -
Schritt 3 : In Zeile 10 können Sie das Bild ändern: -
Das ist alles, du bist fertig! Viel Spaß beim Codieren :)
quelle
Für Android
App -> src -> main -> res -> drawble-> launch_background.xml und kommentieren Sie den kommentierten Block wie folgt aus
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
quelle
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
quelle
quelle