如何用Flutter实现指定加载文字动画效果？优先使用AnimatedContainer

下面是使用AnimatedContainer及相关动画组件实现目标交互效果的代码，效果为卡片hover时背景变色、标题上移、底部按钮渐显：

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Hover Animation',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Scaffold(
        backgroundColor: Colors.grey[100],
        body: Center(child: HoverCard()),
      ),
    );
  }
}

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

  @override
  State<HoverCard> createState() => _HoverCardState();
}

class _HoverCardState extends State<HoverCard> {
  bool _isHovering = false;
  final _animationDuration = const Duration(milliseconds: 300);

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => setState(() => _isHovering = true),
      onExit: (_) => setState(() => _isHovering = false),
      child: AnimatedContainer(
        duration: _animationDuration,
        padding: EdgeInsets.symmetric(
          horizontal: 24,
          vertical: _isHovering ? 32 : 24,
        ),
        width: 320,
        decoration: BoxDecoration(
          color: _isHovering ? Colors.blueAccent : Colors.white,
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              color: Colors.black12,
              blurRadius: _isHovering ? 8 : 4,
              offset: Offset(0, _isHovering ? 4 : 2),
            )
          ],
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            AnimatedAlign(
              duration: _animationDuration,
              alignment: _isHovering ? Alignment.topLeft : Alignment.centerLeft,
              heightFactor: 1,
              child: Text(
                'Hello World',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: _isHovering ? Colors.white : Colors.black87,
                ),
              ),
            ),
            const SizedBox(height: 16),
            Text(
              'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
              style: TextStyle(
                fontSize: 14,
                color: _isHovering ? Colors.white70 : Colors.black54,
              ),
            ),
            const SizedBox(height: 24),
            AnimatedOpacity(
              duration: _animationDuration,
              opacity: _isHovering ? 1 : 0,
              child: SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () {},
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.white,
                    foregroundColor: Colors.blueAccent,
                  ),
                  child: const Text('Learn More'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键实现说明 #

• MouseRegion：监听鼠标的进入/离开事件，切换_isHovering状态触发所有动画
• AnimatedContainer：负责卡片内边距、背景色、阴影的平滑过渡，通过duration统一控制动画时长
• AnimatedAlign：实现标题文字hover时的上移动画，通过修改alignment属性完成
• AnimatedOpacity：控制底部按钮的渐显/隐藏效果，hover时将透明度从0切换到1

内容的提问来源于stack exchange，提问作者May