การเพิ่มหน้าจอเริ่มต้นให้กับแอปพลิเคชัน Flutter


144

คุณจะเพิ่มหน้าจอสแปลชให้กับแอพพลิเคชั่น Flutter ได้อย่างไร? ควรโหลดและแสดงก่อนเนื้อหาอื่น ๆ ขณะนี้มีแฟลชสีสั้น ๆ ก่อนที่วิดเจ็ต Scaffold (home: X) จะโหลด


ฉันไม่รู้ว่าเป็นวิธีที่ถูกต้องในการเพิ่มหน้าจอสแปลชโดยการตั้งเวลาที่กำหนดเองหรือไม่ฉันไม่ชอบให้โปรเซสเซอร์ไม่ได้ใช้งานทำไมไม่ทำงานบ้านบางอย่างเช่นการตรวจสอบไฟล์หรือไดเรกทอรีที่ต้องการหรือซิงค์บันทึกหรือสำรองไฟล์บางไฟล์ใน พื้นหลังและทำการสร้างตราสินค้าที่ด้านหน้าในเวลาเฉลี่ยหลังจากนั้น 3-4 วินาทีเป็นเวลามากสำหรับโปรเซสเซอร์
maheshmnj

1
ลิงค์นี้อธิบายวิธีทำ: flutter.dev/docs/development/ui/splash-screen/…
live-love

คำตอบ:


252

ฉันต้องการเพิ่มความสว่างให้กับวิธีการทำ Splash screen ใน Flutter

ฉันติดตามเล็กน้อยที่นี่และฉันเห็นว่าสิ่งต่าง ๆ ไม่ได้ดูแย่มากเกี่ยวกับ Splash Screen ใน Flutter

บางทีนักพัฒนาส่วนใหญ่ (เช่นฉัน) คิดว่าไม่มีหน้าจอ Splash ตามค่าเริ่มต้นใน Flutter และพวกเขาจำเป็นต้องทำอะไรบางอย่างเกี่ยวกับเรื่องนั้น มีหน้าจอ Splash แต่มีพื้นหลังสีขาวและไม่มีใครเข้าใจว่ามีหน้าจอเริ่มต้นสำหรับ iOS และ Android อยู่แล้วโดยค่าเริ่มต้น

สิ่งเดียวที่นักพัฒนาต้องทำคือวางภาพตราสินค้าในตำแหน่งที่ถูกต้องและหน้าจอเริ่มต้นจะเริ่มทำงานในลักษณะนั้น

นี่คือวิธีที่คุณทำได้ทีละขั้นตอน:

ครั้งแรกบน Android (เพราะเป็นแพลตฟอร์มโปรดของฉัน :))

  1. ค้นหาโฟลเดอร์ "android" ในโครงการ Flutter ของคุณ

  2. เรียกดูแอป -> src -> main -> โฟลเดอร์ res และวางรูปแบบทั้งหมดของภาพตราสินค้าของคุณในโฟลเดอร์ที่เกี่ยวข้อง ตัวอย่างเช่น:

  • ต้องวางภาพที่มีความหนาแน่น 1 ใน mipmap-mdpi
  • ต้องวางภาพที่มีความหนาแน่น 1.5 ใน mipmap-hdpi
  • ต้องวางภาพที่มีความหนาแน่น 2 ใน mipmap-xdpi
  • ต้องวางภาพที่มีความหนาแน่น 3 ใน mipmap-xxdpi
  • ต้องวางภาพที่มีความหนาแน่น 4 ใน mipmap-xxxdpi

ตามค่าเริ่มต้นในโฟลเดอร์ android จะไม่มี drawable-mdpi, drawable-hdpi ฯลฯ แต่เราสามารถสร้างได้หากต้องการ ด้วยเหตุนี้ภาพจึงต้องถูกวางไว้ในโฟลเดอร์ mipmap นอกจากนี้โค้ด XML เริ่มต้นเกี่ยวกับหน้าจอ Splash (ใน Android) จะใช้ @mipmap แทนทรัพยากร @drawable (คุณสามารถเปลี่ยนได้หากต้องการ)

  1. ขั้นตอนสุดท้ายของ Android คือการยกเลิกการใส่เครื่องหมายของโค้ด XML ในไฟล์ drawable / launch_background.xml เรียกดูแอป -> src -> main -> res-> drawable และเปิด launch_background.xml ภายในไฟล์นี้คุณจะเห็นว่าเหตุใดพื้นหลังของหน้าจอ Slash จึงเป็นสีขาว ในการใช้อิมเมจแบรนด์ที่เราวางไว้ในขั้นตอนที่ 2 เราต้องยกเลิกการใส่เครื่องหมายของโค้ด XML ในไฟล์ launch_background.xml ของคุณ หลังจากการเปลี่ยนแปลงรหัสควรมีลักษณะดังนี้:

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

โปรดทราบว่าเราแสดงความคิดเห็นเกี่ยวกับโค้ด XML สำหรับพื้นหลังสีขาวและยกเลิกการใส่ความคิดเห็นรหัสเกี่ยวกับภาพ mipmap หากมีใครสนใจไฟล์ launch_background.xml จะใช้ในไฟล์ styles.xml

ประการที่สองบน iOS:

  1. ค้นหาโฟลเดอร์ "ios" ในโครงการ Flutter ของคุณ

  2. เรียกดู Runner -> Assets.xcassets -> LaunchImage.imageset ควรจะมี LaunchImage.png, LaunchImage@2x.png เป็นต้นตอนนี้คุณต้องแทนที่รูปภาพเหล่านี้ด้วยรูปแบบของภาพลักษณ์แบรนด์ของคุณ ตัวอย่างเช่น:

  • ภาพที่มีความหนาแน่น 1 จำเป็นต้องแทนที่ LaunchImage.png
  • ภาพที่มีความหนาแน่น 2 จำเป็นต้องแทนที่ LaunchImage@2x.png
  • ภาพที่มีความหนาแน่น 3 จำเป็นต้องแทนที่ LaunchImage@3x.png
  • ภาพที่มีความหนาแน่น 4 จำเป็นต้องแทนที่ LaunchImage@4x.png

ถ้าฉันไม่ผิด LaunchImage@4x.png ไม่มีอยู่ตามค่าเริ่มต้น แต่คุณสามารถสร้างได้อย่างง่ายดาย หากไม่มี LaunchImage@4x.png คุณต้องประกาศในไฟล์ Contents.json ด้วยซึ่งอยู่ในไดเร็กทอรีเดียวกันเช่นเดียวกับรูปภาพ หลังจากเปลี่ยนไฟล์ Contents.json ของฉันจะมีลักษณะดังนี้:

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

นั่นควรเป็นสิ่งที่คุณต้องการในครั้งต่อไปเมื่อคุณเรียกใช้แอพของคุณบน Android หรือ iOS คุณควรมี Splash Screen ที่เหมาะสมพร้อมกับภาพลักษณ์ที่คุณเพิ่มเข้าไป

ขอบคุณ


4
ฉันพบข้อผิดพลาดCannot resolve symbol '@mipmap/ic_launcher'ใน Android Studio 3.1.1 (แม้จะสร้างแคชใหม่) อย่างไรก็ตามแอปรวบรวมและทำงานโดยไม่มีข้อผิดพลาดและแสดงกราฟิกตัวเรียกใช้งาน
IanB

1
ฉันมีปัญหาเดียวกันอย่างไรก็ตามฉันไม่สามารถเรียกใช้งานได้เนื่องจากขณะรันไทม์มันขัดข้องและบอกว่ารูปภาพหายไป แต่ไม่สามารถแก้ไข mipmap ได้ด้วยเหตุผลบางประการ ใครมีความคิดว่าทำไมถึงเป็นเช่นนี้?
carlosx2

1
สวัสดีพวกคุณไม่แน่ใจว่าทำไมคุณถึงมีปัญหานี้ แต่สำหรับฉันดูเหมือนปัญหาการซิงค์โปรเจ็กต์ (ไม่มีเหตุผลอื่นใดที่จะไม่พบทรัพยากรหากมี) ฉันไม่ทราบวิธีแก้ไขเพราะฉันไม่เคยมีปัญหานี้ แต่พยายามซิงค์โปรเจ็กต์ล้างสร้างใหม่ ฯลฯ สิ่งที่เป็นไปได้ใน IDEA ของคุณ ลองใช้ทรัพยากรในโฟลเดอร์ที่วาดได้และแทนที่คำอธิบายประกอบ mipmap ด้วยคำอธิบายประกอบแบบวาดได้ ตอนนี้ฉันแค่เดา ​​:)
Stoycho Andreev

1
อยากรู้ว่าทำไมคุณถึงเพิ่มภาพ 4x ดูเหมือนว่า XCode จะคาดหวังเพียง 3x มีเหตุผลที่คุณเพิ่ม 4x หรือไม่?
sbilstein

3
เอกสารอย่างเป็นทางการครอบคลุมถึงเรื่องนี้
rmalviya

28

หากคุณflutter createผ่านโครงการของคุณคุณสามารถทำตามขั้นตอนที่https://flutter.io/assets-and-images/#updating-the-launch-screen


ฉันเป็นคนเดียวที่ทำให้ไอคอนของเขาถูกวางโดยการทำหน้าจอเริ่มต้นและ / หรือทำให้หน้าจอเริ่มต้นของเขาหายไปเมื่ออัปเดตไอคอน? ใช้วิธีนี้เป๊ะ ๆ ... ?
ChrisH

22

Flutter เป็นวิธีที่ง่ายกว่าในการเพิ่ม Splash Screen ให้กับแอปพลิเคชันของเรา ก่อนอื่นเราต้องออกแบบหน้าพื้นฐานก่อนเมื่อเราออกแบบหน้าจอแอปอื่น ๆ คุณต้องทำให้เป็นStatefulWidgetเนื่องจากสถานะของสิ่งนี้จะเปลี่ยนไปในไม่กี่วินาที

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

ลอจิก ภายในinitState ()เรียกTimer ()ด้วยระยะเวลาตามที่คุณต้องการฉันทำมัน 3 วินาทีเมื่อเสร็จแล้วให้ดันเนวิเกเตอร์ไปที่หน้าจอหลักของแอปพลิเคชันของเรา

หมายเหตุ:แอปพลิเคชันควรแสดงหน้าจอเริ่มต้นเพียงครั้งเดียวผู้ใช้ไม่ควรกลับไปที่หน้าจออีกครั้งเมื่อกดปุ่มย้อนกลับ สำหรับสิ่งนี้เราใช้Navigator.pushReplacement ()มันจะย้ายไปที่หน้าจอใหม่และลบหน้าจอก่อนหน้าออกจากสแต็กประวัติการนำทาง

เพื่อความเข้าใจที่ดียิ่งขึ้นโปรดไปที่Flutter: ออกแบบ Splash Screen ของคุณเอง


7
หน้าจอเริ่มต้นสีขาวจะยังคงแสดงเป็นเวลา 1+ วินาทีก่อนที่จะแสดงหน้าจอแบบกำหนดเองนี้ ต้องแทนที่ในโครงการ xcode และ android ที่สร้างขึ้นเพื่อกำจัดมัน
d3vtoolsmith

ใช่. หน้าจอ spalsh เริ่มต้นใน iOS และ Android จะปรากฏขึ้นเสมอหน้าจอสแปลชที่กระพือปีกนี้เพิ่มเติมจากนั้น
Mahesh Peri

ตัวอย่างนี้ไม่น่าเชื่อถือ .... จะเป็นอย่างไรหากแอปของคุณโหลดนานกว่า 3 วินาทีเนื่องจากสาเหตุต่างๆเช่นการเชื่อมต่อเครือข่าย
emanuel sanga

สำหรับการปรับแต่งเพิ่มเติมฉันสนับสนุนคำตอบนี้มากขึ้น ฉันต้องการดำเนินการขอ HTTP ก่อนในขณะที่แสดงหน้าจอเริ่มต้น วิธีนี้ง่ายกว่ามาก
Idris Stack

17

ยังไม่มีตัวอย่างที่ดี แต่คุณสามารถทำได้ด้วยตัวเองโดยใช้เครื่องมือดั้งเดิมสำหรับแต่ละแพลตฟอร์ม:

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

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

สมัครรับข่าวสาร8147สำหรับการอัปเดตโค้ดตัวอย่างสำหรับหน้าจอเริ่มต้น หากการกะพริบสีดำระหว่างหน้าจอเริ่มต้นและแอปบน iOS รบกวนคุณให้สมัครรับข้อมูลอัปเดตฉบับ 8127

แก้ไข: ณ วันที่ 31 สิงหาคม 2017 การสนับสนุนที่ดีขึ้นสำหรับหน้าจอเริ่มต้นพร้อมใช้งานแล้วในเทมเพลตโครงการใหม่ ดู# 11505


มีตัวอย่างวิธีการเพิ่มหน้าจอสแปลชจริงหรือไม่ เมื่อฉันเริ่มเทมเพลตใหม่ฉันไม่เห็นหน้าจอสแปลช
Ride Sun

@RideSun โปรดดูคำตอบของฉัน
Stoycho Andreev

1
ฉันจะทำให้หน้าจอเริ่มต้นนานขึ้นได้อย่างไร ฉันควรเปลี่ยนรหัสในกิจกรรมหรือไม่
zero.zero.seven

แต่ฉันต้องการมากกว่านี้เช่นเมื่ออยู่ในระหว่างการสาดการสร้าง / นำเข้าฐานข้อมูลในเครื่องจากนั้นจะสิ้นสุดการสาดเท่านั้น
ติดอยู่

14

สำหรับ Android ไปที่android> app> src> main> res> drawable> launcher_background.xml

ตอนนี้ยกเลิกการแสดงความคิดเห็นและแทนที่@ mipmap / launch_imageด้วยตำแหน่งรูปภาพของคุณ

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

คุณสามารถเปลี่ยนสีของหน้าจอได้ที่นี่ -

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

สิ่งนี้ใช้ได้ผลสำหรับฉัน ... แต่ส่วน iOS ... เล่นได้ไม่ดีนัก
IrishGringo

1
ตรวจสอบสิ่งนี้ - flutter.io/assets-and-images/#updating-the-launch-screen
Smruti Ranjan Rana

ฉันคิดออก ... เห็นได้ชัดว่าอิมเมจ iOS ไม่ดี ทั้ง iOS และ ANDROID ทำงานได้อย่างสมบูรณ์แบบแล้ว สัญญาณเตือนที่ผิดพลาด
IrishGringo

@SmrutiRanjanRana ขนาดที่เหมาะสำหรับภาพนี้คืออะไร?
Mattias

1
คำตอบนี้จะเป็นประโยชน์มากขึ้นหากมีตัวอย่างตำแหน่งของรูปภาพ มิฉะนั้นผู้ใช้จะต้องเดาว่าจะเพิ่มเส้นทางอย่างไร
Robin Manoli

13

วิธีที่ง่ายที่สุดในการเพิ่มหน้าจอเริ่มต้นในการกระพือปีกคือ imho แพ็คเกจนี้: https://pub.dev/packages/flutter_native_splash

ป้อนคำอธิบายภาพที่นี่

คู่มือการติดตั้ง (โดยผู้เขียนแพ็คเกจ):

1. การตั้งค่าหน้าจอเริ่มต้น

เพิ่มการตั้งค่าของคุณไปยังไฟล์ pubspec.yaml ของโปรเจ็กต์หรือสร้างไฟล์ในโฟลเดอร์โปรเจ็กต์รูทชื่อ flutter_native_splash.yaml ด้วยการตั้งค่าของคุณ

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

รูปภาพต้องเป็นไฟล์ png

คุณสามารถใช้ # สีได้เช่นกัน color: "# 42a5f5" คุณยังสามารถตั้งค่า android หรือ ios เป็น false ได้หากคุณไม่ต้องการสร้างหน้าจอเริ่มต้นสำหรับแพลตฟอร์มเฉพาะ

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

ในกรณีที่ภาพของคุณควรใช้หน้าจอที่มีอยู่ทั้งหมด (ความกว้างและความสูง) คุณสามารถใช้คุณสมบัติเติม

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

หมายเหตุ: คุณสมบัติการเติมยังไม่ได้ใช้กับหน้าจอเริ่มต้นของ iOS

หากคุณต้องการปิดใช้งานสแปลชสกรีนแบบเต็มหน้าจอบน Android คุณสามารถใช้คุณสมบัติ android_disable_fullscreen

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

2. เรียกใช้แพ็คเกจ

หลังจากเพิ่มการตั้งค่าของคุณแล้วให้เรียกใช้แพ็คเกจด้วย

flutter pub pub run flutter_native_splash:create เมื่อแพ็คเกจเสร็จสิ้นการเรียกใช้หน้าจอเริ่มต้นของคุณก็พร้อมใช้งาน


8

คุณควรลองใช้โค้ดด้านล่างนี้ได้ผลสำหรับฉัน

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

คุณช่วยโพสต์โค้ดที่สมบูรณ์ได้ไหม (โค้ดที่เราสามารถรันแยกกันได้โดยไม่จำเป็นต้องกำหนดตัวแปร) หรือลิงค์ github
biniam

8

ผู้ที่ได้รับข้อผิดพลาดเช่นไม่พบรูปภาพหลังจากใช้คำตอบที่ตรวจสอบแล้วตรวจสอบให้แน่ใจว่าคุณเพิ่ม@ mipmap / ic_launcherแทน@ mipmap / ic_launcher.png


IDE ของคุณจะแจ้งให้คุณทราบเมื่อคุณวางเคอร์เซอร์บนข้อผิดพลาด
Ojonugwa Jude Ochalifu

7

ทั้ง @Collin Jackson และ @Sniper ถูกต้อง คุณสามารถทำตามขั้นตอนเหล่านี้เพื่อตั้งค่าอิมเมจเปิดตัวใน Android และ iOS ตามลำดับ จากนั้นใน MyApp () ของคุณใน initState () คุณสามารถใช้ Future.delayed เพื่อตั้งค่าตัวจับเวลาหรือเรียกใช้ API ใด ๆ จนกว่าการตอบกลับจะกลับมาจากอนาคตไอคอนการเปิดตัวของคุณจะปรากฏขึ้นจากนั้นเมื่อมีการตอบกลับคุณสามารถย้ายไปยังหน้าจอที่คุณต้องการไปหลังหน้าจอเริ่มต้นได้ คุณสามารถดูลิงค์นี้: Flutter Splash Screen


1
โปรดเมื่อลิงก์ไปยังหน้าอื่นจาก SO โปรดโพสต์ส่วนตอบของเนื้อหาที่นี่เพื่อหลีกเลี่ยงลิงก์ที่ไม่สมบูรณ์
rak007

4

การเพิ่มหน้าที่เหมือนด้านล่างและการกำหนดเส้นทางอาจช่วยได้

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

หากต้องการติดตามดู: https://www.youtube.com/watch?v=FNBuo-7zg2Q


4

คุณสามารถทำได้หลายวิธี แต่วิธีที่ง่ายที่สุดที่ฉันใช้คือ:

สำหรับไอคอนเปิดฉันใช้ไอคอน Flutter Library Flutter Launcher

สำหรับ Custom Splash Screenฉันสร้างความละเอียดหน้าจอที่แตกต่างกันแล้วเพิ่มภาพสแปลชในโฟลเดอร์ mipmap ตามความละเอียดสำหรับ Android

ส่วนสุดท้ายคือการปรับ launch_background.xml ในโฟลเดอร์ drawable ในโฟลเดอร์ res ใน Android

เพียงแค่เปลี่ยนรหัสของคุณให้มีลักษณะดังนี้:

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

มีนักพัฒนาเพียงไม่กี่คนที่ฉันเห็นว่าเพิ่ม Splash เป็น drawable ฉันลองแล้ว แต่ยังไงก็ตามการสร้างล้มเหลวใน Flutter 1.0.0 และ Dart SDK 2.0+ ดังนั้นฉันชอบที่จะเพิ่มสแปลชในส่วนบิตแมป

การสร้างหน้าจอ Splash ของ iOS นั้นค่อนข้างง่ายกว่า

ในโฟลเดอร์ Runner ใน iOS เพียงอัปเดตไฟล์ LaunchImage.png ด้วยภาพหน้าจอ Splash ที่กำหนดเองซึ่งมีชื่อเดียวกับ LaunchImage.png @ 2x, @ 3x, @ 4x

นอกจากนี้ฉันรู้สึกดีที่มีภาพ 4x เช่นกันใน LaunchImage.imageset เพียงอัปเดตโค้ดของคุณใน Content.json ด้วยบรรทัดต่อไปนี้ต่ำกว่ามาตราส่วน 3x เพื่อเพิ่มตัวเลือกมาตราส่วน 4x:

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

4

ทำให้แอปวัสดุของคุณเป็นแบบนี้

=> เพิ่มการพึ่งพา

=> นำเข้า '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,
    );
  }
}

ผลลัพธ์ของหน้าจอสุดท้ายเช่นนี้คุณสามารถเปลี่ยนวินาทีได้ตามความต้องการของคุณวงกลมจะเป็นวงกลมกลม

ป้อนคำอธิบายภาพที่นี่


เพิ่มการอ้างอิง => dynamic_theme: ^ 1.0.1
แชมป์ 96k

ไม่มีการนำเข้าสำหรับ SplashScreen
Tuss

ใช่ถูกต้องมีหลายวิธีในการทำเช่นนั้น แต่ในคำตอบฉันจะบอกคุณว่าคุณสามารถเพิ่มหน้าจอสแปลชด้วยความช่วยเหลือของแพ็คเกจนี้ได้อย่างไร pub.dev/packages/dynamic_theme
แชมป์ 96k

4

นี่เป็นวิธีที่ปราศจากข้อผิดพลาดและเป็นวิธีที่ดีที่สุดในการเพิ่มหน้าจอแบบไดนามิกใน 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")),
    );
  }
}

3

รหัสจาก Jaldhi Bhatt ใช้ไม่ได้กับฉัน

Flutter พ่น ' การดำเนินการเนวิเกเตอร์ที่ร้องขอด้วยบริบทที่ไม่รวมเนวิเกเตอร์ '

ฉันคงรหัสห่อภายในองค์ประกอบของผู้บริโภคนาวิเกเตอร์ขององค์ประกอบที่เริ่มต้นบริบท Navigator ใช้เส้นทางอื่นที่กล่าวถึงในนี้บทความ

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

2
ช่วยเพิ่มคำอธิบายด้วยได้ไหม บล็อกรหัสธรรมดาเพียงอย่างเดียวไม่ได้ให้ข้อมูลทั้งหมด
CertainPerformance

3

ในกรณีที่คุณต้องการหน้าจอสแปลชรอง (หลังเนทีฟ) นี่คือตัวอย่างง่ายๆที่ใช้งานได้:

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

3

Flutter ช่วยให้คุณมีหน้าจอเริ่มต้นได้ตามค่าเริ่มต้น แต่มีปลั๊กอินจำนวนมากที่สามารถทำงานได้ หากคุณไม่ต้องการใช้ปลั๊กอินสำหรับงานและคุณกังวลว่าการเพิ่มปลั๊กอินใหม่อาจส่งผลต่อขนาดแอปของคุณ จากนั้นคุณสามารถทำเช่นนี้

สำหรับ Android

เปิด launch_background.xml จากนั้นคุณสามารถใส่ภาพหน้าจอเริ่มต้นหรือสีไล่ระดับที่คุณต้องการ นี่คือสิ่งแรกที่ผู้ใช้ของคุณเห็นเมื่อเปิดแอปของคุณ ป้อนคำอธิบายภาพที่นี่

สำหรับ IOS

เปิดแอปของคุณโดยใช้ Xcode คลิกที่ Runner> Assest.xcassets> LaunchImage คุณสามารถเพิ่มรูปภาพได้ที่นี่ หากคุณต้องการแก้ไขภาพหน้าจอเรียกใช้ตำแหน่งใดที่ควรใช้หรือมีลักษณะอย่างไรคุณสามารถแก้ไขได้ใน LaunchScreen.storyboard

ป้อนคำอธิบายภาพที่นี่


3

ต่อไปนี้เป็นขั้นตอนในการกำหนดค่าหน้าจอเริ่มต้นทั้งในแพลตฟอร์ม IOS และ Android สำหรับแอป Flutter ของคุณ

แพลตฟอร์ม iOS

แอพทั้งหมดที่ส่งไปยัง Apple App Store ต้องใช้สตอรี่บอร์ด Xcode เพื่อแสดงหน้าจอเปิดใช้งานแอพ มาทำสิ่งนี้ใน 3 ขั้นตอน: -

ขั้นตอนที่ 1 : เปิด ios / Runner.xcworkspace จากรากของไดเรกทอรีแอปของคุณ

ขั้นตอนที่ 2 : เลือก Runner / Assets.xcassets จาก Project Navigator และลากภาพเปิดตัวทุกขนาด (2x, 3x ฯลฯ ) คุณยังสามารถสร้างภาพขนาดต่างๆได้จากhttps://appicon.co/#image-sets

ป้อนคำอธิบายภาพที่นี่

ขั้นตอนที่ 3 : คุณสามารถเห็นไฟล์ LaunchScreen.storyboard กำลังแสดงภาพที่ให้มาที่นี่คุณยังสามารถเปลี่ยนตำแหน่งของรูปภาพได้โดยเพียงแค่ลากรูปภาพ สำหรับข้อมูลเพิ่มเติมโปรดดูเอกสารอย่างเป็นทางการhttps://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/

ป้อนคำอธิบายภาพที่นี่

แพลตฟอร์ม Android

ใน Android หน้าจอเริ่มต้นจะแสดงขึ้นในขณะที่แอป Android ของคุณเริ่มต้น มาตั้งค่าหน้าจอเปิดตัวนี้ใน 3 ขั้นตอน: -

ขั้นตอนที่ 1 : เปิดไฟล์ android / app / src / main / res / drawable / launch_background.xml

ขั้นตอนที่ 2 : ที่บรรทัดหมายเลข 4 คุณสามารถเลือกสีที่ต้องการได้: -

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

ขั้นตอนที่ 3 : ที่บรรทัดหมายเลข 10 คุณสามารถเปลี่ยนภาพได้: -

android:src="@mipmap/launch_image"

ป้อนคำอธิบายภาพที่นี่

เสร็จแล้ว! Happy Coding :)


0

สำหรับ
แอปAndroid -> src -> main -> res -> drawble-> launch_background.xml และยกเลิกการแสดงความคิดเห็นในบล็อกที่แสดงความคิดเห็นเช่นนี้

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

มีใครเผชิญข้อผิดพลาดใด ๆ หลังจากการเข้ารหัสเช่นนี้
ใช้การซิงค์กับระบบใน android studio หรือทำให้แคชและรีเซ็ตไม่ถูกต้องสิ่งนี้ช่วยแก้ปัญหาของฉันได้ในโหมดดีบักกระพือใช้เวลาสักครู่สำหรับหน้าจอเริ่มต้นหลังจากสร้างแล้วจะลดลงเหมือน Android ดั้งเดิม


0

Flutter.dev ให้คำตอบที่ดีที่สุดอยู่แล้วนั่นไม่ใช่ข้อผิดพลาดหรือปัญหาเพียงแค่กำหนดค่า เพียงใช้เวลาอ่านและทุกอย่างจะคลี่คลาย ขอให้มีความสุขในทุกๆวันนะครับ

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


ดูเหมือนจะไม่เกี่ยวข้องอีกต่อไปเนื่องจากคำตอบเดียวกันนี้ได้ให้ไว้แล้วเมื่อวันที่ 9 เมษายน
Keimeno

แต่ของฉันเป็นวิธีที่ตรงประเด็นมากกว่าแบบอักษรที่ดีที่สุด
Fabrício Justo

0

คุณสามารถสร้างได้สองวิธี

  1. ไปที่แพ็กเกจดั้งเดิมและหน้าเริ่มต้น เช่นเดียวกับในแพ็คเกจ Native Android สร้างสิ่งที่วาดได้
  2. สร้างหน้าจอโผเพื่อแสดงในบางครั้ง

ฉันพบคำอธิบายที่สมบูรณ์สำหรับการลบหน้าจอสีขาวและแสดงหน้าจอเริ่มต้นที่นี่


-2
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),
    ),
  );
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.