flutter LoadingDialog

常用于加载网络数据,直接上代码:

import 'package:flutter/material.dart';

class LoadingDialog extends Dialog {
  LoadingDialog(
      {Key? key,
      this.text,
      this.width,
      this.height,
      this.color,
      this.contentPadding = 20})
      : super(key: key);

  final Widget? text;
  final double? width;
  final double? height;
  final Color? color;
  final double contentPadding;

  @override
  Widget build(BuildContext context) {
    Widget? textWidget;
    if (text != null) {
      final ThemeData theme = Theme.of(context);
      final DialogTheme dialogTheme = DialogTheme.of(context);
      textWidget = Padding(
        padding: EdgeInsets.only(top: contentPadding),
        child: DefaultTextStyle(
          style: dialogTheme.titleTextStyle ?? theme.textTheme.headline6!,
          child: text!,
        ),
      );
    }
    return Center(
      child: Container(
        width: width ?? 120.0,
        height: height ?? 120.0,
        decoration: ShapeDecoration(
          color: color ?? Color(0xffffffff),
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(10.0),
            ),
          ),
        ),
        padding: EdgeInsets.all(contentPadding),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            CircularProgressIndicator(),
            if (textWidget != null) textWidget,
          ],
        ),
      ),
    );
  }
}

Future<T?> showLoadingDialog<T>({
  required BuildContext context,
  bool barrierDismissible = false,
  String? title,
  bool canCancel = false,
  WillPopCallback? onWillPop,
  double? width,
  double? height,
}) {
  Widget? textWidget;
  if (title != null) {
    textWidget = Text(
      title,
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      textAlign: TextAlign.center,
      style: TextStyle(fontSize: 12),
    );
  }
  return showDialog(
      context: context,
      barrierDismissible: barrierDismissible,
      builder: (context) {
        Widget dialog = LoadingDialog(
          text: textWidget,
          width: width,
          height: height,
        );
        if (!canCancel) {
          dialog = WillPopScope(
            child: dialog,
            onWillPop: onWillPop ?? () => Future.value(false),
          );
        }
        return dialog;
      });
}

使用方法:

showLoadingDialog(
        context: context,
        title: "加载中,请稍候",
        onWillPop: () {
          Future.delayed(Duration(seconds: 3), () {
            Navigator.of(context).pop();
          });
          return Future.value(false);
        });

效果图:

高级使用:

showDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          return LoadingDialog(
            width: 200,
            height: 150,
            text: DefaultTextStyle(
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 12),
              child: Column(
                children: [
                  Text("数据加载中.....", style: TextStyle(color: Colors.blue)),
                  Text("当前网络较慢,请耐心等候", style: TextStyle(color: Colors.red)),
                ],
              ),
            ),
          );
        });

效果图:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值