flutter - 如何将带有图像和一些文本的基本启动画面添加到现有的flutter项目中

Question

如何向该现有项目添加包含图像和文本小部件的初始屏幕？
导入'package:flutter / material.dart';
导入'package:Travel / screens / home_screen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Safiri',
      debugShowCheckedModeBanner : false,
      theme: ThemeData(
        primaryColor: Color(0xFF3EBACE),
        accentColor: Color(0xFFD8ECF1),
        scaffoldBackgroundColor: Color(0xFFF3F5F7),
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    ); 
  }
}

Answer 1

在Android上，您只需更改android list 以添加初始屏幕Android > app > src > main > AndroidMainfets.xml

<meta-data
    android:name="io.flutter.embedding.android.SplashScreenDrawable"
    android:resource="@drawable/launch_background" />
        <!-- Theme to apply as soon as Flutter begins rendering frames -->

然后在 Android > app > src > main > res > drawable > launch_background.xml中创建一个文件launch_background(我认为它是在您第一次创建flutter项目时存在的)
它应该看起来像这样

<?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="@color/red" />

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash" />
    </item>
    <item  android:bottom="25dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/myText" />
    </item>
</layer-list>

如果启动画面是可绘制文件夹(hdpi，mdpi等)中的图像，或者如果您要使用与启动器相同的图像，则可以将其更改为 @mipmap/ic_launcher。 @color/red在 android/app/src/main/res/values/colors.xml中创建，您可以在其中定义要用作十六进制的所有颜色

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#F44336</color>
    <color name="white">#FFFFFF</color>
    <color name="yellow">#FFFF00</color>
    <color name="blueGrey">#37474F</color>
    <color name="NightBlue">#233446</color>
    <color name="grey">#212121</color>
    <color name="dark">#000000</color>
</resources>

对于文本，我相信没有将文本添加到初始屏幕的常规方法，因此也许只需创建一个带有文本的图像，然后执行与图标@ drawable / myText相同的操作
有关 flutter 中的初始屏幕的更多信息，请检查 Flutter Splash Screen