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.

Pieter
quelle
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.
Maheshmnj
1
Dieser Link erklärt, wie es geht: flutter.dev/docs/development/ui/splash-screen/…
live-love

Antworten:

249

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

  1. 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, [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:

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "[email protected]",
      "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

Stoycho Andreev
quelle
4
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?
Sbilstein
3
Offizielle Unterlagen haben dies abgedeckt.
Rmalviya
28

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 .

xster
quelle
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.

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

kowsalya_ckar
quelle
6
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:

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 .

Collin Jackson
quelle
Gibt es ein Beispiel, wie man tatsächlich einen Begrüßungsbildschirm hinzufügt? Wenn ich die neue Vorlage starte, sehe ich keinen Begrüßungsbildschirm
Ride Sun
@ RideSun siehe meine Antwort
Stoycho Andreev
1
Wie kann ich den Begrüßungsbildschirm länger halten? sollte ich einen Code in der Aktivität ändern?
zero.zero.seven
Aber ich brauche mehr zB wenn beim Splash dann das Erstellen / Importieren der lokalen Datenbank dann nur das Splash endet
Stuckedoverflow
14

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" />
Smruti Ranjan Rana
quelle
Das hat bei mir funktioniert ... aber der iOS-Teil ... spielt nicht so gut
IrishGringo
1
check this out - flutter.io/assets-and-images/#updating-the-launch-screen
Smruti Ranjan Rana
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.
Robin Manoli
12

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

Geben Sie hier die Bildbeschreibung ein

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.

patreu22
quelle
7

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,
      )),
    ),
  );
}
}
Jaldhi Bhatt
quelle
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

Vikas
quelle
1
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

Md Sadab Wasim
quelle
Ihre IDE würde Ihnen dies mitteilen, sobald Sie den Mauszeiger auf den Fehler
bewegen
4

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

goops17
quelle
4

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" : "[email protected]",
      "scale" : "4x"
    }
Prashant Gupta
quelle
4

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

Geben Sie hier die Bildbeschreibung ein

Champ 96k
quelle
Abhängigkeiten hinzufügen => dynamic_theme: ^ 1.0.1
Champ 96k
Es gibt keinen Import für SplashScreen
Tuss
Ja, genau richtig, es gibt eine Reihe von Möglichkeiten, dies zu tun. In der Antwort werde ich Ihnen jedoch erläutern,
Champ 96k
4

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

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,
        )
    );
  }
}
GiBi
quelle
2
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:

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');
  }
}
david72
quelle
3

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. Geben Sie hier die Bildbeschreibung ein

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.

Geben Sie hier die Bildbeschreibung ein

Abel Tilahun
quelle
3

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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"

Geben Sie hier die Bildbeschreibung ein

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

Gagandeep Gambhir
quelle
0

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

Lava
quelle
0

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

Fabrício Justo
quelle
Dies scheint nicht mehr relevant zu sein, da die gleiche Antwort bereits am 9. April gegeben wurde.
Keimeno
Aber meine ist viel direkter auf den Punkt zur besten Schriftart.
Fabrício Justo
-1
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),
    ),
  );
MJ
quelle