Làm thế nào bạn sẽ tiếp cận việc thêm một màn hình giật gân vào các ứng dụng Flutter? Nó sẽ tải và hiển thị trước bất kỳ nội dung khác. Hiện tại có một đèn flash màu ngắn trước khi tải widget Scaffold (home: X).

Tôi muốn mang lại nhiều ánh sáng hơn cho cách thực hiện màn hình Splash trong Flutter.

Tôi đã theo dõi một chút dấu vết ở đây và tôi thấy rằng mọi thứ không quá tệ về Màn hình Splash trong Flutter.

Có lẽ hầu hết các nhà phát triển (như tôi) đang nghĩ rằng không có màn hình Splash theo mặc định trong Flutter và họ cần phải làm gì đó về điều đó. Có một màn hình Splash, nhưng nó có nền trắng và không ai có thể hiểu rằng đã có một màn hình giật gân cho iOS và Android theo mặc định.

Điều duy nhất mà nhà phát triển cần làm là đặt hình ảnh Thương hiệu vào đúng vị trí và màn hình giật gân sẽ bắt đầu hoạt động như vậy.

Đây là cách bạn có thể làm điều đó từng bước:

Đầu tiên trên Android (vì là Nền tảng yêu thích của tôi :))

1. Tìm thư mục "android" trong dự án Flutter của bạn.

2. Duyệt đến ứng dụng -> src -> main -> res thư mục và đặt tất cả các biến thể của hình ảnh thương hiệu của bạn vào các thư mục tương ứng. Ví dụ:

• hình ảnh có mật độ 1 cần được đặt trong mipmap-mdpi,
• hình ảnh có mật độ 1,5 cần được đặt trong mipmap-hdpi,
• hình ảnh có mật độ 2 cần được đặt trong mipmap-xdpi,
• hình ảnh có mật độ 3 cần được đặt trong mipmap-xxdpi,
• hình ảnh có mật độ 4 cần được đặt trong mipmap-xxxdpi,

Theo mặc định trong thư mục Android không có drawable-mdpi, drawable-hdpi, v.v., nhưng chúng ta có thể tạo chúng nếu muốn. Vì thực tế đó, hình ảnh cần được đặt trong các thư mục mipmap. Ngoài ra, mã XML mặc định về màn hình Splash (trong Android) sẽ sử dụng @mipmap, thay vì tài nguyên @drawable (bạn có thể thay đổi nó nếu muốn).

3. Bước cuối cùng trên Android là bỏ ghi chú một số mã XML trong tệp drawable / launch_background.xml. Duyệt đến ứng dụng -> src -> main -> res-> drawable và mở launch_background.xml. Trong tập tin này, bạn sẽ thấy tại sao nền màn hình Slash có màu trắng. Để áp dụng hình ảnh thương hiệu mà chúng tôi đã đặt ở bước 2, chúng tôi phải bỏ ghi chú một số mã XML trong tệp launch_background.xml của bạn. Sau khi thay đổi, mã sẽ trông như sau:

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

Vui lòng chú ý rằng chúng tôi nhận xét mã XML cho nền trắng và bỏ ghi chú mã về hình ảnh mipmap. Nếu ai đó quan tâm, tệp launch_background.xml được sử dụng trong tệp Styles.xml.

Thứ hai trên iOS:

1. Tìm thư mục "ios" trong dự án Flutter của bạn.

2. Duyệt đến Người chạy -> Tài sản.xcassets -> LaunchImage.imageset. Cần có LaunchImage.png, LaunchImage@2x.png, v.v ... Bây giờ bạn phải thay thế những hình ảnh này bằng các biến thể hình ảnh thương hiệu của bạn. Ví dụ:

• hình ảnh có mật độ 1 cần ghi đè LaunchImage.png,
• hình ảnh có mật độ 2 cần ghi đè LaunchImage@2x.png,
• hình ảnh có mật độ 3 cần ghi đè LaunchImage@3x.png,
• hình ảnh có mật độ 4 cần ghi đè LaunchImage@4x.png,

Nếu tôi không sai LaunchImage@4x.png không tồn tại theo mặc định, nhưng bạn có thể dễ dàng tạo một cái. Nếu LaunchImage@4x.png không tồn tại, bạn cũng phải khai báo nó trong tệp Content.json, nằm trong cùng thư mục giống như hình ảnh. Sau khi thay đổi, tệp Content.json của tôi trông như thế này:

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

Đó phải là tất cả những gì bạn cần, lần tới khi bạn chạy ứng dụng của mình, trên Android hoặc iOS, bạn nên có Màn hình Splash phù hợp với hình ảnh thương hiệu mà bạn đã thêm.

Cảm ơn

Nếu bạn là flutter createdự án của mình, bạn có thể làm theo các bước tại https://flutter.io/assets-and-images/#updating-the-launch-screen .

Flutter thực sự cung cấp một cách đơn giản hơn để thêm Splash Screen vào ứng dụng của chúng tôi. Trước tiên chúng ta cần thiết kế một trang cơ bản khi chúng ta thiết kế các màn hình ứng dụng khác. Bạn cần biến nó thành StatefulWidget vì trạng thái này sẽ thay đổi sau vài giây.

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

Logic Bên trong initState () , gọi một Timer () với thời lượng, như bạn muốn, tôi thực hiện trong 3 giây, sau khi thực hiện xong việc đẩy bộ điều hướng đến Màn hình chính của ứng dụng của chúng tôi.

Lưu ý: Ứng dụng sẽ chỉ hiển thị màn hình giật gân một lần, người dùng không nên quay lại màn hình đó khi nhấn nút quay lại. Đối với điều này, chúng tôi sử dụng Navigator.pushReplocation () , Nó sẽ chuyển sang một màn hình mới và xóa màn hình trước đó khỏi ngăn xếp lịch sử điều hướng.

Để hiểu rõ hơn, hãy truy cập Flutter: Thiết kế màn hình Splash của riêng bạn

Vẫn chưa có một ví dụ hay về điều này, nhưng bạn có thể tự làm điều đó bằng cách sử dụng các công cụ gốc cho từng nền tảng:

iOS: https://docs.nativecript.org/publishing/creating-launch-sc Greens-ios

Android: https://www.bignerdranch.com/blog/Station-sc Greens-the-right-way /

Đăng ký phát hành 8147 để cập nhật mã ví dụ cho màn hình giật gân. Nếu nhấp nháy màu đen giữa màn hình giật gân và ứng dụng trên iOS làm phiền bạn, hãy đăng ký để phát hành 8127 để cập nhật.

Chỉnh sửa: Kể từ ngày 31 tháng 8 năm 2017, hỗ trợ cải tiến cho màn hình giật gân hiện có sẵn trong mẫu dự án mới. Xem # 11505 .

Đối với Android, truy cập Android> ứng dụng> src> main> res> drawable> launcher_background.xml

Bây giờ bỏ ghi chú này và thay thế @ mipmap / launch_image , bằng vị trí hình ảnh của bạn.

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

Bạn có thể thay đổi màu màn hình của bạn ở đây -

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

Cách dễ nhất để thêm màn hình giật gân trong rung là gói này: https://pub.dev/packages/flutter_native_Station

Hướng dẫn cài đặt (theo tác giả của gói):

1. Đặt màn hình giật gân

Thêm cài đặt của bạn vào tệp pubspec.yaml của dự án hoặc tạo một tệp trong thư mục dự án gốc có tên flutter_native_Station.yaml với các cài đặt của bạn.

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

hình ảnh phải là một tập tin png.

Bạn cũng có thể sử dụng # in color. màu: "# 42a5f5" Bạn cũng có thể đặt android hoặc ios thành false nếu bạn không muốn tạo màn hình giới thiệu cho một nền tảng cụ thể.

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

Trong trường hợp hình ảnh của bạn nên sử dụng tất cả màn hình có sẵn (chiều rộng và chiều cao), bạn có thể sử dụng thuộc tính điền.

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

Lưu ý: điền thuộc tính chưa được triển khai cho màn hình giật gân iOS.

Nếu bạn muốn tắt màn hình giật gân toàn màn hình trên Android, bạn có thể sử dụng thuộc tính android_disable_fullscreen.

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

2. Chạy gói

Sau khi thêm cài đặt của bạn, hãy chạy gói với

flutter pub pub run flutter_native_splash:create Khi gói hoàn tất chạy màn hình giật gân của bạn đã sẵn sàng.

Bạn nên thử mã dưới đây, làm việc cho tôi

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

những người đang nhận được lỗi như hình ảnh không được tìm thấy sau khi áp dụng câu trả lời đã được xác minh, hãy đảm bảo rằng bạn đang thêm @ mipmap / ic_launcher thay vì @ mipmap / ic_launcher.png

Cả @Collin Jackson và @Sniper đều đúng. Bạn có thể làm theo các bước sau để thiết lập hình ảnh khởi chạy trong Android và iOS tương ứng. Sau đó, trong MyApp (), trong initState () của bạn, bạn có thể sử dụng Future.delayed để thiết lập bộ đếm thời gian hoặc gọi bất kỳ api nào. Cho đến khi phản hồi được trả về từ Tương lai, các biểu tượng khởi chạy của bạn sẽ được hiển thị và sau đó khi phản hồi đến, bạn có thể di chuyển đến màn hình bạn muốn đến sau màn hình giật gân. Bạn có thể thấy liên kết này: Màn hình Flutter Splash

Thêm một trang như dưới đây và định tuyến có thể giúp

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

Nếu bạn muốn theo dõi qua, hãy xem: https://www.youtube.com/watch?v=FNBuo-7zg2Q

Nhiều cách bạn có thể làm điều này, nhưng cách dễ nhất mà tôi sử dụng là:

Đối với Biểu tượng Khởi chạy, tôi sử dụng thư viện Flutter Icon Biểu tượng

Đối với màn hình Splash tùy chỉnh tôi tạo các độ phân giải Màn hình khác nhau và sau đó thêm hình ảnh giật gân vào thư mục mipmap theo độ phân giải cho Android.

Phần cuối cùng là điều chỉnh launch_background.xml trong thư mục drawable trong thư mục res trong Android.

Chỉ cần thay đổi mã của bạn để trông giống như dưới đây:

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

Vài nhà phát triển tôi đã thấy thêm phần giật gân là có thể vẽ được, tôi đã thử cách này nhưng bằng cách nào đó, quá trình xây dựng không thành công trong Flutter 1.0.0 và Dart SDK 2.0+. Vì vậy, tôi thích thêm phần giật gân trong phần bitmap.

Việc tạo màn hình Splash của iOS khá đơn giản.

Trong thư mục Runner trong iOS, chỉ cần cập nhật các tệp LaunchImage.png với hình ảnh màn hình Splash tùy chỉnh của bạn có cùng tên với LaunchImage.png @ 2x, @ 3x, @ 4x.

Chỉ cần một bổ sung tôi cảm thấy thật tốt khi có một hình ảnh 4x cũng như trong LaunchImage.imageset. Chỉ cần cập nhật mã của bạn trong Content.json với các dòng sau, dưới tỷ lệ 3x để thêm tùy chọn tỷ lệ 4x:

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

làm cho ứng dụng tài liệu của bạn như thế này

=> Thêm phụ thuộc

=> nhập khẩu 'gói: giật gân / giật gân.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,
    );
  }
}

Đầu ra màn hình cuối cùng như thế này bạn có thể thay đổi thứ hai theo yêu cầu của bạn, vòng tròn sẽ là hình tròn

Đây là cách miễn phí và tốt nhất để thêm màn hình giật gân động trong Flutter.

CHÍNH

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

Mã từ Jaldhi Bhatt không hoạt động đối với tôi.

Flutter ném một hoạt động ' Điều hướng được yêu cầu với bối cảnh không bao gồm Điều hướng .'

Tôi cố định mã gói các thành phần Navigator tiêu dùng bên trong một thành phần mà khởi tạo bối cảnh Navigator sử dụng tuyến đường, như đã đề cập trong này bài viết.

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

Trong trường hợp bạn muốn có một màn hình giật gân thứ cấp (sau màn hình gốc), đây là một ví dụ đơn giản hoạt động:

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 cung cấp cho bạn khả năng có màn hình giật gân theo mặc định nhưng có rất nhiều plugin có thể thực hiện công việc. Nếu bạn không muốn sử dụng một plugin cho nhiệm vụ và bạn lo lắng rằng việc thêm một plugin mới có thể ảnh hưởng đến kích thước ứng dụng của bạn. Sau đó, bạn có thể làm điều đó như thế này.

CHO Android

Mở launch_background.xml sau đó bạn có thể đưa vào hình ảnh màn hình giật gân hoặc màu gradient bạn muốn. Đây là điều đầu tiên người dùng của bạn nhìn thấy khi họ mở ứng dụng của bạn.

Dành cho iOS

Mở ứng dụng của bạn bằng Xcode, Nhấp vào Người chạy> Assest.xcassets> LaunchImage, Bạn có thể thêm hình ảnh vào đây. Nếu bạn muốn chỉnh sửa hình ảnh màn hình khởi chạy vị trí nào sẽ giống hoặc trông giống như bạn có thể chỉnh sửa nó trên LaunchScreen.storyboard.

Dưới đây là các bước để định cấu hình màn hình giật gân trong cả hai nền tảng iOS và Android cho ứng dụng Flutter của bạn.

Nền tảng iOS

Tất cả các ứng dụng được gửi tới Apple App Store phải sử dụng bảng phân cảnh Xcode để cung cấp màn hình khởi chạy của ứng dụng. Hãy làm điều này trong 3 bước: -

Bước 1 : Mở ios / Runner.xcworkspace từ thư mục gốc của thư mục ứng dụng của bạn.

Bước 2 : Chọn Runner / Assets.xcassets từ Project Navigator và kéo hình ảnh khởi chạy của bạn ở mọi kích cỡ (2x, 3x, v.v.). Bạn cũng có thể tạo các kích thước hình ảnh khác nhau từ https://appicon.co/#image-sets

Bước 3 : Bạn có thể thấy tệp LaunchScreen.storyboard đang hiển thị hình ảnh được cung cấp, tại đây bạn cũng có thể thay đổi vị trí của hình ảnh bằng cách kéo hình ảnh. Để biết thêm thông tin, vui lòng xem tài liệu chính thức https://developer.apple.com/design/human-interface-guferences/ios/visual-design/launch-screen/

Nền tảng Android

Trong Android, màn hình khởi chạy được hiển thị trong khi ứng dụng Android của bạn khởi chạy. Hãy đặt màn hình khởi chạy này theo 3 bước: -

Bước 1 : Mở tệp android / app / src / main / res / drawable / launch_background.xml.

Bước 2 : Tại dòng số 4, bạn có thể chọn màu mong muốn: -

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

Bước 3 : Tại dòng số 10, bạn có thể thay đổi hình ảnh: -

android:src="@mipmap/launch_image"

Thế là xong, bạn đã hoàn thành! Chúc mừng mã hóa :)

Đối với
ứng dụng Android -> src -> main -> res -> drawble-> launch_background.xml và bỏ ghi chú khối nhận xét như thế này

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

Có bất kỳ lỗi nào xảy ra sau khi mã hóa như thế này
Sử dụng đồng bộ hóa với hệ thống trong studio android hoặc vô hiệu hóa bộ đệm và đặt lại. Điều này đã giải quyết vấn đề của tôi Trong chế độ gỡ lỗi rung mất một chút thời gian cho màn hình giật gân. Sau khi xây dựng, nó sẽ giảm như Android gốc

Flutter.dev đã đưa ra câu trả lời tốt nhất cho nó, đó không phải là lỗi cũng không phải là vấn đề, chỉ là cấu hình. Chỉ cần dành thời gian đọc và mọi thứ sẽ được giải quyết. Chúc mọi người có một ngày tốt lành.

https://flutter.dev/docs/development/ui/advified/Station-screen

Bạn có thể tạo nó theo hai cách

1. Chuyển đến gói gốc và một trang ban đầu. giống như trong gói Android gốc tạo ra một drawable
2. Tạo màn hình phi tiêu để hiển thị một thời gian

Tôi tìm thấy một lời giải thích đầy đủ để loại bỏ màn hình trắng và hiển thị màn hình giật gân ở đây

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