Flutter简洁对话框插件clean

Flutter简洁对话框插件clean_dialog的使用

特性

可定制化
轻量级

开始使用

安装插件 通过以下命令安装插件：
```
flutter pub add clean_dialog
```
导入包 在你想要使用的文件中导入 clean_dialog 包：
```
import 'package:clean_dialog/clean_dialog.dart';
```

使用对话框 在按钮或手势检测器的 onPressed 函数中添加以下代码来显示对话框。这里有两个例子：

成功更新信息的对话框：

ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) => CleanDialog(
        title: '成功',
        content: '你已成功更新你的信息。',
        backgroundColor: const Color(0XFF27ae61),
        titleTextStyle: const TextStyle(
          fontSize: 25,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
        contentTextStyle: const TextStyle(
          fontSize: 16,
          color: Colors.white,
        ),
        actions: [
          CleanDialogActionButtons(
            actionTitle: '接受',
            onPressed: () {},
          ),
          CleanDialogActionButtons(
            actionTitle: '取消',
            onPressed: () => Navigator.pop(context),
            textColor: const Color(0XFFbe3a2c),
          ),
        ],
      ),
    );
  },
  child: const Center(child: Text('第一个例子')),
),

更新信息失败的对话框：

ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (context) => CleanDialog(
        title: '错误',
        content: '我们无法更新你的信息。',
        backgroundColor: const Color(0XFFbe3a2c),
        titleTextStyle: const TextStyle(
          fontSize: 25,
          fontWeight: FontWeight.bold,
          color: Colors.white,
        ),
        contentTextStyle: const TextStyle(
          fontSize: 16,
          color: Colors.white,
        ),
        actions: [
          CleanDialogActionButtons(
            actionTitle: '取消',
            onPressed: () => Navigator.pop(context),
          ),
          CleanDialogActionButtons(
            actionTitle: '重试',
            textColor: const Color(0XFF27ae61),
            onPressed: () {},
          ),
        ],
      ),
    );
  },
  child: const Center(child: Text('第二个例子')),
),

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

h691938207 1楼•1 天前

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

当然，以下是如何在Flutter项目中使用clean_dialog插件来创建简洁对话框的示例代码。clean_dialog是一个用于创建美观和简洁对话框的Flutter插件。

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

dependencies:
  flutter:
    sdk: flutter
  clean_dialog: ^1.0.0  # 请确保使用最新版本

然后运行flutter pub get来获取依赖。

接下来是一个完整的示例代码，展示如何在Flutter应用中使用clean_dialog：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Clean Dialog Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clean Dialog Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () => showAlertDialog(context),
              child: Text('Show Alert Dialog'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => showConfirmationDialog(context),
              child: Text('Show Confirmation Dialog'),
            ),
          ],
        ),
      ),
    );
  }

  void showAlertDialog(BuildContext context) {
    CleanDialog.alert(
      context: context,
      title: 'Alert Dialog',
      content: 'This is an alert dialog!',
      positiveButton: DialogButton(
        onPressed: () {
          // Handle positive button press
          print('Positive button pressed');
          Navigator.pop(context);
        },
        text: 'OK',
      ),
    );
  }

  void showConfirmationDialog(BuildContext context) {
    CleanDialog.confirmation(
      context: context,
      title: 'Confirmation Dialog',
      content: 'Are you sure you want to proceed?',
      positiveButton: DialogButton(
        onPressed: () {
          // Handle positive button press
          print('Positive button pressed');
          Navigator.pop(context);
        },
        text: 'Yes',
        color: Colors.red,
      ),
      negativeButton: DialogButton(
        onPressed: () {
          // Handle negative button press
          print('Negative button pressed');
          Navigator.pop(context);
        },
        text: 'No',
      ),
    );
  }
}

在这个示例中，我们展示了如何使用clean_dialog插件来创建两种类型的对话框：

Alert Dialog：一个包含标题、内容和一个确定按钮的对话框。
Confirmation Dialog：一个包含标题、内容、确定按钮和取消按钮的对话框。

你可以根据需要自定义这些对话框的标题、内容、按钮文本和按钮颜色等属性。希望这个示例对你有帮助！