คุณจะเพิ่มหน้าจอสแปลชให้กับแอพพลิเคชั่น Flutter ได้อย่างไร? ควรโหลดและแสดงก่อนเนื้อหาอื่น ๆ ขณะนี้มีแฟลชสีสั้น ๆ ก่อนที่วิดเจ็ต Scaffold (home: X) จะโหลด
คุณจะเพิ่มหน้าจอสแปลชให้กับแอพพลิเคชั่น Flutter ได้อย่างไร? ควรโหลดและแสดงก่อนเนื้อหาอื่น ๆ ขณะนี้มีแฟลชสีสั้น ๆ ก่อนที่วิดเจ็ต Scaffold (home: X) จะโหลด
คำตอบ:
ฉันต้องการเพิ่มความสว่างให้กับวิธีการทำ Splash screen ใน Flutter
ฉันติดตามเล็กน้อยที่นี่และฉันเห็นว่าสิ่งต่าง ๆ ไม่ได้ดูแย่มากเกี่ยวกับ Splash Screen ใน Flutter
บางทีนักพัฒนาส่วนใหญ่ (เช่นฉัน) คิดว่าไม่มีหน้าจอ Splash ตามค่าเริ่มต้นใน Flutter และพวกเขาจำเป็นต้องทำอะไรบางอย่างเกี่ยวกับเรื่องนั้น มีหน้าจอ Splash แต่มีพื้นหลังสีขาวและไม่มีใครเข้าใจว่ามีหน้าจอเริ่มต้นสำหรับ iOS และ Android อยู่แล้วโดยค่าเริ่มต้น
สิ่งเดียวที่นักพัฒนาต้องทำคือวางภาพตราสินค้าในตำแหน่งที่ถูกต้องและหน้าจอเริ่มต้นจะเริ่มทำงานในลักษณะนั้น
นี่คือวิธีที่คุณทำได้ทีละขั้นตอน:
ครั้งแรกบน Android (เพราะเป็นแพลตฟอร์มโปรดของฉัน :))
ค้นหาโฟลเดอร์ "android" ในโครงการ Flutter ของคุณ
เรียกดูแอป -> src -> main -> โฟลเดอร์ res และวางรูปแบบทั้งหมดของภาพตราสินค้าของคุณในโฟลเดอร์ที่เกี่ยวข้อง ตัวอย่างเช่น:
ตามค่าเริ่มต้นในโฟลเดอร์ android จะไม่มี drawable-mdpi, drawable-hdpi ฯลฯ แต่เราสามารถสร้างได้หากต้องการ ด้วยเหตุนี้ภาพจึงต้องถูกวางไว้ในโฟลเดอร์ mipmap นอกจากนี้โค้ด XML เริ่มต้นเกี่ยวกับหน้าจอ Splash (ใน Android) จะใช้ @mipmap แทนทรัพยากร @drawable (คุณสามารถเปลี่ยนได้หากต้องการ)
ขั้นตอนสุดท้ายของ 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:
ค้นหาโฟลเดอร์ "ios" ในโครงการ Flutter ของคุณ
เรียกดู Runner -> Assets.xcassets -> LaunchImage.imageset ควรจะมี LaunchImage.png, LaunchImage@2x.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 ที่เหมาะสมพร้อมกับภาพลักษณ์ที่คุณเพิ่มเข้าไป
ขอบคุณ
Cannot resolve symbol '@mipmap/ic_launcher'
ใน Android Studio 3.1.1 (แม้จะสร้างแคชใหม่) อย่างไรก็ตามแอปรวบรวมและทำงานโดยไม่มีข้อผิดพลาดและแสดงกราฟิกตัวเรียกใช้งาน
หากคุณflutter create
ผ่านโครงการของคุณคุณสามารถทำตามขั้นตอนที่https://flutter.io/assets-and-images/#updating-the-launch-screen
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 ของคุณเอง
ยังไม่มีตัวอย่างที่ดี แต่คุณสามารถทำได้ด้วยตัวเองโดยใช้เครื่องมือดั้งเดิมสำหรับแต่ละแพลตฟอร์ม:
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
สำหรับ 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" />
วิธีที่ง่ายที่สุดในการเพิ่มหน้าจอเริ่มต้นในการกระพือปีกคือ imho แพ็คเกจนี้: https://pub.dev/packages/flutter_native_splash
เพิ่มการตั้งค่าของคุณไปยังไฟล์ 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
หลังจากเพิ่มการตั้งค่าของคุณแล้วให้เรียกใช้แพ็คเกจด้วย
flutter pub pub run flutter_native_splash:create
เมื่อแพ็คเกจเสร็จสิ้นการเรียกใช้หน้าจอเริ่มต้นของคุณก็พร้อมใช้งาน
คุณควรลองใช้โค้ดด้านล่างนี้ได้ผลสำหรับฉัน
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,
)),
),
);
}
}
ผู้ที่ได้รับข้อผิดพลาดเช่นไม่พบรูปภาพหลังจากใช้คำตอบที่ตรวจสอบแล้วตรวจสอบให้แน่ใจว่าคุณเพิ่ม@ mipmap / ic_launcherแทน@ mipmap / ic_launcher.png
ทั้ง @Collin Jackson และ @Sniper ถูกต้อง คุณสามารถทำตามขั้นตอนเหล่านี้เพื่อตั้งค่าอิมเมจเปิดตัวใน Android และ iOS ตามลำดับ จากนั้นใน MyApp () ของคุณใน initState () คุณสามารถใช้ Future.delayed เพื่อตั้งค่าตัวจับเวลาหรือเรียกใช้ API ใด ๆ จนกว่าการตอบกลับจะกลับมาจากอนาคตไอคอนการเปิดตัวของคุณจะปรากฏขึ้นจากนั้นเมื่อมีการตอบกลับคุณสามารถย้ายไปยังหน้าจอที่คุณต้องการไปหลังหน้าจอเริ่มต้นได้ คุณสามารถดูลิงค์นี้: Flutter Splash Screen
การเพิ่มหน้าที่เหมือนด้านล่างและการกำหนดเส้นทางอาจช่วยได้
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
คุณสามารถทำได้หลายวิธี แต่วิธีที่ง่ายที่สุดที่ฉันใช้คือ:
สำหรับไอคอนเปิดฉันใช้ไอคอน 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"
}
ทำให้แอปวัสดุของคุณเป็นแบบนี้
=> เพิ่มการพึ่งพา
=> นำเข้า '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,
);
}
}
ผลลัพธ์ของหน้าจอสุดท้ายเช่นนี้คุณสามารถเปลี่ยนวินาทีได้ตามความต้องการของคุณวงกลมจะเป็นวงกลมกลม
นี่เป็นวิธีที่ปราศจากข้อผิดพลาดและเป็นวิธีที่ดีที่สุดในการเพิ่มหน้าจอแบบไดนามิกใน 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")),
);
}
}
รหัสจาก 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,
)
);
}
}
ในกรณีที่คุณต้องการหน้าจอสแปลชรอง (หลังเนทีฟ) นี่คือตัวอย่างง่ายๆที่ใช้งานได้:
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 ช่วยให้คุณมีหน้าจอเริ่มต้นได้ตามค่าเริ่มต้น แต่มีปลั๊กอินจำนวนมากที่สามารถทำงานได้ หากคุณไม่ต้องการใช้ปลั๊กอินสำหรับงานและคุณกังวลว่าการเพิ่มปลั๊กอินใหม่อาจส่งผลต่อขนาดแอปของคุณ จากนั้นคุณสามารถทำเช่นนี้
สำหรับ Android
เปิด launch_background.xml จากนั้นคุณสามารถใส่ภาพหน้าจอเริ่มต้นหรือสีไล่ระดับที่คุณต้องการ นี่คือสิ่งแรกที่ผู้ใช้ของคุณเห็นเมื่อเปิดแอปของคุณ
สำหรับ IOS
เปิดแอปของคุณโดยใช้ Xcode คลิกที่ Runner> Assest.xcassets> LaunchImage คุณสามารถเพิ่มรูปภาพได้ที่นี่ หากคุณต้องการแก้ไขภาพหน้าจอเรียกใช้ตำแหน่งใดที่ควรใช้หรือมีลักษณะอย่างไรคุณสามารถแก้ไขได้ใน LaunchScreen.storyboard
ต่อไปนี้เป็นขั้นตอนในการกำหนดค่าหน้าจอเริ่มต้นทั้งในแพลตฟอร์ม 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 :)
สำหรับ
แอปAndroid -> src -> main -> res -> drawble-> launch_background.xml และยกเลิกการแสดงความคิดเห็นในบล็อกที่แสดงความคิดเห็นเช่นนี้
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" /></item>
มีใครเผชิญข้อผิดพลาดใด ๆ หลังจากการเข้ารหัสเช่นนี้
ใช้การซิงค์กับระบบใน android studio หรือทำให้แคชและรีเซ็ตไม่ถูกต้องสิ่งนี้ช่วยแก้ปัญหาของฉันได้ในโหมดดีบักกระพือใช้เวลาสักครู่สำหรับหน้าจอเริ่มต้นหลังจากสร้างแล้วจะลดลงเหมือน Android ดั้งเดิม
Flutter.dev ให้คำตอบที่ดีที่สุดอยู่แล้วนั่นไม่ใช่ข้อผิดพลาดหรือปัญหาเพียงแค่กำหนดค่า เพียงใช้เวลาอ่านและทุกอย่างจะคลี่คลาย ขอให้มีความสุขในทุกๆวันนะครับ
https://flutter.dev/docs/development/ui/advanced/splash-screen
คุณสามารถสร้างได้สองวิธี
ฉันพบคำอธิบายที่สมบูรณ์สำหรับการลบหน้าจอสีขาวและแสดงหน้าจอเริ่มต้นที่นี่
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),
),
);