Flutter自定义启动页插件custom_splash的使用

Custom Splash Screen介绍

一个用于自定义启动页的Flutter插件，可以更改启动页的Logo图标、Logo动画以及启动页背景颜色。（基于动画启动页进行定制）

使用该插件

获取库

需要做的事情

1. 获取你的应用Logo或图片。
2. 准备在启动页显示时执行的操作（如初始化数据库、SharedPreferences、Firebase等）。
3. 启动页之后要展示的屏幕。
4. 启动页的持续时间。

导入插件

import 'package:custom_splash/custom_splash.dart';

显示固定时长的启动页

type: CustomSplashType.StaticDuration

在main函数中，将home设置为SplashScreen(_)，参数如下：

• imagePath: 应用Logo或图片路径
• backGroundColor（可选，默认值：白色）：背景颜色（如Colors.deepOrange或Color(0xfffc6042)）
• animationEffect（可选，默认值：'fade-in'）：更改Logo的动画效果。支持的效果有：'fade-in', 'zoom-in', 'zoom-out', 'top-down'。
• logoSize（可选，默认值：250）：自定义Logo的大小
• home: 启动页后的展示页面
• duration: 启动页的持续时间（以毫秒为单位）
• type

示例代码：

runApp(MaterialApp(
    home: CustomSplash(
        imagePath: 'assets/flutter_icon.png', // Logo路径
        backGroundColor: Colors.deepOrange, // 背景颜色
        animationEffect: 'zoom-in', // 动画效果
        logoSize: 200, // Logo大小
        home: MyApp(), // 启动页后的页面
        customFunction: duringSplash, // 后台执行的函数
        duration: 2500, // 持续时间
        type: CustomSplashType.StaticDuration, // 类型
        outputAndHome: op, // 输出结果与对应的页面
    ),
));

在后台执行函数并在根据返回值导航到不同页面

type: CustomSplashType.BackgroundProcess

创建一个函数对象，在启动页显示时执行后台操作

Function duringSplash = () {
  print('Something background process');
  int a = 123 + 23;
  print(a);

  if (a > 100)
    return 1;
  else
    return 2;
};

根据函数返回值设置不同的导航目标

// 设置返回值与对应的页面映射
Map<int, Widget> op = {1: Home(), 2: HomeSt()};

在main函数中，将home设置为SplashScreen(_)，参数如下：

• imagePath: 应用Logo或图片路径
• home: 启动页后的展示页面
• customFunction: 上述编写的函数
• duration: 启动页的持续时间（以毫秒为单位）
• type
• output value of customFunction and home screen to navigate(Map function)

示例代码：

runApp(MaterialApp(
    home: CustomSplash(
        imagePath: 'assets/flutter_icon.png',
        backGroundColor: Colors.deepOrange,
        animationEffect: 'zoom-in',
        logoSize: 200,
        home: MyApp(),
        customFunction: duringSplash,
        duration: 2500,
        type: CustomSplashType.StaticDuration,
        outputAndHome: op,
    ),
));

完整示例代码

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

void main() {
  Function duringSplash = () {
    print('Something background process');
    int a = 123 + 23;
    print(a);

    if (a > 100)
      return 1;
    else
      return 2;
  };

  Map<int, Widget> op = {1: Home(), 2: HomeSt()};

  runApp(MaterialApp(
    home: CustomSplash(
      imagePath: 'assets/flutter_icon.png', // Logo路径
      backGroundColor: Colors.deepOrange, // 背景颜色
      animationEffect: 'zoom-in', // 动画效果
      logoSize: 200, // Logo大小
      home: MyApp(), // 启动页后的页面
      customFunction: duringSplash, // 后台执行的函数
      duration: 2500, // 持续时间
      type: CustomSplashType.StaticDuration, // 类型
      outputAndHome: op, // 输出结果与对应的页面
    ),
  ));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/lamp-product.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: null /* add child content here */,
        ),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

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

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

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