zoukankan      html  css  js  c++  java
  • Flutter之Dialog加载弹窗提示

    import 'package:flutter/foundation.dart';
    import 'package:flutter/material.dart';
    
    class Dialogs {
      static CustomDialog normalProgressDialog(String message) {
        return CustomDialog(
          child: Container(
            height: 150,
            alignment: Alignment.center,
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                SizedBox(
                   20.0,
                  height: 20.0,
                  child: CircularProgressIndicator(
                    strokeWidth: 2.0,
                  ),
                ),
                Text('  $message'),
              ],
            ),
          ),
        );
      }
    
      static Future<T> showNormalProgressDialog<T>(BuildContext context,
          String message, AsyncValueGetter<T> callback) async {
        T result;
        bool isDialogShowing = false;
    
        BuildContext _context;
        showDialog(
            context: context,
            barrierDismissible: false,
            builder: (context) {
              _context = context;
              return WillPopScope(
                  child: Dialogs.normalProgressDialog(message),
                  onWillPop: () {
                    return Future.value(!isDialogShowing);
                  });
            });
    
        if (callback != null) result = await callback();
    
        isDialogShowing = false;
        if (_context != null) {
          Navigator.pop(_context);
        } else {
          Navigator.pop(context);
        }
    
        return result;
      }
    }
    
    class CustomDialog extends StatelessWidget {
      /// Creates a dialog.
      ///
      /// Typically used in conjunction with [showDialog].
      const CustomDialog({
        Key key,
        this.backgroundColor,
        this.elevation,
        this.insetAnimationDuration = const Duration(milliseconds: 100),
        this.insetAnimationCurve = Curves.decelerate,
        this.shape,
        this.child,
        this.padding = const EdgeInsets.symmetric(horizontal: 40.0, vertical: 24.0),
      }) : super(key: key);
    
      /// {@template flutter.material.dialog.backgroundColor}
      /// The background color of the surface of this [CustomDialog].
      ///
      /// This sets the [Material.color] on this [CustomDialog]'s [Material].
      ///
      /// If `null`, [ThemeData.cardColor] is used.
      /// {@endtemplate}
      final Color backgroundColor;
    
      /// {@template flutter.material.dialog.elevation}
      /// The z-coordinate of this [CustomDialog].
      ///
      /// If null then [DialogTheme.elevation] is used, and if that's null then the
      /// dialog's elevation is 24.0.
      /// {@endtemplate}
      /// {@macro flutter.material.material.elevation}
      final double elevation;
    
      /// The duration of the animation to show when the system keyboard intrudes
      /// into the space that the dialog is placed in.
      ///
      /// Defaults to 100 milliseconds.
      final Duration insetAnimationDuration;
    
      /// The curve to use for the animation shown when the system keyboard intrudes
      /// into the space that the dialog is placed in.
      ///
      /// Defaults to [Curves.fastOutSlowIn].
      final Curve insetAnimationCurve;
    
      /// {@template flutter.material.dialog.shape}
      /// The shape of this dialog's border.
      ///
      /// Defines the dialog's [Material.shape].
      ///
      /// The default shape is a [RoundedRectangleBorder] with a radius of 2.0.
      /// {@endtemplate}
      final ShapeBorder shape;
    
      /// The widget below this widget in the tree.
      ///
      /// {@macro flutter.widgets.child}
      final Widget child;
    
      /// The amount of space by which to inset the child.
      final EdgeInsetsGeometry padding;
    
      static const RoundedRectangleBorder _defaultDialogShape =
      RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(2.0)));
      static const double _defaultElevation = 24.0;
    
      @override
      Widget build(BuildContext context) {
        final DialogTheme dialogTheme = DialogTheme.of(context);
        return AnimatedPadding(
          padding: MediaQuery.of(context).viewInsets + padding,
          duration: insetAnimationDuration,
          curve: insetAnimationCurve,
          child: MediaQuery.removeViewInsets(
            removeLeft: true,
            removeTop: true,
            removeRight: true,
            removeBottom: true,
            context: context,
            child: Center(
              child: ConstrainedBox(
                constraints: const BoxConstraints(minWidth: 280.0),
                child: Material(
                  color: backgroundColor ??
                      dialogTheme.backgroundColor ??
                      Theme.of(context).dialogBackgroundColor,
                  elevation:
                  elevation ?? dialogTheme.elevation ?? _defaultElevation,
                  shape: shape ?? dialogTheme.shape ?? _defaultDialogShape,
                  type: MaterialType.card,
                  child: child,
                ),
              ),
            ),
          ),
        );
      }
    }

    使用:

     ListTile(
            leading: Text("弹窗提示"),
            onTap: () async {
              await Dialogs.showNormalProgressDialog(context, '加载中,请稍后。。。',
                  () async {
                try {
                  // todo 网络请求处理,耗时操作等
                  setState(() {});
                } catch (error) {
                  // todo 错误提示
                }
              });
            },
         ),
  • 相关阅读:
    element-ui 中dialog居中
    点击element-ui表格中的图标,上方显示具体的文字描述
    第一节:模板模式——需求说明&基本介绍
    第六节:代理模式——总结
    第五节:代理模式——代理模式的变体
    第四节:代理模式——cglib代理
    第三节:代理模式——动态代理
    第二节:代理模式——静态代理
    第一节:代理模式——基本介绍
    第四节:享元模式——总结
  • 原文地址:https://www.cnblogs.com/loaderman/p/12304083.html
Copyright © 2011-2022 走看看