Flutter启动动画插件flutter_animated_splash的使用

Getting started 🚀

flutter_animated_splash 是一个用于Flutter的启动动画API，可以程序化地显示和隐藏带有过渡效果的启动屏幕。

Platform Support

支持多平台，包括：

• Android
• iOS
• Windows
• Mac
• Linux
• Chrome OS
• Web

Features ⛏

• 新的过渡动画
• 新的曲线动画
• 多平台支持
• 易于使用

Installation

1. Depend on it

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

dependencies:
   flutter_animated_splash: ^0.0.10

2. Install it

你可以从命令行安装包：

$ flutter pub add flutter_animated_splash

Usage 🎨

Import

现在在你的Dart代码中可以这样导入：

import 'package:flutter_animated_splash/flutter_animated_splash.dart';

Example_1

使用文本小部件的启动屏幕：

AnimatedSplash(
    type: Transition.fade,
    child: Text("Your Splash"),
    curve: Curves.fastLinearToSlowEase,
    background: Colors.white,
    navigator: const Home(),
    durationInSeconds: 3
)

Example_2

使用图标小部件的启动屏幕：

AnimatedSplash(
    type: Transition.size,
    child: Icon(
      Icons.audiotrack,
      color: Colors.green,
      size: 30.0,
    ),
    curve: Curves.fastLinearToSlowEase,
    background: Colors.white,
    navigator: const Home(),
    durationInSeconds: 3
)

Example_3

使用图片小部件的启动屏幕：

AnimatedSplash(
    type: Transition.slide,
    child: Image(
        image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
    ),
    curve: Curves.fastLinearToSlowEase,
    background: Colors.white,
    navigator: const Home(),
    durationInSeconds: 3
)

完整示例 Demo

以下是一个完整的示例应用，展示了如何使用 flutter_animated_splash 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animated Splash Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Home Screen!'),
      ),
    );
  }
}

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedSplash(
      type: Transition.fade,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "Welcome",
              style: TextStyle(fontSize: 24, color: Colors.black),
            ),
            SizedBox(height: 20),
            CircularProgressIndicator(),
          ],
        ),
      ),
      curve: Curves.fastLinearToSlowEase,
      background: Colors.white,
      navigator: Home(),
      durationInSeconds: 3,
    );
  }
}

Page Transition Animation Types

以下是可用的过渡类型及其用法：

Page Curve Animation

不同的曲线动画也可以应用于过渡效果，例如：

curve: Curves.bounceIn

或

curve: Curves.decelerate