Flutter新手疑问：如何用Dart创建App闪屏？需遵循Android Studio惯例吗？

嗨～作为Flutter新手，你问的这个问题超实用——闪屏是用户打开App的第一印象，我来给你拆成两部分讲清楚：

一、用Dart代码实现基础闪屏 #

如果你想快速用Flutter代码实现带逻辑的闪屏（比如延迟跳转、加载初始化数据），可以按下面的步骤来：

• 步骤1：创建闪屏页面组件
  写一个StatefulWidget来控制闪屏的显示和跳转逻辑，示例代码如下：

  import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  
  class SplashScreen extends StatefulWidget {
    const SplashScreen({super.key});
  
    @override
    State<SplashScreen> createState() => _SplashScreenState();
  }
  
  class _SplashScreenState extends State<SplashScreen> {
    @override
    void initState() {
      super.initState();
      // 可选：隐藏状态栏，让闪屏更具沉浸感
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
      
      // 延迟2秒后跳转到首页，时间可以根据需求调整
      Future.delayed(const Duration(seconds: 2), () {
        Navigator.of(context).pushReplacement(
          MaterialPageRoute(builder: (context) => const HomeScreen()),
        );
      });
    }
  
    @override
    void dispose() {
      // 页面销毁时恢复状态栏显示
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Container(
          width: double.infinity,
          height: double.infinity,
          color: Colors.blue, // 替换成你的闪屏背景色
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 替换成你的App图标或Logo
              Image.asset(
                'assets/images/app_logo.png', // 记得在pubspec.yaml里配置资源路径
                width: 120,
                height: 120,
              ),
              const SizedBox(height: 20),
              const Text(
                '我的Flutter App',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
            ],
          ),
        ),
      );
    }
  }
  
  // 示例首页组件，替换成你自己的首页即可
  class HomeScreen extends StatelessWidget {
    const HomeScreen({super.key});
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: const Text('首页')),
        body: const Center(child: Text('欢迎使用！')),
      );
    }
  }
  

  注意：要把图标资源放在assets/images/文件夹下，然后在pubspec.yaml中添加资源配置：

  assets:
    - assets/images/app_logo.png
  

• 步骤2：设置闪屏为初始路由
  在main.dart里把闪屏设为App启动的第一个页面：

  void main() {
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Splash Demo',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const SplashScreen(), // 这里指定闪屏为初始页面
      );
    }
  }
  

二、是否需要遵循Android Studio的闪屏惯例？ #

答案是非常建议遵循！因为上面用Dart实现的闪屏，在App启动的最早期阶段（比如Android系统加载App的瞬间），还是会出现短暂的空白或系统默认启动页。这时候需要借助Android原生闪屏来填补这个间隙，让启动体验更流畅。

Android端原生闪屏的设置步骤（在Android Studio内操作）： #

1. 准备不同分辨率的闪屏图标，放在android/app/src/main/res下对应的drawable文件夹（比如drawable-hdpi、drawable-xhdpi等），也可以用Vector Asset Studio创建矢量图标。
2. 在res/drawable目录下创建splash_background.xml文件，定义闪屏的背景和图标：

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <!-- 闪屏背景色 -->
     <item android:drawable="@color/blue" />
     <!-- 居中显示的App图标 -->
     <item>
       <bitmap
         android:gravity="center"
         android:src="@drawable/app_logo" />
     </item>
   </layer-list>
   

3. 在res/values/styles.xml中添加闪屏专属主题：

   <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="android:windowBackground">@drawable/splash_background</item>
     <item name="android:windowFullscreen">true</item>
   </style>
   

4. 修改AndroidManifest.xml，把MainActivity的默认主题换成闪屏主题：

   <activity
     android:name=".MainActivity"
     android:exported="true"
     android:theme="@style/SplashTheme"> <!-- 这里设置闪屏主题 -->
     <intent-filter>
       <action android:name="android.intent.action.MAIN" />
       <category android:name="android.intent.category.LAUNCHER" />
     </intent-filter>
   </activity>
   

5. 最后在MainActivity的代码中（以Kotlin为例），记得在启动后切换回App的正常主题：

   override fun onCreate(savedInstanceState: Bundle?) {
     // 先切换回App主题
     setTheme(R.style.AppTheme)
     super.onCreate(savedInstanceState)
     // 其他初始化代码
   }
   

这样组合起来，用户打开App时会先看到Android原生闪屏，无缝过渡到Dart闪屏（或者直接跳转到首页，如果你不需要Dart层面的闪屏逻辑），整体体验会更顺滑。

内容的提问来源于stack exchange，提问作者FortuneCookie