Flutter uygulamalarına bir açılış ekranı eklemeye nasıl yaklaşırsınız? Diğer içeriklerden önce yüklenmeli ve görüntülenmelidir. Şu anda Scaffold (ana sayfa: X) widget'ı yüklenmeden önce kısa bir renk flaşı var.

Flutter'da bir Splash ekranı yapmanın gerçek yoluna biraz daha ışık tutmak istiyorum.

Buradaki izi biraz takip ettim ve Flutter'daki Açılış Ekranıyla ilgili işlerin o kadar da kötü görünmediğini gördüm.

Belki de geliştiricilerin çoğu (benim gibi) Flutter'da varsayılan olarak Splash ekranı olmadığını düşünüyor ve bu konuda bir şeyler yapmaları gerekiyor. Bir Açılış ekranı var, ancak arka planı beyaz ve hiç kimse varsayılan olarak iOS ve Android için bir açılış ekranının olduğunu anlayamıyor.

Geliştiricinin yapması gereken tek şey, Markalaşma görüntüsünü doğru yere koymaktır ve açılış ekranı aynı şekilde çalışmaya başlayacaktır.

İşte bunu adım adım nasıl yapabileceğiniz:

İlk önce Android'de (çünkü en sevdiğim Platform :))

1. Flutter projenizde "android" klasörünü bulun.

2. Uygulama -> src -> ana -> res klasörüne gidin ve markalama resminizin tüm çeşitlerini ilgili klasörlere yerleştirin. Örneğin:

• yoğunluğu 1 olan görüntünün mipmap-mdpi'ye yerleştirilmesi gerekir,
• 1.5 yoğunluğundaki görüntünün mipmap-hdpi'ye yerleştirilmesi gerekir,
• yoğunluğu 2 olan görüntünün mipmap-xdpi'ye yerleştirilmesi gerekir,
• yoğunluk 3 olan görüntünün mipmap-xxdpi'ye yerleştirilmesi gerekir,
• yoğunluğu 4 olan görüntünün mipmap-xxxdpi'ye yerleştirilmesi gerekir,

Varsayılan olarak android klasöründe drawable-mdpi, drawable-hdpi vb. Yoktur, ancak istersek bunları oluşturabiliriz. Bu nedenle, görüntülerin mipmap klasörlerine yerleştirilmesi gerekir. Ayrıca Açılış ekranıyla ilgili varsayılan XML kodu (Android'de) @drawable resource yerine @mipmap kullanacaktır (isterseniz değiştirebilirsiniz).

3. Android'deki son adım, drawable / launch_background.xml dosyasındaki bazı XML kodlarının açıklamasını kaldırmaktır. Uygulamaya göz atın -> src -> main -> res-> drawable ve launch_background.xml dosyasını açın. Bu dosyanın içinde Eğik çizgi ekran arka planının neden beyaz olduğunu göreceksiniz. 2. adımda yerleştirdiğimiz markalama resmini uygulamak için launch_background.xml dosyanızdaki bazı XML kodunun açıklamasını kaldırmamız gerekiyor. Değişiklikten sonra kod şöyle görünmelidir:

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

Lütfen beyaz arka plan için XML kodunu yorumladığımıza ve mipmap görüntüsüyle ilgili kodu açıklamamıza dikkat edin. Birisi ilgilenirse, launch_background.xml dosyası styles.xml dosyasında kullanılır.

İOS'ta ikincisi:

1. Flutter projenizde "ios" klasörünü bulun.

2. Runner -> Assets.xcassets -> LaunchImage.imageset'e gidin. LaunchImage.png, LaunchImage@2x.png, vb. Olmalıdır. Şimdi bu resimleri marka imajı varyantlarınızla değiştirmelisiniz. Örneğin:

• yoğunluk 1 olan görüntünün LaunchImage.png'yi geçersiz kılması gerekir,
• yoğunluk 2'ye sahip görüntünün LaunchImage@2x.png'yi geçersiz kılması gerekir,
• yoğunluk 3 olan görüntünün LaunchImage@3x.png'yi geçersiz kılması gerekir,
• yoğunluğu 4 olan görüntünün LaunchImage@4x.png'yi geçersiz kılması gerekir,

Yanılmıyorsam LaunchImage@4x.png varsayılan olarak mevcut değil, ancak kolayca bir tane oluşturabilirsiniz. LaunchImage@4x.png yoksa, bunu görüntüler gibi aynı dizinde bulunan Contents.json dosyasında da bildirmeniz gerekir. Değişiklikten sonra Contents.json dosyam şöyle görünür:

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

İhtiyacınız olan tek şey bu olmalı, uygulamanızı bir dahaki sefere Android veya iOS'ta çalıştırdığınızda, eklediğiniz marka görüntüsüyle doğru Açılış Ekranına sahip olmalısınız.

Teşekkürler

Eğer varsa flutter createprojenizi d, en adımları izleyebilirsiniz https://flutter.io/assets-and-images/#updating-the-launch-screen .

Flutter, aslında uygulamamıza Açılış Ekranı eklemenin daha basit bir yolunu sunar. Diğer uygulama ekranlarını tasarlarken önce temel bir sayfa tasarlamamız gerekiyor. Bunun durumu birkaç saniye içinde değişeceğinden, bunu bir StatefulWidget yapmanız gerekir .

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

Mantık İçinde initstate () , bir çağrı Timer () istediğiniz gibi, ben yapmaktan itme kez Navigator bizim uygulamanın Ana Ekrana, o 3 saniye yapılmış, süresi.

Not: Uygulama açılış ekranını yalnızca bir kez göstermeli, kullanıcı geri düğmesine bastığında tekrar ona geri dönmemelidir. Bunun için Navigator.pushReplacement () kullanıyoruz , yeni bir ekrana taşınacak ve navigasyon geçmişi yığınından önceki ekranı kaldıracak.

Daha iyi anlamak için Flutter'ı ziyaret edin : Kendi Açılış Ekranınızı Tasarlayın

Henüz bunun iyi bir örneği yok, ancak her platform için yerel araçları kullanarak bunu kendiniz yapabilirsiniz:

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

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

Açılış ekranları için örnek kod güncellemeleri için 8147 sayısına abone olun . Açılış ekranı ile iOS'taki uygulama arasındaki siyah titreme sizi rahatsız ediyorsa, güncellemeler için 8127 yayınına abone olun .

Düzenleme: 31 Ağustos 2017 itibarıyla yeni proje şablonunda açılış ekranları için geliştirilmiş destek artık mevcuttur. Bkz. # 11505 .

Android için android> uygulama> src> main> res> drawable> launcher_background.xml seçeneğine gidin.

Şimdi bunun açıklamasını kaldırın ve @ mipmap / launch_image yerine resim konumunuzu yazın.

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

Ekranınızın rengini buradan değiştirebilirsiniz -

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

Flutter'da bir açılış ekranı eklemenin en kolay yolu bu paketi kullanmaktır: https://pub.dev/packages/flutter_native_splash

Kurulum kılavuzu (paketin yazarı tarafından):

1. Açılış ekranını ayarlama

Ayarlarınızı projenizin pubspec.yaml dosyasına ekleyin veya ayarlarınızla birlikte flutter_native_splash.yaml adlı kök proje klasörünüzde bir dosya oluşturun.

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

resim bir png dosyası olmalıdır.

# Rengini de kullanabilirsiniz. color: "# 42a5f5" Ayrıca, belirli bir platform için açılış ekranı oluşturmak istemiyorsanız android veya ios'u false olarak da ayarlayabilirsiniz.

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

Görüntünüzün mevcut tüm ekranı (genişlik ve yükseklik) kullanması durumunda, dolgu özelliğini kullanabilirsiniz.

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

Not: dolgu özelliği henüz iOS giriş ekranları için uygulanmamıştır.

Android'de tam ekran açılış ekranını devre dışı bırakmak istiyorsanız, android_disable_fullscreen özelliğini kullanabilirsiniz.

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

2. Paketi çalıştırın

Ayarlarınızı ekledikten sonra paketi şununla çalıştırın:

flutter pub pub run flutter_native_splash:create Paketin çalışması bittiğinde açılış ekranınız hazırdır.

Aşağıdaki kodu denemelisin, benim için çalıştı

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

görüntü gibi hata alıyorsanız kişiler eklemekte olduğunuz emin doğruladıktan cevap markasını uygulandıktan sonra bulunamadı @ mipmap / ic_launcher yerine @ mipmap / ic_launcher.png

Hem @ Collin Jackson hem de @Sniper haklı. Sırasıyla android ve iOS'ta başlatma görüntülerini ayarlamak için bu adımları takip edebilirsiniz. Daha sonra, MyApp (), initState (), bir zamanlayıcı ayarlamak veya herhangi bir api'yi aramak için Future.delayed'i kullanabilirsiniz. Yanıt Gelecekten geri dönene kadar başlatma simgeleriniz gösterilecek ve ardından yanıt geldikçe açılış ekranından sonra gitmek istediğiniz ekrana geçebilirsiniz. Bu bağlantıyı görebilirsiniz: Flutter Splash Screen

Aşağıdaki gibi bir sayfa eklemek ve yönlendirme yardımcı olabilir

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

Devam etmek istiyorsanız, bkz: https://www.youtube.com/watch?v=FNBuo-7zg2Q

Bunu yapmanın birden çok yolu var, ancak kullandığım en kolay yol:

Başlatma Simgeleri için flutter kitaplığını kullanıyorum Flutter Launcher Icon

Özel Açılış Ekranı için farklı Ekran çözünürlükleri oluşturuyorum ve ardından Android çözünürlüğüne göre mipmap klasörüne açılış görüntülerini ekliyorum.

Son kısım, Android'de res klasöründeki çekilebilir klasördeki launch_background.xml dosyasını ayarlamaktır.

Kodunuzu aşağıdaki gibi değiştirmeniz yeterlidir:

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

Birkaç geliştiricinin sıçramayı çekilebilir olarak eklediğini gördüm, bunu denedim ama bir şekilde yapı Flutter 1.0.0 ve Dart SDK 2.0+ sürümlerinde başarısız oluyor. Bu nedenle, bitmap bölümüne sıçrama eklemeyi tercih ediyorum.

iOS Açılış ekranı oluşturma oldukça basittir.

İOS'taki Runner klasöründe, LaunchImage.png dosyalarını, LaunchImage.png @ 2x, @ 3x, @ 4x ile aynı adlara sahip özel Açılış ekranı görüntülerinizle güncelleyin.

Sadece bir ek olarak LaunchImage.imageset'te 4x görüntüye sahip olduğum için iyi hissediyorum. 4x ölçek seçeneği eklemek için Content.json'daki kodunuzu 3x ölçeğinin altında aşağıdaki satırlarla güncellemeniz yeterlidir:

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

materyal uygulamanızı böyle yapın

=> Bağımlılık ekle

=> içe aktar 'paketi: 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,
    );
  }
}

Bunun gibi son ekran çıktısını, ihtiyaçlarınıza göre ikinci olarak değiştirebilirsiniz, daire yuvarlak dairesel olacaktır

Bu, Flutter'a dinamik açılış ekranı eklemenin hatasız ve en iyi yoludur.

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

Jaldhi Bhatt'tan gelen kod benim için çalışmıyor.

Flutter, bir ' Navigator içermeyen bir bağlamla istenen Navigator işlemi ' atar .

Bu makalede belirtildiği gibi, Navigator tüketici bileşenini, yönleri kullanarak Navigator bağlamını başlatan başka bir bileşenin içine saran kodu düzelttim .

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

İkincil bir açılış ekranı istemeniz durumunda (yerel olandan sonra), işte çalışan basit bir örnek:

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, varsayılan olarak bir açılış ekranına sahip olmanızı sağlar, ancak işi yapabilecek birçok eklenti vardır. Görev için bir eklenti kullanmak istemiyorsanız ve yeni bir eklenti eklemenin uygulamanızın boyutunu etkileyebileceğinden endişeleniyorsanız. O zaman bunu böyle yapabilirsin.

Android için

Launch_background.xml dosyasını açın, ardından açılış ekranı görüntüsünü veya istediğiniz gradyan rengini yerleştirebilirsiniz. Bu, kullanıcınızın uygulamanızı açtıklarında gördüğü ilk şeydir.

IOS için

Uygulamanızı Xcode kullanarak açın, Runner> Assest.xcassets> LaunchImage seçeneğine tıklayın, görseli buraya ekleyebilirsiniz. Başlatma ekranı görüntüsünün alması gereken konumu düzenlemek veya nasıl görünmesi gerektiğini düzenlemek istiyorsanız, onu LaunchScreen.storyboard'da düzenleyebilirsiniz.

Flutter uygulamanız için hem IOS hem de Android platformlarında açılış ekranını yapılandırmak için adımlar.

IOS Platformu

Apple App Store'a gönderilen tüm uygulamalar, uygulamanın başlatma ekranını sağlamak için bir Xcode storyboard kullanmalıdır. Bunu 3 adımda yapalım: -

Adım 1 : Uygulama dizininizin kökünden ios / Runner.xcworkspace dosyasını açın.

Adım 2 : Proje Gezgini'nden Runner / Assets.xcassets'i seçin ve her boyuttaki (2x, 3x, vb.) Başlatma görüntülerinizi sürükleyin. Ayrıca, https://appicon.co/#image-sets adresinden farklı boyutlarda görseller de oluşturabilirsiniz.

Adım 3 : LaunchScreen.storyboard dosyasının sağlanan görüntüyü gösterdiğini görebilirsiniz, burada ayrıca sadece görüntüyü sürükleyerek görüntünün konumunu değiştirebilirsiniz. Daha fazla bilgi için lütfen resmi belgelere bakın https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

Android Platformu

Android'de, Android uygulamanız başlatılırken bir başlatma ekranı gösterilir. Bu başlatma ekranını 3 adımda ayarlayalım: -

Adım 1 : android / app / src / main / res / drawable / launch_background.xml dosyasını açın.

Adım 2 : 4. satırda istediğiniz rengi seçebilirsiniz: -

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

3. Adım : 10. satırda resmi değiştirebilirsiniz: -

android:src="@mipmap/launch_image"

Hepsi bu, bitirdiniz! Mutlu Kodlama :)

Android
uygulaması için -> src -> main -> res -> drawble-> launch_background.xml ve yorum yapılan bloğu bunun gibi kaldırın

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

Bu gibi kodlamadan sonra herhangi bir hata var mı?
Android stüdyosunda sistemle senkronizasyonu kullanın veya önbelleği geçersiz kılın ve sıfırlayın.Bu benim sorunumu çözdü Flutter hata ayıklama modunda açılış ekranı için biraz zaman ayırın.

Flutter.dev zaten bunun için en iyi cevabı veriyor, bu bir hata değil, sorun değil, sadece yapılandırma. Sadece okuyun ve her şey çözülecektir. Herkese iyi günler.

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

İki şekilde yaratabilirsiniz

1. Yerel pakete ve bir başlangıç ​​sayfasına gidin. Yerel Android paketinde olduğu gibi bir çekilebilir
2. Bir süre görüntülemek için bir dart ekranı oluşturun

Burada beyaz ekranı kaldırmak ve açılış ekranını görüntülemek için tam bir açıklama buldum

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