Flutter原生启动画面插件flutter_native_splash的使用

当您的应用程序打开时，在Flutter加载之前，会有短暂的时间显示默认的白色启动画面。flutter_native_splash插件可以帮助您自定义iOS、Android和Web平台上的启动画面背景颜色和启动图像，并支持深色模式、全屏以及平台特定选项。

一、功能亮点

• 支持GIF图片在Web端。
• 可以保持启动画面直到应用初始化完成，无需额外的二级启动画面。

二、使用方法

1. 添加依赖

首先，在项目的pubspec.yaml文件中添加flutter_native_splash依赖：

dependencies:
  flutter_native_splash: ^2.4.4

然后执行flutter pub get命令来获取依赖包。

2. 设置启动画面

编辑pubspec.yaml或创建一个名为flutter_native_splash.yaml的新文件来自定义启动画面配置。以下是一个简单的例子：

flutter_native_splash:
  color: "#42a5f5"
  image: assets/splash.png
  branding: assets/dart.png
  android_12:
    image: assets/android12splash.png
    color: "#42a5f5"
    icon_background_color: "#111111"

更多配置选项可以参考官方文档。

3. 运行生成命令

保存配置后，在终端运行以下命令生成启动画面：

dart run flutter_native_splash:create

如果您将配置放在了单独的YAML文件中，请指定路径：

dart run flutter_native_splash:create --path=path/to/my/file.yaml

4. 初始化设置（可选）

如果希望启动画面在应用初始化期间保持可见，可以在main.dart中调用preserve()和remove()方法：

import 'package:flutter/material.dart';
import 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    initialization();
  }

  void initialization() async {
    print('ready in 3...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 2...');
    await Future.delayed(const Duration(seconds: 1));
    print('ready in 1...');
    await Future.delayed(const Duration(seconds: 1));
    print('go!');
    FlutterNativeSplash.remove();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

这段代码展示了如何在应用初始化完成后移除启动画面。

三、注意事项

• 对于Android 12及以上版本，启动画面处理方式有所不同，请确保按照官方指南进行配置。
• 如果遇到问题，如“module not found”，请尝试在iOS项目目录下运行pod install命令。
• 确保没有同时设置了color和background_image参数，二者只能选择其一。
• 深色模式下的配置如果不指定，则会继承浅色模式的配置。

通过以上步骤，您可以轻松地为Flutter应用添加个性化的启动画面。如果有任何疑问或者需要进一步的帮助，请随时查阅官方文档。