Flutter动画容器插件animation_container的使用

Flutter动画容器插件animation_container的使用

Animated Container

flutter 库中有一个用于展示带有动画的数据列表。您可以为该列表添加标题、副标题或图标。

示例图片

赞助商

[链接已移除]

安装

要将 ContainerAnimation 添加到您的项目中，请在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
    animation_container: ^0.0.1+1

然后运行 flutter pub get 来安装它。

如何使用

ContainerAnimation 可以直接使用。只需调用 ContainerAnimation()，并传入必需的 ItemData 列表和列表标题即可。

带占位符的示例：

ContainerAnimation(
  itemList: [
    ItemData(title: "这是标题 1"),
    ItemData(title: "标题 2", subtitle: "副标题 2", icon: Icons.laptop),
  ],
),

自定义样式的示例：

ContainerAnimation(
  color2: Colors.amberAccent, // 第二种背景渐变颜色
  color1: Colors.amber, // 第一种背景渐变颜色
  borderRadius: BorderRadius.circular(20), // 容器边框圆角
  titleTextStyle: const TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.bold,
    fontSize: 20,
  ),
  subtitleTextStyle: const TextStyle(
    color: Colors.white,
    fontWeight: FontWeight.normal,
    fontSize: 16,
  ),
  itemList: [
    ItemData(title: "这是标题 1"),
    ItemData(title: "标题 2", subtitle: "副标题 2", icon: Icons.laptop),
    ItemData(title: "标题 3", subtitle: "副标题 3", icon: Icons.other_houses),
    ItemData(title: "标题 4", subtitle: "副标题 4", icon: Icons.phone),
    ItemData(title: "标题 5", subtitle: "副标题 5", icon: Icons.accessibility_new),
    ItemData(title: "标题 6", subtitle: "副标题 6", icon: Icons.laptop),
  ],
),

示例代码

以下是完整的示例代码，展示如何在 Flutter 中使用 animation_container 插件：

文件：example/lib/main.dart

import 'package:animation_container/animation_container.dart'; // 导入插件
import 'package:animation_container_example/home_page.dart'; // 导入主页
import 'package:flutter/material.dart'; // 导入 Flutter 基础库

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatefulWidget {
  const MyApp({super.key}); // 构造函数

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState(); // 创建状态
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = '未知'; // 平台版本（可选）
  final _animationContainerPlugin = AnimationContainer(); // 初始化插件

  [@override](/user/override)
  void initState() {
    super.initState(); // 初始化状态
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 禁用调试标志
      home: HomePage(), // 设置主页
    );
  }
}

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

1 回复

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


animation_container 是一个用于在 Flutter 中创建动画容器的插件。它允许你在容器上应用各种动画效果，如淡入淡出、缩放、旋转、平移等。这个插件简化了在 Flutter 中实现复杂动画的过程。

安装

首先，你需要在 pubspec.yaml 文件中添加 animation_container 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  animation_container: ^1.0.0  # 请检查最新版本

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

基本用法

AnimationContainer 是一个可以包裹任何子部件的容器，它允许你定义动画效果。以下是一个简单的示例，展示了如何使用 AnimationContainer 创建一个淡入淡出的动画效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimationContainer Example'),
        ),
        body: Center(
          child: AnimationContainer(
            duration: Duration(seconds: 2),
            curve: Curves.easeInOut,
            fadeIn: true,
            fadeOut: true,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Hello, World!',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

参数说明

  • duration: 动画的持续时间。
  • curve: 动画的曲线类型，默认为 Curves.linear。
  • fadeIn: 是否启用淡入效果。
  • fadeOut: 是否启用淡出效果。
  • scaleIn: 是否启用缩放进入效果。
  • scaleOut: 是否启用缩放退出效果。
  • rotateIn: 是否启用旋转进入效果。
  • rotateOut: 是否启用旋转退出效果。
  • translateIn: 是否启用平移进入效果。
  • translateOut: 是否启用平移退出效果。
  • child: 要应用动画的子部件。

自定义动画

你还可以通过 AnimationContainer 的 transform 参数来自定义动画效果。以下是一个自定义动画的示例：

AnimationContainer(
  duration: Duration(seconds: 2),
  transform: (double animationValue) {
    return Matrix4.identity()
      ..scale(animationValue)
      ..rotateZ(animationValue * 2 * 3.141592653589793);
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.red,
    child: Center(
      child: Text(
        'Custom Animation',
        style: TextStyle(color: Colors.white, fontSize: 24),
      ),
    ),
  ),
);
回到顶部