Flutter动画容器

I’m a big fan of football, and beyond the nail-biting action on the pitch, what often captivates me is the presentation of lineups and those captivating goal highlights, beautifully presented on the screen while I’m engrossed in the match. I remember discussing with a friend once about how I adore watching LaLiga games primarily because of the captivating animations and overall immersive experience. They seem to have mastered the art of presenting football, at least in my eyes, better than the Premier League.

我是一个足球迷，除了球场上扣人心弦的比赛之外，最吸引我的往往是比赛阵容和精彩进球集锦的展示，当我全神贯注地观看比赛时，屏幕上精美的画面让我目不暇接。我记得曾经和一位朋友讨论过，我之所以喜欢看西甲比赛，主要是因为那些引人入胜的动画和身临其境的整体体验。他们似乎已经掌握了呈现足球的艺术，至少在我看来，比英超更好。

But what does football have to do with Flutter, you might wonder? Well, the analogy is striking. Just as captivating animations and fluid transitions enhance the football-watching experience, animations and motion widgets can take your Flutter app from good to stunning.

你可能会问，足球和 Flutter 有什么关系？这两者之间有着惊人的相似之处。正如引人入胜的动画和流畅的过渡可以提升足球观赏体验一样，动画和动态部件也可以让您的 Flutter 应用程序从优秀到惊艳。

Imagine this: a user interacts with your app, and elements respond to their touch with smooth transitions, giving it a sense of life. This is the magic of animations and motion widgets in Flutter. They breathe life into your app, making it dynamic, engaging, and visually appealing.

试想一下：用户与您的应用程序进行交互，而元素会对他们的触摸做出平滑过渡的响应，从而赋予应用程序生命力。这就是 Flutter 中动画和动态部件的神奇之处。它们为您的应用程序注入生命力，使其充满活力、引人入胜并具有视觉吸引力。

Animations go beyond aesthetics; they convey meaning, guide users’ attention, and provide feedback. A well-placed animation can make your app feel intuitive, delightful, and, most importantly, user-friendly.

动画不仅具有美感，还能传达意义、引导用户的注意力并提供反馈。一个精心设计的动画可以让你的应用程序给人直观、愉悦的感觉，最重要的是，它对用户友好。

So let’s explore five of the most popular animation widgets in Flutter, each offering a unique way to add movement and life to your app’s UI. But remember, Flutter’s widget catalog is vast and ever-evolving. The Flutter team constantly introduces new widgets to make your app-building journey even more exciting. So, keep an eye on the official website for the latest updates.

因此，让我们来探索 Flutter 中最受欢迎的五种动画 widget，每一种都能以独特的方式为您的应用程序 UI 增添动感和活力。但请记住，Flutter 的 widget 目录非常庞大，而且还在不断更新。Flutter 团队会不断推出新的小工具，让您的应用程序开发之旅更加精彩。因此，请随时关注官方网站，了解最新更新。

AnimatedContainer

The AnimatedContainer widget in Flutter is a fantastic tool to add a touch of dynamism to your app’s interface. It does precisely what its name suggests: it animates container properties like size, color, padding, and more, creating smooth transitions that can make your app feel more interactive and engaging.

Flutter 中的 AnimatedContainer 组件是为应用程序界面增添活力的绝佳工具。它的作用正如它的名字所暗示的那样：它可以对大小、颜色、填充等容器属性进行动画处理，从而创建平滑的过渡，让您的应用程序更具交互感和吸引力。

Imagine this scenario: You have a button on your app that, when pressed, expands, drawing attention to its importance. With AnimatedContainer, achieving this effect becomes remarkably straightforward.

想象一下这种情景： 您的应用程序上有一个按钮，按下后按钮会膨胀，从而引起人们对其重要性的关注。有了 AnimatedContainer，实现这种效果变得非常简单。

Here’s a step-by-step guide on how to use AnimatedContainer to improve your app’s user experience:

以下是如何使用 AnimatedContainer 改善应用程序用户体验的分步指南：

Step 1: Import the Flutter Material library

步骤 1：导入 Flutter 材质库

Before you start working with AnimatedContainer, make sure you’ve imported the Flutter Material library. This library provides a wide range of widgets and tools to enhance the visual appeal and functionality of your app.

在开始使用 AnimatedContainer 之前，请确保您已导入 Flutter Material 库。该库提供了大量部件和工具，可增强应用程序的视觉吸引力和功能。

import ‘package:flutter/material.dart’;

Step 2: Create a StatefulWidget

步骤 2：创建 StatefulWidget

To make the container’s properties change over time, you’ll need to work within a StatefulWidget. If you’re not familiar with it, feel free to go back to chapter three where stateful and stateless widgets were discussed. Think of a StatefulWidget as a widget that can change its properties or appearance based on interactions or events.

要使容器的属性随时间变化，你需要在有状态部件（StatefulWidget）中工作。如果你对它不熟悉，可以回到第三章，那里讨论了有状态和无状态部件。可以把有状态部件想象成一个可以根据交互或事件改变属性或外观的部件。

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

  @override
  _AnimatedContainerExampleState createState() =>
      _AnimatedContainerExampleState();
}

Step 3: Define the State

步骤 3：定义状态

Now, let’s define the state for your StatefulWidget. This is where you’ll store the properties that will change over time. In this example, we’ll use a simple boolean variable to toggle the container’s size.

现在，让我们来定义 StatefulWidget 的状态。您将在这里存储随时间变化的属性。在本例中，我们将使用一个简单的布尔变量来切换容器的大小。

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

Step 4: Create the AnimatedContainer

第 4 步：创建动画容器

Inside your build method, create the AnimatedContainer widget. Set its properties, such as duration, color, width, height, and any other property you want to animate.

在构建方法中，创建 AnimatedContainer 部件。设置其属性，如持续时间、颜色、宽度、高度和任何其他要做成动画的属性。

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home:  Scaffold(
      appBar: AppBar(
        title: const Text('动画容器示例'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            // 响应式修改状态的方法
            setState(() {
              // 切换状态: 展开/收缩
              _isExpanded = !_isExpanded;
            });
          },
          child: AnimatedContainer(
            duration: const Duration(seconds: 1),
            width: _isExpanded ? 200.0 : 100.0, // 宽度
            height: _isExpanded ? 200.0 : 100.0, // 高度
            color: _isExpanded ? Colors.blue : Colors.green, // 颜色
            child: const Center(
              child: Text(
                "点我啊~",
                textDirection: TextDirection.ltr, // 文本方向
                style: TextStyle( // 文本样式
                  color: Colors.white,
                  fontSize: 20.0,
                ),
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

Step 5: Toggle the Animation

步骤 5：切换动画

In this example, we’re using a GestureDetector to trigger the animation when the user taps the container. Inside the onTap function, we use setState to toggle the value of _isExpanded. This triggers the AnimatedContainer to smoothly transition between the defined properties.

在本例中，我们使用手势检测器（GestureDetector）在用户轻拍容器时触发动画。在 onTap 函数中，我们使用 setState 来切换 _isExpanded 的值。这将触发 AnimatedContainer 在定义的属性之间平滑过渡。

And that’s it! With just a few lines of code, you’ve added a delightful animation to your container, making it more interactive and engaging for your users. Experiment with different properties and durations to achieve the perfect animation for your app.

就是这样！只需几行代码，您就为容器添加了令人愉悦的动画，使其更具互动性，更能吸引用户。尝试使用不同的属性和持续时间，为您的应用程序制作完美的动画。

完整代码

import 'package:flutter/material.dart';

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

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

  @override
  _AnimatedContainerExampleState createState() =>
      _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:  Scaffold(
        appBar: AppBar(
          title: const Text('动画容器示例'),
        ),
        body: Center(
          child: GestureDetector(
            onTap: () {
              // 响应式修改状态的方法
              setState(() {
                // 切换状态: 展开/收缩
                _isExpanded = !_isExpanded;
              });
            },
            child: AnimatedContainer(
              duration: const Duration(seconds: 1),
              width: _isExpanded ? 200.0 : 100.0, // 宽度
              height: _isExpanded ? 200.0 : 100.0, // 高度
              color: _isExpanded ? Colors.blue : Colors.green, // 颜色
              child: const Center(
                child: Text(
                  "点我啊~",
                  textDirection: TextDirection.ltr, // 文本方向
                  style: TextStyle( // 文本样式
                    color: Colors.white,
                    fontSize: 20.0,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}