Jak podszedłbyś do dodania ekranu powitalnego do aplikacji Flutter? Powinien ładować się i wyświetlać przed innymi treściami. Obecnie występuje krótki błysk koloru przed załadowaniem widżetu Scaffold (home: X).

Chcę rzucić więcej światła na rzeczywisty sposób robienia ekranu powitalnego we Flutterze.

Podążałem trochę za śladem tutaj i zobaczyłem, że rzeczy nie wyglądają tak źle na ekranie powitalnym w Flutter.

Może większość deweloperów (jak ja) myśli, że we Flutterze domyślnie nie ma ekranu powitalnego i muszą coś z tym zrobić. Jest ekran powitalny, ale ma białe tło i nikt nie może zrozumieć, że domyślnie jest już ekran powitalny dla iOS i Androida.

Jedyne, co musi zrobić programista, to umieścić obraz brandingowy we właściwym miejscu, a ekran powitalny zacznie działać tak samo.

Oto jak możesz to zrobić krok po kroku:

Najpierw na Androida (bo to moja ulubiona platforma :))

1. Znajdź folder „android” w swoim projekcie Flutter.

2. Przejdź do aplikacji -> src -> main -> res folder i umieść wszystkie warianty swojego wizerunku marki w odpowiednich folderach. Na przykład:

• obraz o gęstości 1 należy umieścić w mipmap-mdpi,
• obraz o gęstości 1.5 należy umieścić w mipmap-hdpi,
• obraz o gęstości 2 należy umieścić w mipmap-xdpi,
• obraz o gęstości 3 należy umieścić w formacie mipmap-xxdpi,
• obraz o gęstości 4 należy umieścić w formacie mipmap-xxxdpi,

Domyślnie w folderze android nie ma drawable-mdpi, drawable-hdpi itp., Ale możemy je utworzyć, jeśli chcemy. Z tego powodu obrazy należy umieszczać w folderach mipmap. Również domyślny kod XML dotyczący ekranu powitalnego (w systemie Android) będzie używał @mipmap zamiast zasobu @drawable (możesz go zmienić, jeśli chcesz).

3. Ostatnim krokiem w systemie Android jest odkomentowanie części kodu XML w pliku drawable / launch_background.xml. Przejdź do aplikacji -> src -> main -> res-> drawable i otwórz launch_background.xml. Wewnątrz tego pliku zobaczysz, dlaczego tło ekranu Slash jest białe. Aby zastosować obraz marki, który umieściliśmy w kroku 2, musimy odkomentować część kodu XML w pliku launch_background.xml. Po zmianie kod powinien wyglądać następująco:

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

Zwróć uwagę, że komentujemy kod XML na białym tle i odkomentowujemy kod dotyczący obrazu mipmap. Jeśli ktoś jest zainteresowany, to plik launch_background.xml jest używany w pliku styles.xml.

Po drugie na iOS:

1. Znajdź folder „ios” w swoim projekcie Flutter.

2. Przejdź do Runner -> Assets.xcassets -> LaunchImage.imageset. Powinien tam być LaunchImage.png, LaunchImage@2x.png, itp. Teraz musisz zastąpić te obrazy wariantami obrazów brandingowych. Na przykład:

• obraz o gęstości 1 musi nadpisać LaunchImage.png,
• obraz o gęstości 2 musi zastąpić LaunchImage@2x.png,
• obraz o gęstości 3 musi zastąpić LaunchImage@3x.png,
• obraz o gęstości 4 musi zastąpić LaunchImage@4x.png,

Jeśli się nie mylę LaunchImage@4x.png nie istnieje domyślnie, ale możesz łatwo go utworzyć. Jeśli LaunchImage@4x.png nie istnieje, musisz zadeklarować to również w pliku Contents.json, który znajduje się w tym samym katalogu co obrazy. Po zmianie mój plik Contents.json wygląda następująco:

{
  "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"
  }
}

To powinno być wszystko, czego potrzebujesz, następnym razem, gdy uruchomisz aplikację, na Androidzie lub iOS powinieneś mieć odpowiedni ekran powitalny z dodanym obrazem marki.

Dzięki

Flutter w rzeczywistości daje prostszy sposób dodania ekranu powitalnego do naszej aplikacji. Najpierw musimy zaprojektować podstawową stronę, ponieważ projektujemy inne ekrany aplikacji. Musisz ustawić go jako StatefulWidget, ponieważ stan tego zmieni się za kilka sekund.

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

Logika Wewnątrz initState () , wywołaj Timer () z czasem trwania, jak chcesz, zrobiłem to 3 sekundy, po zakończeniu przesuń nawigator do ekranu głównego naszej aplikacji.

Uwaga: aplikacja powinna wyświetlać ekran powitalny tylko raz, użytkownik nie powinien wracać do niego ponownie po naciśnięciu przycisku Wstecz. W tym celu używamy Navigator.pushReplacement () , przejdzie do nowego ekranu i usunie poprzedni ekran ze stosu historii nawigacji.

Aby lepiej zrozumieć, odwiedź Flutter: Zaprojektuj własny ekran powitalny

Najłatwiejszym sposobem dodania ekranu powitalnego we flutter jest imho ten pakiet: https://pub.dev/packages/flutter_native_splash

Instrukcja instalacji (autorstwa autora pakietu):

1. Ustawianie ekranu powitalnego

Dodaj ustawienia do pliku pubspec.yaml swojego projektu lub utwórz plik w folderze głównym projektu o nazwie flutter_native_splash.yaml z ustawieniami.

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

obraz musi być plikiem png.

Możesz również użyć # w kolorze. color: "# 42a5f5" Możesz także ustawić android lub iOS na false, jeśli nie chcesz tworzyć ekranu powitalnego dla określonej platformy.

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

W przypadku, gdy obraz ma wykorzystywać cały dostępny ekran (szerokość i wysokość), możesz użyć właściwości fill.

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

Uwaga: właściwość fill nie została jeszcze zaimplementowana dla ekranów powitalnych iOS.

Jeśli chcesz wyłączyć pełny ekran powitalny na Androidzie, możesz użyć właściwości android_disable_fullscreen.

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

2. Uruchom pakiet

Po dodaniu ustawień uruchom pakiet z rozszerzeniem

flutter pub pub run flutter_native_splash:create Gdy pakiet zakończy działanie, ekran powitalny będzie gotowy.

Nie ma jeszcze dobrego przykładu, ale możesz to zrobić samodzielnie, korzystając z natywnych narzędzi dla każdej platformy:

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

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

Zasubskrybuj wydanie 8147, aby otrzymywać aktualizacje przykładowego kodu ekranów powitalnych. Jeśli przeszkadza Ci czarne migotanie między ekranem powitalnym a aplikacją na iOS, zasubskrybuj wydanie 8127, aby uzyskać aktualizacje.

Edycja: od 31 sierpnia 2017 r. Ulepszona obsługa ekranów powitalnych jest teraz dostępna w nowym szablonie projektu. Zobacz # 11505 .

W przypadku Androida przejdź do android> app> src> main> res> drawable> launcher_background.xml

Teraz odkomentuj to i zastąp @ mipmap / launch_image lokalizacją twojego obrazu.

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

Tutaj możesz zmienić kolor ekranu -

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

Powinieneś wypróbować poniższy kod, zadziałał dla mnie

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

osoby, które otrzymują błąd, taki jak nie znaleziono obrazu po zastosowaniu zweryfikowanej odpowiedzi, upewnij się, że dodajesz @ mipmap / ic_launcher zamiast @ mipmap / ic_launcher.png

Zarówno @Collin Jackson, jak i @Sniper mają rację. Możesz wykonać następujące kroki, aby skonfigurować obrazy uruchamiania odpowiednio w systemie Android i iOS. Następnie w swojej aplikacji MyApp (), w swojej initState (), możesz użyć Future.delayed, aby ustawić licznik czasu lub wywołać dowolny interfejs API. Dopóki odpowiedź nie zostanie zwrócona z Przyszłości, ikony uruchamiania będą wyświetlane, a gdy nadejdzie odpowiedź, możesz przejść do ekranu, do którego chcesz przejść po ekranie powitalnym. Możesz zobaczyć ten link: Flutter Splash Screen

Jest to wolny od błędów i najlepszy sposób na dodanie dynamicznego ekranu powitalnego do Flutter.

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

Pomocne może być dodanie strony takiej jak poniżej i routingu

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

Jeśli chcesz kontynuować, zobacz: https://www.youtube.com/watch?v=FNBuo-7zg2Q

Można to zrobić na wiele sposobów, ale najłatwiejszy z nich to:

Dla ikon uruchamiania używam biblioteki flutter Flutter Launcher Icon

Na niestandardowy ekran powitalny tworzę różne rozdzielczości ekranu, a następnie dodaję obrazy powitalne w folderze mipmap zgodnie z rozdzielczością dla Androida.

Ostatnią częścią jest dostosowanie launch_background.xml w folderze do rysowania w folderze res w systemie Android.

Po prostu zmień swój kod, aby wyglądał jak poniżej:

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

Niewielu programistów, których widziałem, dodawało splash jako dające się rysować, próbowałem tego, ale jakoś zawodzi kompilacja w Flutter 1.0.0 i Dart SDK 2.0+. Dlatego wolę dodać splash w sekcji bitmapy.

Tworzenie ekranu powitalnego w systemie iOS jest raczej prostsze.

W folderze Runner w iOS po prostu zaktualizuj pliki LaunchImage.png swoimi niestandardowymi obrazami ekranu powitalnego o takich samych nazwach, jak LaunchImage.png @ 2x, @ 3x, @ 4x.

Tylko dodatek Czuję, że dobrze jest mieć również obraz 4x w zestawie LaunchImage.imageset. Po prostu zaktualizuj swój kod w Content.json za pomocą następujących wierszy, poniżej skali 3x, aby dodać opcję skali 4x:

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

uczyń swoją materialną aplikację w ten sposób

=> Dodaj zależność

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

Na końcowym ekranie, takim jak ten, możesz zmienić sekundę zgodnie z wymaganiami. Okrąg będzie okrągły

Oto kroki konfiguracji ekranu powitalnego na platformach IOS i Android dla aplikacji Flutter.

Platforma IOS

Wszystkie aplikacje przesłane do sklepu Apple App Store muszą używać storyboardu Xcode, aby zapewnić ekran uruchamiania aplikacji. Zróbmy to w 3 krokach: -

Krok 1 : Otwórz ios / Runner.xcworkspace z katalogu głównego aplikacji.

Krok 2 : Wybierz Runner / Assets.xcassets z Nawigatora projektu i przeciągnij obrazy startowe we wszystkich rozmiarach (2x, 3x itd.). Możesz także generować obrazy o różnych rozmiarach z https://appicon.co/#image-sets

Krok 3 : Możesz zobaczyć, że plik LaunchScreen.storyboard pokazuje dostarczony obraz, tutaj możesz również zmienić położenie obrazu, po prostu przeciągając obraz. Więcej informacji można znaleźć w oficjalnej dokumentacji https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Platforma Android

W systemie Android ekran uruchamiania jest wyświetlany podczas inicjowania aplikacji na Androida. Ustawmy ten ekran uruchamiania w 3 krokach: -

Krok 1 : Otwórz plik android / app / src / main / res / drawable / launch_background.xml.

Krok 2 : W linii numer 4 możesz wybrać żądany kolor: -

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

Krok 3 : W linii numer 10 możesz zmienić obraz: -

android:src="@mipmap/launch_image"

To wszystko, gotowe! Miłego kodowania :)

Kod z Jaldhi Bhatt nie działa dla mnie.

Flutter zgłasza żądaną operację Navigatora w kontekście, który nie zawiera Nawigatora .

Naprawiłem zawijanie komponentu konsumenckiego Navigatora wewnątrz innego komponentu, który inicjuje kontekst Navigatora przy użyciu tras, jak wspomniano w tym artykule.

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

Jeśli chcesz mieć dodatkowy ekran powitalny (po natywnym), oto prosty przykład, który działa:

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 umożliwia domyślnie wyświetlenie ekranu powitalnego, ale istnieje wiele wtyczek, które mogą to zrobić. Jeśli nie chcesz używać wtyczki do tego zadania i martwisz się, że dodanie nowej wtyczki może wpłynąć na rozmiar aplikacji. Wtedy możesz to zrobić w ten sposób.

Dla Android

Otwórz launch_background.xml, a następnie umieść obraz ekranu powitalnego lub wybrany kolor gradientu. To pierwsza rzecz, którą widzi użytkownik po otwarciu aplikacji.

Dla IOS

Otwórz aplikację za pomocą Xcode, kliknij Runner> Assest.xcassets> LaunchImage, możesz dodać obraz tutaj. Jeśli chcesz edytować pozycję, w której powinien wyglądać lub wyglądać ekran uruchamiania, możesz edytować go na LaunchScreen.storyboard.

W przypadku
aplikacji na Androida -> src -> main -> res -> drawble-> launch_background.xml i odkomentuj skomentowany blok w ten sposób

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

czy ktoś napotka jakikolwiek błąd po kodowaniu w ten sposób
Użyj synchronizacji z systemem w Android Studio lub unieważnij pamięć podręczną i zresetuj.To rozwiązało mój problem W trybie debugowania trzepotania zajmie trochę czasu na ekranie powitalnym.Po kompilacji zmniejszy się jak natywny Android

Flutter.dev już daje najlepszą odpowiedź na to pytanie, to nie jest błąd ani problem, po prostu konfiguracja. Poświęć trochę czasu na przeczytanie i wszystko zostanie rozwiązane. Miłego dnia wszystkim.

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

Możesz go utworzyć na dwa sposoby

1. Przejdź do pakietu natywnego i strony początkowej. podobnie jak w natywnym pakiecie Androida stwórz plik do rysowania
2. Utwórz ekran do rzutek, który będzie wyświetlany przez jakiś czas

Znalazłem tutaj pełne wyjaśnienie usuwania białego ekranu i wyświetlania ekranu powitalnego

Możesz zrobić projekt trzepoczącego ekranu powitalnego tak samo jak inne ekrany. Jedyną zmianą jest użycie timera. Możesz więc wyświetlać ekran powitalny przez określony czas.

import 'dart:async';
import 'package:flutter/material.dart';
 
class Splash extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return SplashState();
  }
 
}
 
class SplashState extends State<Splash>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
 
    );
  }
 
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    startTimer();
  }
 
  startTimer() async{
     Timer(Duration(seconds: 3), nextScreen);
  }
 
   void nextScreen(){
 
  }
 
}

import ‘package:flutter/material.dart’;
import ‘package:fluttersplashsample/splash.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
          return MaterialApp(
              home: Splash(),
          );
     }
}

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