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( width: 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 错误提示 } }); }, ),
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2020-02-13 16:36 LoaderMan 阅读(2518) 评论(0) 编辑 收藏 举报