Flutter启动页路由插件splash_route的使用

Flutter启动页路由插件splash_route的使用

Splash Route

Splash Route 是一个带有炫酷动画的路由，用于在导航到另一页面时显示启动动画。

Demo

安装

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

dependencies:
  splash_route: ^0.0.2

然后在 Dart 文件中导入该包：

import 'package:splash_route/splash_route.dart';

使用方法

通过在 Navigator 中添加 SplashRoute 来实现启动页动画。以下是一个完整的示例代码，展示了如何使用 splash_route 插件创建带有启动动画的页面切换效果。

示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Splash Route',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(title: 'Splash Route'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 定义跳转到下一页的方法
  void _goToNextPage(
    BuildContext context,
    FractionalOffset position,
    Color splashColor,
    Duration duration,
  ) {
    Navigator.of(context).push(
      SplashRoute(
        targetPage: TargetPage(
          appBarColor: splashColor, // 设置目标页面的AppBar颜色
        ),
        splashColor: splashColor, // 设置启动动画的颜色
        startFractionalOffset: position, // 设置动画起始位置
        transitionDuration: duration, // 设置动画持续时间
      ),
    );
  }

  // 定义按钮组件
  Widget _goNextButton(
    BuildContext context,
    FractionalOffset position,
    Color splashColor,
    Duration duration,
  ) {
    return InkWell(
      onTap: () => _goToNextPage(
        context,
        position,
        splashColor,
        duration,
      ),
      child: Container(
        height: 50,
        width: 50,
        decoration: BoxDecoration(
          shape: BoxShape.circle, // 圆形按钮
          color: splashColor, // 按钮背景色
        ),
        child: const Center(
          child: Icon(
            Icons.arrow_forward, // 按钮内的图标
            color: Colors.white, // 图标颜色
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true, // 居中标题
      ),
      body: Stack(
        children: [
          // 中心按钮
          Center(
            child: _goNextButton(
              context,
              FractionalOffset.center, // 中心位置
              Colors.blue, // 蓝色
              const Duration(milliseconds: 2000), // 动画持续2秒
            ),
          ),
          // 右下角按钮
          Positioned(
            bottom: 20,
            right: 20,
            child: _goNextButton(
              context,
              FractionalOffset.bottomRight, // 右下角位置
              const Color.fromARGB(255, 121, 71, 6), // 棕色
              const Duration(milliseconds: 1500), // 动画持续1.5秒
            ),
          ),
          // 左下角按钮
          Positioned(
            bottom: 20,
            left: 20,
            child: _goNextButton(
              context,
              FractionalOffset.bottomLeft, // 左下角位置
              Colors.orange, // 橙色
              const Duration(milliseconds: 1500), // 动画持续1.5秒
            ),
          ),
          // 右上角按钮
          Positioned(
            top: 20,
            right: 20,
            child: _goNextButton(
              context,
              const FractionalOffset(0.9, 0.2), // 右上角位置
              Colors.red, // 红色
              const Duration(milliseconds: 1500), // 动画持续1.5秒
            ),
          ),
          // 左上角按钮
          Positioned(
            top: 20,
            left: 20,
            child: _goNextButton(
              context,
              const FractionalOffset(0.1, 0.2), // 左上角位置
              Colors.purple, // 紫色
              const Duration(milliseconds: 1500), // 动画持续1.5秒
            ),
          ),
        ],
      ),
    );
  }
}

// 目标页面
class TargetPage extends StatelessWidget {
  final Color appBarColor;

  const TargetPage({Key? key, required this.appBarColor}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Target Page'),
        backgroundColor: appBarColor, // 使用传入的颜色作为AppBar背景色
      ),
      body: const Center(
        child: Text('This is the target page!'),
      ),
    );
  }
}