flutter如何实现加载弹窗

在Flutter中如何实现一个加载弹窗？我想在数据加载时显示一个全屏的半透明弹窗，带有旋转的loading图标和文字提示，类似于常见的等待进度条。求具体实现代码或推荐的第三方库，最好能支持自定义样式和动画效果。

2 回复

Flutter中实现加载弹窗可使用showDialog和AlertDialog，结合CircularProgressIndicator显示加载动画。示例代码：

showDialog(
  context: context,
  barrierDismissible: false,
  builder: (context) => AlertDialog(
    content: Row(
      children: [
        CircularProgressIndicator(),
        SizedBox(width: 10),
        Text("加载中...")
      ],
    ),
  ),
);

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


在Flutter中，可以通过以下几种方式实现加载弹窗：

1. 使用showDialog + CircularProgressIndicator

// 显示加载弹窗
void showLoadingDialog(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false, // 点击背景不关闭
    builder: (BuildContext context) {
      return Dialog(
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              CircularProgressIndicator(),
              SizedBox(width: 20),
              Text("加载中..."),
            ],
          ),
        ),
      );
    },
  );
}

// 关闭弹窗
void hideLoadingDialog(BuildContext context) {
  Navigator.of(context).pop();
}

2. 使用AlertDialog

void showLoadingAlert(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CircularProgressIndicator(),
            SizedBox(height: 16),
            Text("请稍候..."),
          ],
        ),
      );
    },
  );
}

3. 使用第三方库（推荐）

在pubspec.yaml中添加：

dependencies:
  flutter_spinkit: ^5.1.0

使用示例：

import 'package:flutter_spinkit/flutter_spinkit.dart';

void showCustomLoading(BuildContext context) {
  showDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context) {
      return Dialog(
        child: Container(
          padding: EdgeInsets.all(20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              SpinKitFadingCircle(
                color: Colors.blue,
                size: 50.0,
              ),
              SizedBox(height: 16),
              Text("加载中..."),
            ],
          ),
        ),
      );
    },
  );
}

4. 封装成工具类

class LoadingDialog {
  static void show(BuildContext context, {String message = "加载中..."}) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return PopScope(
          canPop: false,
          child: AlertDialog(
            content: Row(
              children: [
                CircularProgressIndicator(),
                SizedBox(width: 15),
                Expanded(child: Text(message)),
              ],
            ),
          ),
        );
      },
    );
  }

  static void hide(BuildContext context) {
    Navigator.of(context, rootNavigator: true).pop();
  }
}

// 使用
LoadingDialog.show(context);
// 关闭时
LoadingDialog.hide(context);

使用建议：

  • 对于简单需求，使用内置的CircularProgressIndicator
  • 需要更多动画效果时，推荐使用flutter_spinkit
  • 记得在异步操作完成后调用hide方法关闭弹窗
回到顶部