在Flutter中显示自定义进度对话框,可以通过使用Flutter的Material组件库中的ProgressDialog实现。ProgressDialog是一个用于展示加载进度的对话框,你可以在其中定义自己的进度条样式。
下面是一个完整的示例代码:
progress_dialog
插件的依赖:dependencies:
progress_dialog: ^1.2.4
import 'package:flutter/material.dart';
import 'package:progress_dialog/progress_dialog.dart';
void showCustomProgressDialog(BuildContext context) async {
final ProgressDialog progressDialog = ProgressDialog(context,
type: ProgressDialogType.Download, isDismissible: false);
progressDialog.style(
message: '加载中...',
borderRadius: 10.0,
backgroundColor: Colors.white,
progressWidget: CircularProgressIndicator(),
elevation: 10.0,
insetAnimCurve: Curves.easeInOut,
progress: 0.0,
maxProgress: 100.0,
progressTextStyle:
TextStyle(color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
messageTextStyle:
TextStyle(color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600));
progressDialog.show();
// 模拟一个耗时操作,比如网络请求
await Future.delayed(Duration(seconds: 2));
progressDialog.update(
progress: 50.0,
message: "加载中,请稍候...",
progressWidget: CircularProgressIndicator(value: 0.5),
maxProgress: 100.0,
progressTextStyle:
TextStyle(color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
messageTextStyle:
TextStyle(color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
);
await Future.delayed(Duration(seconds: 2));
progressDialog.hide();
}
FlatButton(
onPressed: () {
showCustomProgressDialog(context);
},
child: Text('显示自定义进度对话框'),
)
这样,在点击按钮时,就会弹出一个自定义的进度对话框,其中包含一个加载进度条,以及自定义的加载文本。
此方法的优势是你可以完全自定义进度对话框的样式,使其符合你的应用主题和需求。
推荐的腾讯云相关产品:
领取专属 10元无门槛券
手把手带您无忧上云