Flutter启动画面插件easy_splash_screen的使用

Easy Splash Screen 是一个Flutter插件，用于在应用中轻松实现启动画面（Splash Screen）功能。它允许开发者通过简单的配置和代码，快速集成出一个美观且功能丰富的启动页。

使用方法

添加依赖

首先，在你的 pubspec.yaml 文件中添加 easy_splash_screen 作为依赖：

dependencies:
  flutter:
    sdk: flutter
  easy_splash_screen: ^latest_version # 请用实际版本号替换 latest_version

然后执行 flutter pub get 来安装这个包。

实现启动页

时间基础的启动页

如果你希望启动页基于固定的时间间隔后跳转到主页面，可以按照如下方式实现：

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

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  Widget build(BuildContext context) {
    return EasySplashScreen(
      logo: Image.network('https://cdn4.iconfinder.com/data/icons/logos-brands-5/24/flutter-512.png'),
      title: Text(
        "Title",
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      backgroundColor: Colors.grey.shade400,
      showLoader: true,
      loadingText: Text("Loading..."),
      navigator: HomePage(),
      durationInSeconds: 5, // 设置为需要停留的时间，单位秒
    );
  }
}

Future 基础的启动页

如果你想根据异步操作的结果来决定跳转的目标页面，比如进行API调用或自动登录等，则可以采用Future基础的方式：

import 'dart:async';
import 'package:easy_splash_screen/easy_splash_screen.dart';
import 'package:flutter/material.dart';

class SplashFuturePage extends StatefulWidget {
  @override
  _SplashFuturePageState createState() => _SplashFuturePageState();
}

class _SplashFuturePageState extends State<SplashFuturePage> {
  Future<Widget> futureCall() async {
    // 这里可以放置任何异步逻辑，例如网络请求、数据库查询等
    await Future.delayed(Duration(seconds: 3)); // 模拟异步过程
    return HomePage(); // 返回目标页面
  }

  @override
  Widget build(BuildContext context) {
    return EasySplashScreen(
      logo: Image.network('https://cdn4.iconfinder.com/data/icons/logos-brands-5/24/flutter-512.png'),
      title: Text(
        "Title",
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      backgroundColor: Colors.grey.shade400,
      showLoader: true,
      loadingText: Text("Loading..."),
      futureNavigator: futureCall(), // 使用futureNavigator参数
    );
  }
}

参数说明

以下是 EasySplashScreen 构造函数中常用的参数及其含义：

1. title (Text)：应用程序标题，默认显示在屏幕中央，当没有提供logo时会更明显。
2. logo (Image)：必需项，你想要展示的应用Logo。
3. logoWidth (double)：默认值为50，表示Logo宽度。
4. backgroundColor (Color)：背景颜色，默认为白色。
5. backgroundImage (ImageProvider)：整个屏幕的背景图片。
6. loaderColor (Color)：加载指示器的颜色，默认为黑色。
7. loadingText (Text)：加载文本，默认为空字符串。
8. showLoader (bool)：是否显示加载指示器，默认为false。
9. durationInSeconds (int)：对于时间基础的导航，定义等待几秒后跳转，默认为3秒。
10. navigator (String | Widget)：时间基础导航的目标页面。
11. futureNavigator (Future)：期望返回一个未来的函数，该未来完成时将触发导航。如果同时提供了navigator和futureNavigator，后者优先级更高。

通过以上介绍，相信你可以轻松地将 easy_splash_screen 应用于自己的项目当中，为用户提供更好的初次体验。如果有更多问题或者遇到困难，欢迎继续提问！