Flutter启动画面插件flutter_native_splash_module的使用

Flutter启动画面插件flutter_native_splash_module的使用

flutter_native_splash 是一个易于使用的模块。

安装

  1. 如果您的 juneflow 项目不存在，请按照以下指南创建它。

  2. 打开终端并进入 juneflow 项目的根目录，输入以下命令：

    june add flutter_native_splash_module

  3. 然后，输入以下命令：

    dart run flutter_native_splash:create

完成上述步骤后，您将成功安装并初始化 flutter_native_splash_module 插件。接下来，您可以根据需要自定义启动画面。

自定义启动画面

安装完成后，您可以通过修改生成的配置文件来自定义启动画面。配置文件通常位于 lib/main.dart 或其他指定位置。以下是一个简单的示例，展示如何配置启动画面的颜色和图像。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3), () {
      FlutterNativeSplash.remove();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello World!'),
      ),
    );
  }
}

更多关于Flutter启动画面插件flutter_native_splash_module的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter启动画面插件flutter_native_splash_module的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_native_splash 是一个非常流行的 Flutter 插件，用于为 Flutter 应用程序添加原生的启动画面（Splash Screen）。它可以帮助你在应用程序启动时显示一个静态的启动画面，直到 Flutter 引擎完全初始化并准备好显示应用程序的 UI。

安装和使用 flutter_native_splash

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_native_splash 插件的依赖。

dependencies:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_native_splash: ^2.2.16

2. 配置启动画面

在 pubspec.yaml 文件中，添加 flutter_native_splash 的配置。你可以指定启动画面的背景颜色、图片、状态栏颜色等。

flutter_native_splash:
  color: "#42a5f5"  # 启动画面的背景颜色
  image: "assets/splash.png"  # 启动画面的图片
  android: true
  ios: true
  android_gravity: center  # 图片在 Android 上的位置
  ios_content_mode: scaleAspectFill  # 图片在 iOS 上的缩放模式

3. 生成启动画面配置

在终端中运行以下命令，生成启动画面的配置。

flutter pub run flutter_native_splash:create

这个命令会根据你在 pubspec.yaml 中的配置，生成相应的原生代码和资源文件。

4. 使用生成的启动画面

在运行上述命令后，flutter_native_splash 会自动为你的应用程序生成启动画面。你不需要在 Dart 代码中做任何额外的操作，启动画面会在应用程序启动时自动显示。

5. 自定义启动画面（可选）

如果你需要在启动画面显示后执行一些自定义逻辑，你可以使用 flutter_native_splash 提供的 API。

首先，在 main.dart 中导入 flutter_native_splash：

import 'package:flutter_native_splash/flutter_native_splash.dart';

然后，在 main 函数中，使用 preserve 方法保留启动画面，并在适当的时候移除它。

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 在适当的时候移除启动画面
    FlutterNativeSplash.remove();
    
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
回到顶部