flutter如何显示loading动画

在Flutter中，我想在加载数据时显示一个loading动画，但不太清楚具体怎么实现。请问有哪些常用的方法可以显示loading效果？比如使用内置的CircularProgressIndicator还是有其他更灵活的方案？如果自定义loading动画，应该怎么实现？希望得到一些代码示例和最佳实践建议。

2 回复

在Flutter中显示loading动画，可以使用CircularProgressIndicator或LinearProgressIndicator组件。将其放在Center中居中显示，或结合FutureBuilder在异步加载时自动显示。

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


在Flutter中显示loading动画主要有以下几种方式：

1. CircularProgressIndicator（圆形进度指示器）

Center(
  child: CircularProgressIndicator(),
)

2. LinearProgressIndicator（线性进度指示器）

Center(
  child: LinearProgressIndicator(),
)

3. 自定义颜色和大小

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  strokeWidth: 4.0,
)

4. 条件显示Loading

bool isLoading = true;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: isLoading 
      ? Center(child: CircularProgressIndicator())
      : YourMainContent(),
  );
}

5. 使用FutureBuilder自动处理加载状态

FutureBuilder(
  future: yourAsyncFunction(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return Center(child: CircularProgressIndicator());
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return YourContent(snapshot.data);
    }
  },
)

6. 使用Overlay实现全局Loading

void showLoading(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (context) => Center(
      child: CircularProgressIndicator(),
    ),
  );
}

void hideLoading(BuildContext context) {
  Navigator.of(context).pop();
}

选择哪种方式取决于你的具体需求：简单的加载状态可以使用条件渲染，异步操作推荐使用FutureBuilder，全局加载可以使用Overlay或Dialog。

回到顶部