Flutter启动页插件miladtech_splashscreen的使用

MiladTech Splash Screen

一个用于任何Flutter应用程序的启动屏幕包，可以轻松使用并具有许多自定义选项。

目前由awesome MiladTech支持

MiladTech 是新一代的云平台，旨在通过开源贡献帮助开发人员，并最终表达感谢。

使用方法

示例代码

可以在以下链接找到示例代码：
示例代码

添加依赖

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  miladtech_splashscreen:

如何使用

new SplashScreen.timer(
  seconds: 14, // 设置启动屏持续时间为14秒
  navigateAfterSeconds: new AfterSplash(), // 跳转到AfterSplash页面
  title: new Text('欢迎进入SplashScreen'), // 启动屏标题
  image: new Image.asset('screenshot.png'), // 启动屏图片
  backgroundColor: Colors.white, // 启动屏背景颜色
  styleTextUnderTheLoader: new TextStyle(), // 加载器下方文字样式
  photoSize: 100.0, // 图片大小
  loaderColor: Colors.red // 加载器颜色
);

示例代码

基于时间的示例

import 'package:flutter/material.dart';
import 'package:miladtech_splashscreen/splashscreen.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SplashScreen.timer(
      seconds: 14, // 启动屏持续时间为14秒
      navigateAfterSeconds: AfterSplash(), // 跳转到AfterSplash页面
      title: Text(
        '欢迎进入SplashScreen', // 启动屏标题
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
      ),
      image: Image.network( // 启动屏图片
        'https://flutter.io/images/catalog-widget-placeholder.png',
      ),
      backgroundColor: Colors.white, // 启动屏背景颜色
      loaderColor: Colors.red, // 加载器颜色
    );
  }
}

class AfterSplash extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('欢迎进入SplashScreen包'), // 主页面标题
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Text(
          '成功！', // 成功提示文本
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}

基于未来的示例

import 'package:flutter/material.dart';
import 'package:miladtech_splashscreen/splashscreen.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

Future<Widget> loadFromFuture() async {
  // 模拟从服务器获取数据（如登录）
  return AfterSplash();
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SplashScreen.future(
      navigateAfterFuture: loadFromFuture(), // 等待异步任务完成后再跳转
      navigateAfterSeconds: AfterSplash(), // 默认跳转页面
      title: Text(
        '欢迎进入SplashScreen', // 启动屏标题
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
      ),
      image: Image.network( // 启动屏图片
        'https://flutter.io/images/catalog-widget-placeholder.png',
      ),
      backgroundColor: Colors.white, // 启动屏背景颜色
      loaderColor: Colors.red, // 加载器颜色
    );
  }
}

class AfterSplash extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('欢迎进入SplashScreen包'), // 主页面标题
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Text(
          '成功！', // 成功提示文本
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}

使用Hero动画实现主图过渡

主图具有标签splashscreenImage。将其附加到导航到的任何页面上，这样会将主图动画到另一个页面上的相同图像。

添加自定义页面过渡

可以通过pageRoute来实现自定义页面过渡。例如：

import 'package:flutter/material.dart';
import 'package:miladtech_splashscreen/splashscreen.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => AfterSplash(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0, 1.0); // 初始位置
      var end = Offset.zero; // 结束位置
      var curve = Curves.ease; // 动画曲线
      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      return SlideTransition( // 滑动过渡
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return SplashScreen.timer(
      seconds: 14, // 启动屏持续时间为14秒
      navigateAfterSeconds: AfterSplash(), // 跳转到AfterSplash页面
      title: Text(
        '欢迎进入SplashScreen', // 启动屏标题
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
      ),
      image: Image.network( // 启动屏图片
        'https://flutter.io/images/catalog-widget-placeholder.png',
      ),
      backgroundColor: Colors.white, // 启动屏背景颜色
      loaderColor: Colors.red, // 加载器颜色
      pageRoute: _createRoute(), // 自定义页面过渡
    );
  }
}

class AfterSplash extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('欢迎进入SplashScreen包'), // 主页面标题
        automaticallyImplyLeading: false,
      ),
      body: Center(
        child: Text(
          '成功！', // 成功提示文本
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),
        ),
      ),
    );
  }
}