一套时尚的动画对话框，如 Flutter 的普通、进度和错误对话框

时尚对话框

一套时尚的动画对话框，如 Flutter 的普通、进度、成功、信息、警告和错误对话框。

展示

⭐ 安装

dependencies:
    stylish_dialog: ^0.0.6

⚡ 导入

import 'package:stylish_dialog/stylish_dialog.dart';

? 如何使用

context:
alertType:
titleText:
contentText:
addView:
confirmText:
cancelText:
confirmPressEvent:
cancelPressEvent:
dismissOnTouchOutside:

属性

context → BuildContext

alertType → int

titleText → String

addView → Widget

confirmText → String

confirmText → String

cancelText → String

confirmPressEvent → void Function ()

cancelPressEvent → void Function ()

dismissOnTouchOutside → bool

rootNavigator → bool

警报类型

StylishDialog.NORMAL
StylishDialog.PROGRESS
StylishDialog.SUCCESS
StylishDialog.INFO
StylishDialog.WARNING
StylishDialog.ERROR

按下事件

confirmPressEvent: (){
        
}
    
cancelPressEvent: (){
        
}

绑定对话框/更改警报类型

dialog.changeAlertType(
    alertType: /*Alert Type*/,
    ...
);

示例

StylishDialog dialog = StylishDialog(
        context: context,
        alertType: StylishDialog.NORMAL,
        titleText: 'This is title',
        contentText: 'This is content text',
    );
        
//show stylish dialog
dialog.show();
    
//dismiss stylish dialog
dialog.dismiss();

//dialog.dismiss(/*rootNavigator: bool  default true */);

简单对话框

带标题和内容文本的时尚简单对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.NORMAL,
    titleText: 'This is title',
    contentText: 'This is content text',
).show();

带自定义小部件的普通对话框

带自定义小部件的普通对话框
注意：addView: 仅支持 StylishDialog.NORMAL alertType

StylishDialog(
    context: context,
    alertType: StylishDialog.NORMAL,
    titleText: 'Name',
    contentText: 'Please enter your name',
    confirmText: 'Submit',
    confirmPressEvent: () {
        print(controller.text);
    },
    addView: TextField(
        controller: controller,
        ),
).show();

进度对话框

无标题和内容文本的进度对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.PROGRESS,
    titleText: 'This is title',
    contentText: 'This is content text',
).show();

只有标题的进度对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.PROGRESS,
    titleText: 'This is title',
    contentText: 'This is content text',
).show();

带标题和内容文本的进度对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.PROGRESS,
    titleText: 'This is title',
    contentText: 'This is content text',
).show();

成功对话框

无标题和内容文本的成功对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.SUCCESS,
).show();

只有标题的成功对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.SUCCESS,
    titleText: 'Wow',
).show();

带标题和内容文本的成功对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.SUCCESS,
    titleText: 'Wow',
    contentText: 'Task completed',
).show();

信息对话框

无标题和内容文本的信息对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.INFO,
).show();

只有标题的信息对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.INFO,
    titleText: 'You know',
).show();

带标题和内容文本的信息对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.INFO,
    titleText: 'You know',
    contentText: 'This is an amazing dialog',
).show();

警告对话框

无标题和内容文本的警告对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.WARNING,
).show();

只有标题的警告对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.WARNING,
    titleText: 'Wait',
).show();

带标题和内容文本的警告对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.WARNING,
    titleText: 'Wait',
    contentText: 'Are you sure you want to delete',
).show();

错误对话框

无标题和内容文本的错误对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.ERROR,
).show();

只有标题的错误对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.ERROR,
    titleText: 'Oops',
).show();

带标题和内容文本的错误对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.ERROR,
    titleText: 'Oops',
    contentText: 'Task Failed',
).show();

成功对话框

带点击事件的成功对话框

StylishDialog(
    context: context,
    alertType: StylishDialog.SUCCESS,
    titleText: 'Wow',
    contentText: 'You did it',
    confirmText: 'Dismiss',
    confirmPressEvent: () {
        //Dismiss stylish dialog
        Navigator.of(context).pop();
    },
).show();

不同的绑定方式

进度对话框绑定成功对话框

StylishDialog dialog = StylishDialog(
    context: context,
    alertType: StylishDialog.PROGRESS,
    titleText: 'Processing...',
    dismissOnTouchOutside: false,
);
dialog.show();

Future.delayed(Duration(seconds: 3), () {
    dialog.changeAlertType(
    alertType: StylishDialog.SUCCESS,
        titleText: 'Congrats!',
        contentText: 'Task completed successfuly',
        confirmPressEvent: () {
            dialog.dismiss();
        },
    confirmText: 'Dismiss',
    );
});

GitHub

https://github.com/MarsadMaqsood/StylishDialogFlutter