Flutter动画启动页插件animated_splash_container的使用

Flutter 动画启动页插件 animated_splash_container 的使用

特性

AnimatedSplashContainer 是一个可以用于启动屏幕的动画容器。

使用

添加依赖

请在安装前检查最新版本。如果新版本有任何问题，请使用之前的版本。

dependencies:
  flutter:
    sdk: flutter
  # 添加 animated_splash_container
  animated_splash_container: ^0.0.1

示例代码

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    return MaterialApp(
      title: 'Animated Container Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  [@override](/user/override)
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const AnimatedSplashContainer(
      color1: Colors.red,
      color2: Colors.yellow,
      containerType: ContainerType.circle
    );
  }
}

效果图

使用效果

使用效果

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根节点。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Container Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const SplashScreen(),
    );
  }
}

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  [@override](/user/override)
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const AnimatedSplashContainer(
        color1: Colors.red,
        color2: Colors.yellow,
        containerType: ContainerType.circle);
  }
}

更多关于Flutter动画启动页插件animated_splash_container的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画启动页插件animated_splash_container的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用animated_splash_container插件来实现动画启动页的示例代码。

首先，确保你已经在你的pubspec.yaml文件中添加了animated_splash_container依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_splash_container: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中创建一个启动页，比如splash_screen.dart：

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

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedSplashContainer(
        duration: 3000,  // 动画持续时间，单位是毫秒
        splash: AnimatedSplash(
          image: Image.asset('assets/splash_image.png'),  // 你的启动图片资源
          animationType: AnimationType.slide,  // 动画类型，可以是slide, fade, zoom等
          animationDuration: 1500,  // 动画效果的持续时间，单位是毫秒
          animationCurve: Curves.easeInOut,  // 动画曲线
        ),
        nextScreen: HomeScreen(),  // 动画结束后显示的下一个页面
        onAnimationEnd: () {
          // 动画结束后可以执行的回调
          print('Splash animation ended.');
        },
      ),
    );
  }
}

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

注意：

  1. 你需要在assets文件夹中放置一个名为splash_image.png的图片文件，或者根据需要修改图片路径。
  2. duration参数指定了启动页显示的总时间（包括动画时间），如果动画时间小于总时间，动画结束后会保持静态图片直到总时间结束。
  3. AnimationType可以是slide、fade、zoom等，你可以根据需求选择合适的动画类型。

最后，在你的main.dart文件中引入并使用这个启动页：

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

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

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

这样，当你运行你的Flutter应用时，它将首先显示带有动画效果的启动页，然后在动画结束后跳转到主屏幕。

希望这个示例代码能帮助你理解如何在Flutter项目中使用animated_splash_container插件。

回到顶部