Flutter启动画面插件dart_board_splash的使用

dart_board_splash

dart_board_splash 是一个用于 Flutter 应用的启动画面模块。

使用说明

在使用 dart_board_splash 插件时，首先需要包含它的功能模块。通过 DartBoardSplashFeature 来引入启动画面功能，并传入一个 splashWidget。

DartBoardSplashFeature(this.splashWidget)

splashWidget 应该是一个能够触发隐藏启动画面的部件。例如，通过调用 hideSplashScreen 方法来隐藏启动画面。

DartBoardCore.instance.dispatchMethodCall(
    context: context, call: MethodCall("hideSplashScreen"));

此外，插件还提供了一个内置的启动画面组件 FadeOutSplashScreen，它可以展示一段内容并逐渐淡出。

示例代码

以下是一个完整的示例代码，展示了如何使用 FadeOutSplashScreen 来实现一个简单的启动画面效果。

主文件代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  [@override](/user/override)
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  [@override](/user/override)
  void initState() {
    super.initState();
    // 隐藏启动画面的延迟时间
    Future.delayed(Duration(seconds: 3), () {
      DartBoardCore.instance.dispatchMethodCall(
          context: context, call: MethodCall("hideSplashScreen"));
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "欢迎使用!",
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            CircularProgressIndicator(), // 加载动画
          ],
        ),
      ),
    );
  }
}

FadeOutSplashScreen 的使用

如果希望使用 FadeOutSplashScreen 来实现渐变消失的效果，可以这样配置：

class FadeOutSplashScreen extends StatefulWidget {
  final Duration delay; // 启动画面显示的时间
  final Duration fadeDuration; // 淡出动画持续时间
  final WidgetBuilder contentBuilder; // 要展示的内容

  const FadeOutSplashScreen({
    Key? key,
    required this.delay,
    required this.fadeDuration,
    required this.contentBuilder,
  }) : super(key: key);

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

class _FadeOutSplashScreenState extends State<FadeOutSplashScreen> {
  late AnimationController _controller;
  late Animation<double> _opacity;

  [@override](/user/override)
  void initState() {
    super.initState();

    // 初始化动画控制器
    _controller = AnimationController(
      vsync: this,
      duration: widget.fadeDuration,
    );

    // 创建透明度动画
    _opacity = Tween<double>(begin: 1.0, end: 0.0).animate(_controller);

    // 延迟一段时间后开始动画
    Future.delayed(widget.delay, () {
      _controller.forward().then((_) {
        // 动画完成后隐藏启动画面
        DartBoardCore.instance.dispatchMethodCall(
            context: context, call: MethodCall("hideSplashScreen"));
      });
    });
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _opacity,
      builder: (context, child) {
        return Opacity(
          opacity: _opacity.value,
          child: widget.contentBuilder(context),
        );
      },
    );
  }
}