Bagaimana cara Anda mendekati menambahkan layar splash ke aplikasi Flutter? Itu harus memuat dan ditampilkan sebelum konten lain. Saat ini ada flash singkat warna sebelum widget Scaffold (home: X) dimuat.

Saya ingin memberi sedikit lebih banyak tentang cara sebenarnya melakukan layar Splash di Flutter.

Saya mengikuti sedikit jejak di sini dan saya melihat bahwa ada hal-hal yang tidak tampak buruk tentang Layar Splash di Flutter.

Mungkin sebagian besar devs (seperti saya) berpikir bahwa tidak ada layar Splash secara default di Flutter dan mereka perlu melakukan sesuatu tentang itu. Ada layar Splash, tetapi dengan latar belakang putih dan tidak ada yang bisa mengerti bahwa sudah ada layar splash untuk iOS dan Android secara default.

Satu-satunya hal yang perlu dilakukan pengembang adalah menempatkan gambar Branding di tempat yang tepat dan layar splash akan mulai berfungsi begitu saja.

Inilah cara Anda melakukannya langkah demi langkah:

Pertama di Android (karena Platform favorit saya :))

1. Temukan folder "android" di proyek Flutter Anda.

2. Jelajahi aplikasi -> src -> main -> folder res dan tempatkan semua varian gambar merek Anda di folder yang sesuai. Sebagai contoh:

• gambar dengan kepadatan 1 harus ditempatkan di mipmap-mdpi,
• gambar dengan kepadatan 1.5 perlu ditempatkan di mipmap-hdpi,
• gambar dengan kepadatan 2 harus ditempatkan di mipmap-xdpi,
• gambar dengan kepadatan 3 perlu ditempatkan di mipmap-xxdpi,
• gambar dengan kepadatan 4 harus ditempatkan di mipmap-xxxdpi,

Secara default di folder android tidak ada drawable-mdpi, drawable-hdpi, dll., Tapi kita bisa membuatnya jika kita mau. Karena fakta itu, gambar harus ditempatkan di folder mipmap. Juga kode XML default tentang layar Splash (di Android) akan menggunakan @mipmap, alih-alih sumber daya @drawable (Anda dapat mengubahnya jika Anda mau).

3. Langkah terakhir pada Android adalah menghapus komentar beberapa kode XML dalam file drawable / launch_background.xml. Telusuri ke aplikasi -> src -> main -> res-> drawable dan buka launch_background.xml. Di dalam file ini, Anda akan melihat mengapa latar belakang layar Slash berwarna putih. Untuk menerapkan citra pencitraan merek yang kami tempatkan di langkah 2, kami harus menghapus komentar beberapa kode XML di file launch_background.xml Anda. Setelah perubahan, kode akan terlihat seperti:

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

Harap perhatikan bahwa kami mengomentari kode XML untuk latar belakang putih dan batalkan komentar pada kode tentang gambar mipmap. Jika seseorang tertarik, file launch_background.xml digunakan dalam file styles.xml.

Kedua di iOS:

1. Temukan folder "ios" di proyek Flutter Anda.

2. Browse ke Runner -> Assets.xcassets -> LaunchImage.imageset. Harus ada LaunchImage.png, [email protected], dll. Sekarang Anda harus mengganti gambar-gambar ini dengan varian gambar merek Anda. Sebagai contoh:

• gambar dengan kerapatan 1 harus menimpa LaunchImage.png,
• gambar dengan kerapatan 2 harus menimpa [email protected],
• gambar dengan densitas 3 perlu menggantikan [email protected],
• gambar dengan densitas 4 perlu menggantikan [email protected],

Jika saya tidak salah, [email protected] tidak ada secara default, tetapi Anda dapat dengan mudah membuatnya. Jika [email protected] tidak ada, Anda harus mendeklarasikannya di file Contents.json juga, yang ada di direktori yang sama seperti gambar. Setelah perubahan, file Contents.json saya terlihat seperti ini:

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

Itu seharusnya yang Anda butuhkan, lain kali ketika Anda menjalankan aplikasi Anda, di Android atau iOS Anda harus memiliki Splash Screen yang tepat dengan gambar branding yang Anda tambahkan.

Terima kasih

Jika Anda flutter createmengerjakan proyek Anda, Anda dapat mengikuti langkah-langkah di https://flutter.io/assets-and-images/#updating-the-launch-screen .

Flutter sebenarnya memberikan cara yang lebih sederhana untuk menambahkan Splash Screen ke aplikasi kita. Pertama-tama kita perlu merancang halaman dasar saat kita merancang layar aplikasi lain. Anda harus menjadikannya StatefulWidget karena keadaan ini akan berubah dalam beberapa detik.

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 Di dalam initState () , panggil a Timer () dengan durasinya, sesuai keinginan, saya membuatnya 3 detik, setelah selesai dorong navigator ke Home Screen aplikasi kita.

Catatan: Aplikasi harus menampilkan layar splash hanya sekali, pengguna tidak harus kembali ke sana lagi pada tombol kembali tekan. Untuk ini, kami gunakan Navigator.pushReplacement () , Ini akan pindah ke layar baru dan menghapus layar sebelumnya dari tumpukan riwayat navigasi.

Untuk pemahaman yang lebih baik, kunjungi Flutter: Rancang Layar Splash Anda sendiri

Belum ada contoh yang bagus tentang ini, tetapi Anda bisa melakukannya sendiri menggunakan alat asli untuk setiap platform:

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

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

Berlangganan terbitan 8147 untuk pembaruan tentang kode contoh untuk layar splash. Jika layar hitam antara layar splash dan aplikasi di iOS mengganggu Anda, berlanggananlah edisi 8127 untuk pembaruan.

Sunting: Per tanggal 31 Agustus 2017, peningkatan dukungan untuk layar splash sekarang tersedia di templat proyek yang baru. Lihat # 11505 .

Untuk Android, buka Android> aplikasi> src> main> res> drawable> launcher_background.xml

Sekarang batalkan komentar ini dan ganti @ mipmap / launch_image , dengan lokasi gambar Anda.

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

Anda dapat mengubah warna layar Anda di sini -

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

Cara termudah untuk menambahkan splash screen dalam flutter adalah dengan paket ini: https://pub.dev/packages/flutter_native_splash

Panduan instalasi (oleh pembuat paket):

1. Mengatur layar splash

Tambahkan pengaturan Anda ke file pubspec.yaml proyek Anda atau buat file di folder root proyek Anda bernama flutter_native_splash.yaml dengan pengaturan Anda.

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

gambar harus berupa file png.

Anda dapat menggunakan # dalam warna juga. color: "# 42a5f5" Anda juga dapat mengatur android atau ios menjadi false jika Anda tidak ingin membuat splash screen untuk platform tertentu.

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

Jika gambar Anda harus menggunakan semua layar yang tersedia (lebar dan tinggi), Anda dapat menggunakan properti isi.

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

Catatan: properti isi belum diterapkan untuk layar splash iOS.

Jika Anda ingin menonaktifkan layar splash layar penuh pada Android Anda dapat menggunakan properti android_disable_fullscreen.

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

2. Jalankan paket

Setelah menambahkan pengaturan Anda, jalankan paket dengan

flutter pub pub run flutter_native_splash:create Ketika paket selesai menjalankan splash screen Anda siap.

Anda harus mencoba kode di bawah ini, berhasil untuk saya

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

orang yang mendapatkan kesalahan seperti gambar tidak ditemukan setelah menerapkan jawaban yang diverifikasi pastikan Anda menambahkan @ mipmap / ic_launcher alih-alih @ mipmap / ic_launcher.png

@Collin Jackson dan @Sniper benar. Anda dapat mengikuti langkah-langkah ini untuk menyiapkan gambar peluncuran di Android dan iOS masing-masing. Kemudian di MyApp Anda (), di initState Anda (), Anda dapat menggunakan Future.delayed untuk mengatur timer atau memanggil api apa pun. Sampai respons dikembalikan dari Masa Depan, ikon peluncuran Anda akan ditampilkan dan kemudian saat respons datang, Anda dapat pindah ke layar yang ingin Anda tuju setelah layar splash. Anda dapat melihat tautan ini: Flutter Splash Screen

Menambahkan halaman seperti di bawah ini dan perutean mungkin membantu

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

Jika Anda ingin menindaklanjuti, lihat: https://www.youtube.com/watch?v=FNBuo-7zg2Q

Berbagai cara dapat Anda lakukan ini, tetapi cara termudah yang saya gunakan adalah:

Untuk Ikon Peluncuran, saya menggunakan flutter library, Flutter Launcher Icon

Untuk Layar Percikan Kustom saya membuat resolusi Layar berbeda dan kemudian menambahkan gambar splash di folder mipmap sesuai resolusi untuk Android.

Bagian terakhir adalah menyesuaikan launch_background.xml di folder drawable di folder res di Android.

Ubah saja kode Anda agar terlihat seperti di bawah ini:

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

Beberapa devs yang saya lihat menambahkan splash sebagai drawable, saya mencoba ini tetapi entah bagaimana build gagal di Flutter 1.0.0 dan Dart SDK 2.0+. Karena itu saya lebih suka menambahkan splash di bagian bitmap.

Pembuatan layar iOS Splash agak sederhana.

Di folder Runner di iOS baru saja memperbarui file LaunchImage.png dengan gambar layar Splash khusus Anda dengan nama yang sama seperti LaunchImage.png @ 2x, @ 3x, @ 4x.

Hanya tambahan saya merasa baik untuk memiliki gambar 4x juga di LaunchImage.imageset. Cukup perbarui kode Anda di Content.json dengan baris berikut, di bawah skala 3x untuk menambahkan opsi skala 4x:

{
      "idiom" : "universal",
      "filename" : "[email protected]",
      "scale" : "4x"
    }

buat aplikasi materi Anda seperti ini

=> Tambahkan ketergantungan

=> impor impor 'paket: 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,
    );
  }
}

Output layar akhir seperti ini Anda dapat mengubah detik sesuai dengan kebutuhan Anda lingkaran akan menjadi bundar bulat

Ini adalah kesalahan bebas dan cara terbaik untuk menambahkan layar splash dinamis di Flutter.

UTAMA

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

KONSTAN. MULAI

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

Kode dari Jaldhi Bhatt tidak berfungsi untuk saya.

Flutter melempar operasi ' Navigator yang diminta dengan konteks yang tidak termasuk Navigator .'

Saya memperbaiki kode yang membungkus komponen konsumen Navigator di dalam komponen lain yang menginisialisasi konteks Navigator menggunakan rute, seperti yang disebutkan dalam artikel ini .

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

Jika Anda menginginkan layar splash sekunder (setelah yang asli), berikut adalah contoh sederhana yang berfungsi:

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 memberi Anda kemampuan untuk memiliki layar splash secara default, tetapi ada banyak plugin yang dapat melakukan pekerjaan itu. Jika Anda tidak ingin menggunakan plugin untuk tugas itu dan Anda khawatir menambahkan plugin baru dapat memengaruhi ukuran aplikasi Anda. Maka Anda bisa melakukannya seperti ini.

Untuk Android

Buka launch_background.xml maka Anda dapat memasukkan gambar splash screen, atau warna gradien yang Anda inginkan. Ini adalah hal pertama yang dilihat pengguna saat mereka membuka aplikasi Anda.

Untuk iOS

Buka aplikasi Anda menggunakan Xcode, Klik pada Runner> Assest.xcassets> LaunchImage, Anda dapat menambahkan gambar di sini. Jika Anda ingin mengedit posisi apa yang harus diambil atau tampak seperti layar peluncuran, Anda dapat mengeditnya di LaunchScreen.storyboard.

Berikut adalah langkah-langkah untuk mengonfigurasi splash screen di platform iOS dan Android untuk aplikasi Flutter Anda.

Platform iOS

Semua aplikasi yang dikirim ke Apple App Store harus menggunakan papan cerita Xcode untuk menyediakan layar peluncuran aplikasi. Mari kita lakukan ini dalam 3 langkah: -

Langkah 1 : Buka ios / Runner.xcworkspace dari root direktori aplikasi Anda.

Langkah 2 : Pilih Runner / Assets.xcassets dari Project Navigator dan seret gambar peluncuran Anda dari semua ukuran (2x, 3x, dll.). Anda juga dapat menghasilkan berbagai ukuran gambar dari https://appicon.co/#image-sets

Langkah 3 : Anda dapat melihat file LaunchScreen.storyboard menampilkan gambar yang disediakan, di sini Anda juga dapat mengubah posisi gambar dengan hanya menarik gambar. Untuk informasi lebih lanjut silakan lihat dokumentasi resmi https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Platform Android

Di Android, layar peluncuran ditampilkan saat aplikasi Android Anda diinisialisasi. Mari kita atur layar peluncuran ini dalam 3 langkah: -

Langkah 1 : Buka file android / app / src / main / res / drawable / launch_background.xml.

Langkah 2 : Pada nomor baris 4 Anda dapat memilih warna yang diinginkan: -

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

Langkah 3 : Pada nomor baris 10 Anda dapat mengubah gambar: -

android:src="@mipmap/launch_image"

Itu saja, Anda sudah selesai! Selamat Coding :)

Untuk
aplikasi Android -> src -> main -> res -> drawble-> launch_background.xml dan batalkan komentar pada blok komentar seperti ini

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

apakah ada satu wajah kesalahan setelah pengkodean seperti ini
Gunakan sinkronisasi dengan sistem di android studio atau cache tidak valid dan reset. Ini memecahkan masalah saya Dalam mode debug flutter perlu waktu untuk splash screen. Setelah membangun itu akan berkurang seperti android asli

Flutter.dev sudah memberikan jawaban terbaik untuk itu, itu bukan bug dan bukan masalah, hanya konfigurasi. Hanya butuh waktu membaca dan semuanya akan terpecahkan. Semoga harimu menyenangkan semua orang.

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

Anda dapat membuatnya dengan dua cara

1. Pergi ke paket asli dan halaman awal. seperti dalam paket Android Asli membuat drawable
2. Buat layar panah untuk ditampilkan selama beberapa waktu

Saya menemukan penjelasan lengkap untuk menghapus layar putih dan menampilkan layar splash di sini

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