Flutter Motion Kit

可预览的 Flutter 动画 + 避坑指南 · 支持 Claude Code 一键复用

← 返回

AnimatedContainer 隐式动画

分类 implicit · 难度 1/5 · 验证于 Flutter 3.32 / 2026-06

点击时让方块的尺寸 / 颜色 / 圆角平滑过渡。能用隐式动画解决的，就不要手写 AnimationController —— 更短、更不容易出错。

⏳ 在线预览未就绪：运行 node scripts/sync-gists.mjs 生成 gist 后即可内嵌。

代码

// ✅ 推荐：用隐式动画做简单属性过渡，零 controller、零 dispose 负担。
// 可直接粘进 DartPad (https://dartpad.dev) 运行。
import 'package:flutter/material.dart';

void main() => runApp(const _App());

class _App extends StatelessWidget {
  const _App();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true, colorSchemeSeed: Colors.indigo),
      home: const _Demo(),
    );
  }
}

class _Demo extends StatefulWidget {
  const _Demo();

  @override
  State<_Demo> createState() => _DemoState();
}

class _DemoState extends State<_Demo> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () => setState(() => _expanded = !_expanded),
          child: AnimatedContainer(
            // 关键：只声明「目标状态」，框架负责补间过渡。
            duration: const Duration(milliseconds: 400),
            curve: Curves.easeInOutCubic,
            width: _expanded ? 240 : 120,
            height: _expanded ? 240 : 120,
            decoration: BoxDecoration(
              color: _expanded ? Colors.indigo : Colors.indigo.shade200,
              borderRadius: BorderRadius.circular(_expanded ? 32 : 12),
            ),
            alignment: Alignment.center,
            child: const Text('Tap me', style: TextStyle(color: Colors.white)),
          ),
        ),
      ),
    );
  }
}

⚠️ 坑（3）

只有「可补间(Tween)的属性」才会动画；改 child 的类型或 key 不会触发过渡。
✅ 用 AnimatedSwitcher 处理「子组件整体替换」，AnimatedContainer 只管自身属性。
official-docs · 出处
首帧就给目标值不会有动画 —— 隐式动画只在「属性发生变化」时播放。
✅ 初始用起始值，在 build 之后（如点击/initState 后 setState）再改成目标值。
official-docs · 出处
为了这种简单过渡手写 AnimationController，是过度设计且容易漏 dispose。
✅ 简单属性过渡一律优先隐式动画族（AnimatedContainer/AnimatedOpacity/...）。
author-experience

官方文档