Flutter 如何将CircularProgressIndicator替换为App图标实现加载效果

原生Flutter无需额外第三方依赖即可实现，核心是通过动画控制器控制你的App图标做重复旋转，替代原有CircularProgressIndicator即可，步骤如下：

第一步：配置图标资源 #

将你的App图标png/webp等资源放入项目assets/images目录，在pubspec.yaml中声明资源：

flutter:
  assets:
    - assets/images/app_icon.png

第二步：实现自定义加载动画组件 #

你可以直接封装一个可复用的加载组件，替换原有的进度组件：

import 'package:flutter/material.dart';

class CustomLoadingIndicator extends StatefulWidget {
  final double size;
  final double? strokeWidth;
  const CustomLoadingIndicator({super.key, this.size = 40, this.strokeWidth});

  @override
  State<CustomLoadingIndicator> createState() => _CustomLoadingIndicatorState();
}

class _CustomLoadingIndicatorState extends State<CustomLoadingIndicator> with SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置旋转一周时长为1秒，无限重复
    _animationController = AnimationController(vsync: this, duration: const Duration(seconds: 1))..repeat();
  }

  @override
  void dispose() {
    // 销毁控制器避免内存泄漏
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      // 动画绑定到0-1的旋转值对应0-360度
      turns: Tween(begin: 0.0, end: 1.0).animate(_animationController),
      // 如果需要保留原有外圈进度条效果，可替换为下方注释的Stack组件
      child: Image.asset(
        'assets/images/app_icon.png',
        width: widget.size,
        height: widget.size,
      ),
      /* 保留外圈进度条的实现
      child: Stack(
        alignment: Alignment.center,
        children: [
          SizedBox(
            width: widget.size,
            height: widget.size,
            child: CircularProgressIndicator(strokeWidth: widget.strokeWidth ?? 2),
          ),
          Image.asset(
            'assets/images/app_icon.png',
            width: widget.size * 0.6,
            height: widget.size * 0.6,
          ),
        ],
      ),
      */
    );
  }
}

第三步：替换原有代码 #

把你原来的加载代码直接替换为自定义组件即可：

return const Center(
  child: CustomLoadingIndicator(
    size: 40,
    strokeWidth: 2
  )
);

如果需要调整旋转速度，修改AnimationController的duration参数即可，数值越小旋转越快。

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