Flutter

Flutter好用的轮子推荐03：一套精美实用的内置动画弹窗组件

前言

Flutter 是 Google 开源的应用开发框架，仅通过一套代码就能构建支持Android、iOS、Windows、Linux等多平台的应用。Flutter的性能非常高，拥有120fps的刷新率，也是目前非常流行的跨平台UI开发框架。

本专栏为大家收集了Github上近70个优秀开源库，后续也将持续更新。希望可以帮助大家提升搬砖效率，同时祝愿Flutter的生态越来越完善🎉🎉。

正文

一、🚀 轮子介绍

名称：awesome_dialog
概述：一个简单易用的内置动画弹窗
出版商：marcos930807@gmail.com
仓库地址：awesomeDialogs
推荐指数： ⭐️⭐️⭐️⭐️
常用指数： ⭐️⭐️⭐️⭐️
效果预览：

二、⚙️ 安装及使用

dependencies:

  awesome_dialog: ^2.1.2

import 'package:awesome_dialog/awesome_dialog.dart';

三、🔧 常用属性

属性	类型	描述
dialogType	DialogType	设置弹窗类型
customHeader	Widget	设置自定义标题（如果设置了，DiaologType将被忽略。）
width	double	弹窗最大宽度
title	String	弹窗标题
desc	String	弹窗描述文本
body	Widget	弹窗主体，如果设置了此属性，标题和描述将被忽略。
context	BuildContext	@required
btnOkText	String	确认按钮的文本
btnOkIcon	IconData	确认按钮的图标
btnOkOnPress	Function	确认按钮事件
btnOkColor	Color	确认按钮颜色
btnOk	Widget	创建自定义按钮，以上确认按钮相关属性将被忽略
btnCancelText	String	取消按钮的文本
btnCancelIcon	IconData	取消按钮的图标
btnCancelOnPress	Function	取消按钮事件
btnCancelColor	Color	取消按钮颜色
btnCancel	Widget	创建自定义按钮，以上取消按钮相关属性将被忽略
buttonsBorderRadius	BorderRadiusGeometry	按钮圆角
dismissOnTouchOutside	bool	点击外部消失
onDissmissCallback	Function	弹窗关闭回调
animType	AnimType	动画类型
aligment	AlignmentGeometry	弹出方式
useRootNavigator	bool	使用根导航控制器而不是当前根导航控制器，可处理跨界面关闭弹窗。
headerAnimationLoop	bool	标题动画是否循环播放
padding	EdgeInsetsGeometry	弹窗内边距
autoHide	Duration	自动隐藏时间
keyboardAware	bool	键盘弹出内容被遮挡时是否跟随移动
dismissOnBackKeyPress	bool	控制弹窗是否可以通过关闭按钮消失
buttonsBorderRadius	BorderRadiusGeometry	按钮圆角
buttonsTextStyle	TextStyle	按钮文字风格
showCloseIcon	bool	是否显示关闭按钮
closeIcon	Widget	关闭按钮图标
dialogBackgroundColor	Color	弹窗背景色
borderSide	BorderSide	整个弹窗形状

四、🗂 示例

1.带有点击动画的按钮

AnimatedButton(

    color: Colors.cyan, 

    text: '这是一个带有点击动画的按钮', 

    pressEvent: () {},

)

2.固定宽度并带有确认 / 取消按钮的提示框

AnimatedButton(

    text: '固定宽度并带有确认 / 取消按钮的提示框',

    pressEvent: () {

        AwesomeDialog(

            context: context,

            dialogType: DialogType.INFO_REVERSED,

            borderSide: const BorderSide(

                color: Colors.green,

                width: 2,

                ),

            width: 380,

            buttonsBorderRadius: const BorderRadius.all(

                Radius.circular(2),

                ),

            btnCancelText: '不予理会',

            btnOkText: '冲啊！',

            headerAnimationLoop: false,

            animType: AnimType.BOTTOMSLIDE,

            title: '提示',

            desc: '一个1级bug向你发起挑衅，是否迎战？',

            showCloseIcon: true,

            btnCancelOnPress: () {},

            btnOkOnPress: () {},

        ).show();

});

3.自定义按钮样式的问题对话框

AnimatedButton(

    color: Colors.orange[700],

    text: '具有自定义按钮样式的问题对话框',

    pressEvent: () {

        AwesomeDialog(

            context: context,

            dialogType: DialogType.QUESTION,

            headerAnimationLoop: false,

            animType: AnimType.BOTTOMSLIDE,

            title: '触发额外剧情',

            desc: '发现一名晕倒在草丛的路人，你会？',

            buttonsTextStyle: const TextStyle(color: Colors.black),

            btnCancelText: '拿走他的钱袋',

            btnOkText: '救助',

            showCloseIcon: true,

            btnCancelOnPress: () {},

            btnOkOnPress: () {},

        ).show();

});

4.无按钮的信息提示框

AnimatedButton(

    color: Colors.grey,

    text: '无按钮的信息提示框',

    pressEvent: () {

        AwesomeDialog(

        context: context,

        headerAnimationLoop: true,

        animType: AnimType.BOTTOMSLIDE,

        title: '提示',

        desc:

        '你救下路人，意外发现他是一位精通Flutter的满级大佬，大佬为了向你表示感谢，赠送你了全套Flutter的学习资料...',

    ).show();

});

5.警示框

AnimatedButton(

    color: Colors.orange,

    text: '警示框',

    pressEvent: () {

        AwesomeDialog(

        context: context,

        dialogType: DialogType.WARNING,

        headerAnimationLoop: false,

        animType: AnimType.TOPSLIDE,

        showCloseIcon: true,

        closeIcon: const Icon(Icons.close_fullscreen_outlined),

        title: '警告',

        desc: '意外发现bug的窝点,你准备？',

        btnCancelOnPress: () {},

        onDissmissCallback: (type) {

            debugPrint('Dialog Dissmiss from callback $type');

        },

        btnCancelText: '暂且撤退',

        btnOkText: '发起战斗',

        btnOkOnPress: () {},

    ).show();

});

6.错误提示框

AnimatedButton(

    color: Colors.red,

    text: '错误提示框',

    pressEvent: () {

        AwesomeDialog(

        context: context,

        dialogType: DialogType.ERROR,

        animType: AnimType.RIGHSLIDE,

        headerAnimationLoop: true,

        title: '挑战失败',

        desc: '你寡不敌众，败下阵来，（回到出生点后，拿出大佬赠送的全套学习资料，立志学成后报仇血恨... ）',

        btnOkOnPress: () {},

        btnOkIcon: Icons.cancel,

        btnOkColor: Colors.red,

    ).show();

});

7.成功提示框

AnimatedButton(

    color: Colors.green,

    text: '成功提示框',

    pressEvent: () {

        AwesomeDialog(

        context: context,

        animType: AnimType.LEFTSLIDE,

        headerAnimationLoop: false,

        dialogType: DialogType.SUCCES,

        showCloseIcon: true,

        title: '挑战成功',

        desc: '经过三天三夜的苦战，你成功消灭了所有的bug',

        btnOkOnPress: () {

            debugPrint('OnClcik');

        },

        btnOkIcon: Icons.check_circle,

        onDissmissCallback: (type) {

            debugPrint('Dialog Dissmiss from callback $type');

        },

    ).show();

});

8.不带顶部动画的弹窗

AnimatedButton(

    color: Colors.cyan,

    text: '不带顶部动画的弹窗',

    pressEvent: () {

        AwesomeDialog(

        context: context,

        headerAnimationLoop: false,

        dialogType: DialogType.NO_HEADER,

        title: 'No Header',

        desc:'Dialog description here...',

        btnOkOnPress: () {

            debugPrint('OnClcik');

        },

        btnOkIcon: Icons.check_circle,

    ).show();

});

9.自定义内容弹窗

AnimatedButton(

    color: Colors.purple,

    text: '自定义内容弹窗',

    pressEvent: () {

        AwesomeDialog(

        context: context,

        animType: AnimType.SCALE,

        dialogType: DialogType.INFO,

        body: const Center(

            child: Text(

                    'If the body is specified, then title and description will be ignored, this allows to further customize the dialogue.',

                    style: TextStyle(fontStyle: FontStyle.italic),

                   ),

              ),

        title: 'This is Ignored',

        desc: 'This is also Ignored',

    ).show();

});

10.自动隐藏弹窗

AnimatedButton(

    color: Colors.grey,

    text: '自动隐藏弹窗',

    pressEvent: () {

        AwesomeDialog(

        context: context,

        dialogType: DialogType.INFO,

        animType: AnimType.SCALE,

        title: 'Auto Hide Dialog',

        desc: 'AutoHide after 2 seconds',

        autoHide: const Duration(seconds: 2),

    ).show();

});

11.测试弹窗

AnimatedButton(

    color: Colors.blue,

    text: '测试弹窗',

    pressEvent: () {

        AwesomeDialog(

        context: context,

        keyboardAware: true,

        dismissOnBackKeyPress: false,

        dialogType: DialogType.WARNING,

        animType: AnimType.BOTTOMSLIDE,

        btnCancelText: "Cancel Order",

        btnOkText: "Yes, I will pay",

        title: 'Continue to pay?',

        desc:'Please confirm that you will pay 3000 INR within 30 mins. Creating orders without paying will create penalty charges, and your account may be disabled.',

        btnCancelOnPress: () {},

        btnOkOnPress: () {},

    ).show();

});

12.文本输入弹窗

AnimatedButton(

    color: Colors.blueGrey,

    text: '带有文本输入框的弹窗',

    pressEvent: () {

        late AwesomeDialog dialog;

        dialog = AwesomeDialog(

        context: context,

        animType: AnimType.SCALE,

        dialogType: DialogType.INFO,

        keyboardAware: true,

        body: Padding(

            padding: const EdgeInsets.all(8.0),

            child: Column(

            children: <Widget>[

                Text('Form Data',

                    style: Theme.of(context).textTheme.headline6,),

                const SizedBox(height: 10,),

                Material(

                    elevation: 0,

                    color: Colors.blueGrey.withAlpha(40),

                    child: TextFormField(

                        autofocus: true,

                        minLines: 1,

                        decoration: const InputDecoration(

                        border: InputBorder.none,

                        labelText: 'Title',

                        prefixIcon: Icon(Icons.text_fields),

                        ),

                    ),

                ),

                const SizedBox(height: 10,),

                Material(

                    elevation: 0,

                    color: Colors.blueGrey.withAlpha(40),

                    child: TextFormField(

                        autofocus: true,

                        keyboardType: TextInputType.multiline,

                        minLines: 2,

                        maxLines: null,

                        decoration: const InputDecoration(

                        border: InputBorder.none,

                        labelText: 'Description',

                        prefixIcon: Icon(Icons.text_fields),

                        ),

                    ),

                ),

                const SizedBox(height: 10,),

                AnimatedButton(

                    isFixedHeight: false,

                    text: 'Close',

                    pressEvent: () {

                        dialog.dismiss();

                    },

                )

            ],),

        ),

    )..show();

});

作者：晚夜
链接：https://juejin.cn/post/7076083351668555813
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

0

2022-03-21

0 个评论

要回复文章请先登录或注册