Flutter如何实现加载中动画

在Flutter开发中，我想在数据加载时显示一个加载中的动画效果，但不太清楚具体怎么实现。目前尝试了CircularProgressIndicator，但感觉样式比较单一。请问除了这个默认组件外，还有哪些方式可以实现自定义的加载动画？比如Lottie动画或者自定义动画组件？希望能提供一些简单的代码示例和实现思路。

2 回复

Flutter实现加载中动画常用CircularProgressIndicator或LinearProgressIndicator组件，也可通过AnimationController自定义动画。例如使用CircularProgressIndicator()即可显示圆形加载动画。

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


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

1. 使用内置组件

最简单的方式是使用Flutter内置的加载指示器：

Center(
  child: CircularProgressIndicator(),
)

2. 自定义加载动画

使用AnimatedContainer实现自定义动画：

AnimatedContainer(
  duration: Duration(seconds: 1),
  width: _isLoading ? 100 : 200,
  height: _isLoading ? 100 : 200,
  color: _isLoading ? Colors.blue : Colors.red,
  child: _isLoading ? CircularProgressIndicator() : Text('完成'),
)

3. 使用Lottie动画

首先添加依赖：lottie: ^2.7.0

import 'package:lottie/lottie.dart';

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

4. 旋转动画

使用RotationTransition：

RotationTransition(
  turns: AlwaysStoppedAnimation(45 / 360),
  child: Icon(Icons.refresh, size: 50),
)

5. 完整的加载状态管理示例

class LoadingWidget extends StatefulWidget {
  @override
  _LoadingWidgetState createState() => _LoadingWidgetState();
}

class _LoadingWidgetState extends State<LoadingWidget> 
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 2),
      vsync: this,
    )..repeat();
    
    // 模拟加载完成
    Future.delayed(Duration(seconds: 3), () {
      setState(() {
        _isLoading = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: _isLoading 
          ? RotationTransition(
              turns: _controller,
              child: Icon(Icons.autorenew, size: 50),
            )
          : Text('加载完成'),
    );
  }

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

选择哪种方式取决于你的具体需求：简单场景用内置组件，需要品牌化用Lottie，需要完全自定义则使用动画控制器。

回到顶部