flutter如何实现loading弹框

在Flutter中，如何实现一个自定义的loading弹框？我想在请求数据时显示一个加载动画，但系统自带的CircularProgressIndicator样式太简单。有没有办法实现带文字提示、动画效果或者半透明遮罩的loading弹框？最好能提供完整的代码示例，包括如何控制弹框的显示和隐藏。

bupafengyu 1楼

在Flutter中实现loading弹框，可使用showDialog配合CircularProgressIndicator。示例代码：

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

也可使用第三方库如flutter_easyloading简化实现。

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

sinazl 2楼

在Flutter中实现loading弹框主要有以下几种方式：

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("加载中..."),
            ],
          ),
        ),
      );
    },
  );
}

// 关闭loading
Navigator.of(context).pop();

2. 使用第三方库 easy_loading

首先添加依赖：

dependencies:
  flutter_easyloading: ^3.0.0

使用：

// 在main.dart中配置
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      builder: EasyLoading.init(),
    );
  }
}

// 显示loading
EasyLoading.show(status: '加载中...');

// 显示成功
EasyLoading.showSuccess('加载成功');

// 显示错误
EasyLoading.showError('加载失败');

// 隐藏loading
EasyLoading.dismiss();

3. 自定义Loading组件

class LoadingWidget extends StatelessWidget {
  final String message;
  
  const LoadingWidget({Key? key, this.message = '加载中...'}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CircularProgressIndicator(),
            SizedBox(height: 10),
            Text(message),
          ],
        ),
      ),
    );
  }
}

flutter如何实现loading弹框

1. 使用showDialog + CircularProgressIndicator

2. 使用第三方库 easy_loading

3. 自定义Loading组件

推荐方案