Flutter多启动画面插件multiple_splash_screens的使用

Flutter多启动画面插件multiple_splash_screens的使用

特性

开始使用

使用方法

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: MainIntroScreen(
        // 第一阶段应用启动画面
        firstScreen: SplashModel(
            duration: const Duration(seconds: 2),
            child: const Center(child: FlutterLogo())), // 显示Flutter Logo持续2秒
        // 中间阶段设置应用名称
        secondScreen: SplashModel(
            duration: const Duration(seconds: 3),
            child: const Text("应用名称",
                style: TextStyle(
                    fontWeight: FontWeight.w900,
                    color: Colors.black,
                    fontSize: 28),
                textAlign: TextAlign.center)), // 显示应用名称持续3秒
        // 中间阶段设置应用Logo
        thirdScreen: SplashModel(
            duration: const Duration(seconds: 4), child: const FlutterLogo()), // 显示Flutter Logo持续4秒
        // 应用启动画面
        fourthScreen: SplashModel(
            backgroundColor: Colors.grey.shade200,
            colorButton: Colors.white,
            duration: const Duration(seconds: 6),
            child: const Center(child: FlutterLogo())), // 显示灰色背景下的Flutter Logo持续6秒
        // 引导页
        fiveScreen: SplashModel(
            duration: const Duration(seconds: 8), child: Container()), // 显示空容器持续8秒
        // 开始按钮文本
        startButtonChild: Container(
            margin: const EdgeInsets.symmetric(horizontal: 12),
            child: const Text("开始", textAlign: TextAlign.start)), // 按钮上的文本

        // 开始按钮图标
        startIconButton:
            const Center(child: Icon(Icons.forward, color: Colors.blue)), // 箭头图标
      ),
    );
  }
}

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

1 回复

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


multiple_splash_screens 是一个 Flutter 插件，用于在应用中实现多个启动画面（Splash Screen）。这在需要为不同用户场景或不同设备配置不同的启动画面时非常有用。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  multiple_splash_screens: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本用法

  1. 创建启动画面配置：你可以在 lib 目录下创建一个 splash_screens.dart 文件来定义多个启动画面。
import 'package:flutter/material.dart';
import 'package:multiple_splash_screens/multiple_splash_screens.dart';

class SplashScreen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Text('Splash Screen 1', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }
}

class SplashScreen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: Center(
        child: Text('Splash Screen 2', style: TextStyle(color: Colors.white, fontSize: 24)),
      ),
    );
  }
}

final splashScreens = [
  SplashScreenConfig(
    name: 'splash1',
    builder: (context) => SplashScreen1(),
    duration: Duration(seconds: 2),
  ),
  SplashScreenConfig(
    name: 'splash2',
    builder: (context) => SplashScreen2(),
    duration: Duration(seconds: 3),
  ),
];
  1. 在 main.dart 中使用 MultipleSplashScreens：
import 'package:flutter/material.dart';
import 'package:multiple_splash_screens/multiple_splash_screens.dart';
import 'splash_screens.dart';  // 导入刚刚创建的启动画面配置

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MultipleSplashScreens(
        splashScreens: splashScreens,
        onFinish: (context) {
          Navigator.pushReplacement(
            context,
            MaterialPageRoute(builder: (context) => HomeScreen()),
          );
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

配置启动画面

在 SplashScreenConfig 中，你可以配置每个启动画面的名称、构建器（builder）和持续时间（duration）。name 用于标识不同的启动画面，builder 是启动画面的构建函数，duration 是启动画面的显示时间。

启动画面切换

MultipleSplashScreens 会根据 splashScreens 列表中的顺序依次显示每个启动画面，并在所有启动画面显示完成后调用 onFinish 回调。在这个回调中，你可以导航到应用的主界面。

自定义启动画面逻辑

你可以根据需要自定义启动画面的逻辑。例如，可以根据用户登录状态、设备类型或其他条件来选择不同的启动画面。

final splashScreens = [
  if (isLoggedIn)
    SplashScreenConfig(
      name: 'loggedInSplash',
      builder: (context) => LoggedInSplash(),
      duration: Duration(seconds: 2),
    )
  else
    SplashScreenConfig(
      name: 'loggedOutSplash',
      builder: (context) => LoggedOutSplash(),
      duration: Duration(seconds: 3),
    ),
];
回到顶部