flutter如何实现加载动画

在Flutter中如何实现自定义的加载动画？我想在数据加载时展示一个流畅的动画效果，但不太清楚具体该用什么组件或方法。目前尝试过使用CircularProgressIndicator，但效果比较单一。请问有哪些实现方案？比如是否可以通过Lottie、Rive或者自定义动画来实现更丰富的效果？最好能提供简单的代码示例或实现思路。

2 回复

在Flutter中，使用CircularProgressIndicator或LinearProgressIndicator实现加载动画。也可通过AnimationController和Tween自定义动画。示例代码：

CircularProgressIndicator()

简单高效。

更多关于flutter如何实现加载动画的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现加载动画有多种方式，以下是常用的几种方法：

1. 内置加载指示器

CircularProgressIndicator() // 圆形加载
LinearProgressIndicator()   // 线性进度条

2. 自定义动画（推荐使用Lottie）

import 'package:lottie/lottie.dart';

Lottie.asset(
  'assets/loading_animation.json',
  width: 100,
  height: 100,
)

3. 使用AnimationController自定义

class LoadingAnimation extends StatefulWidget {
  @override
  _LoadingAnimationState createState() => _LoadingAnimationState();
}

class _LoadingAnimationState extends State<LoadingAnimation> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..repeat(reverse: true);
    
    _animation = CurvedAnimation(
      parent: _controller,
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _animation,
      child: Icon(Icons.refresh, size: 50),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

4. 完整示例（带遮罩）

bool isLoading = false;

Stack(
  children: [
    // 主内容
    YourContentWidget(),
    
    if (isLoading)
      Container(
        color: Colors.black54,
        child: Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
          ),
        ),
      ),
  ],
)

建议：

  • 简单场景使用内置CircularProgressIndicator
  • 复杂动画推荐使用Lottie（需安装lottie包）
  • 自定义动画注意在dispose中释放controller

这些方法都能有效实现加载动画效果，根据具体需求选择合适方案。

回到顶部