Flutter对话框插件f_dialog的使用

特性

• 信息对话框（Info Dialog）
• 进度对话框（Progress Dialog）
• 成功对话框（Success Dialog）
• 失败对话框（Fail Dialog）
• 错误对话框（Error Dialog）
• 自定义操作对话框（Custom Action Dialog）

这些对话框可以在不同的屏幕中使用，并根据对话框类型进行关闭。

对话框内容支持本地化。

注意事项

当你使用自定义对话框时，无需在MaterialApp中添加本地化。你可以在使用自定义对话框的地方从你的本地化变量或文件中添加这些字段。

图片

使用方法

在main.dart文件中：

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return FDialog(
      theme: ThemeData(),
      child: MaterialApp(
        builder: (context, child) {
          FDialog.of(context)
              .setLocalization(const Localization(
            errorContent: 'Something went wrong',
            errorTitle: 'Opps!',
            failedContent: 'Your process failed.',
            failedTitle: 'Failed',
            infoContent: 'This is a info body',
            onCancelText: 'Cancel',
            infoTitle: 'Info',
            onConfirmText: 'OK',
            processingContent: 'Processing...',
            processingTitle: 'Process',
            successTitle: 'Success',
            successContent:
                'Your process has been successfully completed',
          ));
          return const Scaffold(
            body: MyHomePage(),
          );
        },
      ),
    );
  }
}

创建对话框

要创建一个对话框，可以使用以下代码：

FDialog.of(context)?.show(
  context,
  dialogType: DialogTypeEnums.success,
  icon: const Icon(
    Icons.safety_check_rounded,
  ),
  customPadding:
      const EdgeInsets.all(20),
);

关闭最后一个显示的对话框

要关闭屏幕上最后显示的对话框，可以使用以下代码：

FDialog.close(context);

关闭特定的对话框

要关闭屏幕上显示的特定对话框，可以使用以下代码：

FDialog.close(context, DialogTypeEnums.progress);

创建自定义对话框

要创建自定义对话框，可以使用以下代码：

FDialog.of(context).custom(
  context,
  icon: const Icon(
    Icons.info_outline_rounded,
    color: Colors.red,
  ),
  backgroundColor: Colors.white,
  isDismissible: false,
  customDialogTitle: 'Custom Dialog Title',
  customDialogBody: 'Custom Dialog Body',
  onConfirmText: 'OK',
  onCancelText: 'NO',
  onConfirmButtonStyle: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.green)),
  onCancelButtonStyle: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.red)),
  contentTextStyle: const TextStyle(
    fontWeight: FontWeight.bold,
    color: Colors.blue,
    fontSize: 20),
  titleTextStyle: const TextStyle(
    fontWeight: FontWeight.bold,
    color: Colors.red,
    fontSize: 20),
  onCancel: () {
    Navigator.pop(context);
  },
  onConfirm: () {
    Navigator.pop(context);
  },
);