Flutter启动屏幕插件tbib_splash_screen的使用

Flutter启动屏幕插件tbib_splash_screen的使用

1. 插件简介

tbib_splash_screen 是一个用于创建Flutter应用启动屏幕的插件。它结合了 Animated Text Kit 插件，可以为启动屏幕中的文本添加动画效果。此外，你还可以使用 lottie 插件来显示复杂的动画。

2. 使用步骤

2.1 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  tbib_splash_screen: ^最新版本号
  animated_text_kit: ^最新版本号
  lottie: ^最新版本号

2.2 配置资源文件

确保你在 pubspec.yaml 中配置了所需的资源文件（如图片或Lottie动画文件）：

flutter:
  assets:
    - assets/logo_light.png
    - assets/logo_light_lottie.json

2.3 创建启动屏幕

下面是一个完整的示例代码，展示了如何使用 tbib_splash_screen 插件创建一个带有动画文本和Lottie动画的启动屏幕，并在加载完成后导航到主页面。

import 'package:flutter/material.dart';
import 'package:tbib_splash_screen/splash_screen_view.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:lottie/lottie.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  bool isLoaded = false;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 模拟加载过程，10秒后设置isLoaded为true
    Future.delayed(const Duration(seconds: 10)).then((value) {
      setState(() {
        isLoaded = true;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SplashScreenView(
      navigateWhere: isLoaded, // 当isLoaded为true时，导航到目标页面
      navigateRoute: const HomeScreen(), // 目标页面
      backgroundColor: Colors.white, // 启动屏幕的背景颜色
      linearGradient: const LinearGradient(
        colors: [
          Color(0xFF3366FF),
          Color(0xFF00CCFF),
        ],
        begin: FractionalOffset(0.0, 0.0),
        end: FractionalOffset(1.0, 0.0),
        stops: [0.0, 1.0],
        tileMode: TileMode.clamp,
      ), // 线性渐变背景
      text: WavyAnimatedText( // 动画文本
        "Splash Screen",
        textStyle: const TextStyle(
          color: Colors.red,
          fontSize: 32.0,
          fontWeight: FontWeight.bold,
        ),
      ),
      imageSrc: "assets/logo_light_lottie.json", // Lottie动画文件路径
      // displayLoading: false, // 是否显示加载指示器，默认为true
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: const Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}