Flutter美观对话框插件beautiful_alert_dialog的使用

Flutter美观对话框插件beautiful_alert_dialog的使用

通过此插件，你可以在应用程序中展示美观且可自定义的警告对话框。

开始使用

import 'package:beautiful_alert_dialog/beautiful_alert_dialog.dart';

使用方法

在点击事件或触摸事件中使用以下代码：

CustomAlertBox.showCustomAlertBox(
   context: context,
   willDisplayWidget:
   Container(
   child: Text("Helo"),
   )
);

特性

  1. 可以显示警告对话框。
  2. 根据需要装饰你的对话框。

完整示例代码

以下是完整的示例代码，展示了如何在Flutter应用中使用beautiful_alert_dialog插件来创建一个美观的警告对话框。

import 'package:beautiful_alert_dialog/beautiful_alert_dialog.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // 这个小部件是你的应用的根组件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyCustomAlertDialogPage(),
    );
  }
}

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

  [@override](/user/override)
  _MyCustomAlertDialogPageState createState() => _MyCustomAlertDialogPageState();
}

class _MyCustomAlertDialogPageState extends State<MyCustomAlertDialogPage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: Text("Custom Alert Dialog"),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () async {
            // 显示自定义警告对话框
            await CustomAlertBox.showCustomAlertBox(
                context: context,
                willDisplayWidget: Container(
                  height: 200,
                  alignment: Alignment.center,
                  child: Text("Helo"),
                ));
          },
          label: Text('Open alert dialog'),
          icon: Icon(Icons.open_in_browser),
          backgroundColor: Colors.pink,
        ));
  }
}

更多关于Flutter美观对话框插件beautiful_alert_dialog的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter美观对话框插件beautiful_alert_dialog的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


beautiful_alert_dialog 是一个用于 Flutter 的第三方插件，它提供了美观且高度可定制的对话框。使用这个插件，你可以轻松地创建各种风格的对话框，包括带有图标、按钮、输入框等的对话框。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 beautiful_alert_dialog 依赖：

dependencies:
  flutter:
    sdk: flutter
  beautiful_alert_dialog: ^1.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

以下是一个简单的示例，展示了如何使用 beautiful_alert_dialog 创建一个带有标题、描述和按钮的对话框。

import 'package:flutter/material.dart';
import 'package:beautiful_alert_dialog/beautiful_alert_dialog.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Beautiful Alert Dialog Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              showDialog(
                context: context,
                builder: (BuildContext context) {
                  return BeautifulAlertDialog(
                    context: context,
                    title: "标题",
                    description: "这是一个美丽的对话框示例。",
                    type: BeautifulAlertDialogType.success,
                    primaryButtonText: "确定",
                    onPrimaryButtonPressed: () {
                      Navigator.of(context).pop();
                    },
                  );
                },
              );
            },
            child: Text('显示对话框'),
          ),
        ),
      ),
    );
  }
}

参数说明

  • context: 上下文，通常是 BuildContext。
  • title: 对话框的标题。
  • description: 对话框的描述内容。
  • type: 对话框的类型，可以是 BeautifulAlertDialogType.success, BeautifulAlertDialogType.warning, BeautifulAlertDialogType.error, BeautifulAlertDialogType.info 等。
  • primaryButtonText: 主按钮的文本。
  • onPrimaryButtonPressed: 主按钮的点击事件。

自定义对话框

beautiful_alert_dialog 提供了丰富的自定义选项，你可以根据需要调整对话框的外观和行为。例如，你可以设置对话框的图标、按钮颜色、背景颜色等。

BeautifulAlertDialog(
  context: context,
  title: "自定义对话框",
  description: "这是一个高度自定义的对话框。",
  type: BeautifulAlertDialogType.info,
  primaryButtonText: "确定",
  onPrimaryButtonPressed: () {
    Navigator.of(context).pop();
  },
  secondaryButtonText: "取消",
  onSecondaryButtonPressed: () {
    Navigator.of(context).pop();
  },
  alertIcon: Icon(Icons.info, color: Colors.blue),
  backgroundColor: Colors.grey[200],
  buttonStyle: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.blue),
    textStyle: MaterialStateProperty.all(TextStyle(color: Colors.white)),
  ),
);
回到顶部