Flutter简易弹窗插件cleaneasyalert的使用

简介

cleaneasyalert 是一个用于在 Flutter 中显示动画弹窗的插件，支持成功、错误、警告、确认、加载或自定义弹窗样式。以下是该插件的一些主要特性：

易用性：简单易上手。
预定义样式：内置多种美观的弹窗样式。
预定义标题与操作：支持快速设置标题和按钮文字。
高度可定制化：可以根据需求进行个性化设置。
支持动画切换：可以更改弹窗的动画效果。
自动关闭功能：可以设置弹窗自动关闭的时间。
点击遮罩层关闭：支持用户点击遮罩层关闭弹窗。

安装

在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  cleaneasyalert: <最新版本>

然后运行以下命令以获取依赖：

$ flutter pub get

导入

在 Dart 文件中导入插件：

import 'package:cleaneasyalert/cleaneasyalert.dart';

使用示例

成功弹窗

展示一个成功的提示弹窗。

EasyAlert.show(
  context: context,
  type: EasyAlertType.success,
  text: 'Homework completed Successfully!',
);

错误弹窗

展示一个错误提示弹窗。

EasyAlert.show(
  context: context,
  type: EasyAlertType.error,
  title: 'Oops...',
  text: 'Sorry, something went wrong',
);

警告弹窗

展示一个警告提示弹窗。

EasyAlert.show(
  context: context,
  type: EasyAlertType.warning,
  text: 'You just broke protocol',
);

信息弹窗

展示一个信息提示弹窗。

EasyAlert.show(
  context: context,
  type: EasyAlertType.info,
  text: 'Buy two, get one free',
);

确认弹窗

展示一个确认弹窗，包含确认和取消按钮。

EasyAlert.show(
  context: context,
  type: EasyAlertType.confirm,
  text: 'Do you want to logout',
  confirmBtnText: 'Yes',
  cancelBtnText: 'No',
  confirmBtnColor: Colors.green,
);

加载弹窗

展示一个加载中的弹窗。

EasyAlert.show(
  context: context,
  type: EasyAlertType.loading,
  title: 'Loading',
  text: 'Fetching your data',
);

自定义弹窗

展示一个带有自定义表单的弹窗。

EasyAlert.show(
  context: context,
  type: EasyAlertType.custom,
  barrierDismissible: true,
  confirmBtnText: 'Save',
  customAsset: 'assets/custom.gif',
  widget: TextFormField(
    decoration: const InputDecoration(
      alignLabelWithHint: true,
      hintText: 'Enter Phone Number',
      prefixIcon: Icon(Icons.phone_outlined),
    ),
    textInputAction: TextInputAction.next,
    keyboardType: TextInputType.phone,
    onChanged: (value) => message = value,
  ),
  onConfirmBtnTap: () async {
    if (message.length < 5) {
      await EasyAlert.show(
        context: context,
        type: EasyAlertType.error,
        text: 'Please input something',
      );
      return;
    }
    Navigator.pop(context);
    await Future.delayed(const Duration(milliseconds: 1000));
    await EasyAlert.show(
      context: context,
      type: EasyAlertType.success,
      text: "Phone number '$message' has been saved!.",
    );
  },
);

完整示例代码

import 'package:flutter/material.dart';
import 'package:cleaneasyalert/cleaneasyalert.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: 'EasyAlert Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final successAlert = buildButton(
      onTap: () {
        EasyAlert.show(
          context: context,
          type: EasyAlertType.success,
          text: 'Transaction Completed Successfully!',
          autoCloseDuration: const Duration(seconds: 4),
        );
      },
      title: 'Success',
      text: 'Transaction Completed Successfully!',
      leadingImage: 'assets/success.gif',
    );

    final errorAlert = buildButton(
      onTap: () {
        EasyAlert.show(
          context: context,
          type: EasyAlertType.error,
          title: 'Oops...',
          text: 'Sorry, something went wrong',
          backgroundColor: Colors.black,
          titleColor: Colors.white,
          textColor: Colors.white,
        );
      },
      title: 'Error',
      text: 'Sorry, something went wrong',
      leadingImage: 'assets/error.gif',
    );

    final warningAlert = buildButton(
      onTap: () {
        EasyAlert.show(
          context: context,
          type: EasyAlertType.warning,
          text: 'You just broke protocol',
        );
      },
      title: 'Warning',
      text: 'You just broke protocol',
      leadingImage: 'assets/warning.gif',
    );

    final infoAlert = buildButton(
      onTap: () {
        EasyAlert.show(
          context: context,
          type: EasyAlertType.info,
          text: 'Buy two, get one free',
        );
      },
      title: 'Info',
      text: 'Buy two, get one free',
      leadingImage: 'assets/info.gif',
    );

    final confirmAlert = buildButton(
      onTap: () {
        EasyAlert.show(
          context: context,
          type: EasyAlertType.confirm,
          text: 'Do you want to logout',
          confirmBtnText: 'Yes',
          cancelBtnText: 'No',
          confirmBtnColor: Colors.white,
          backgroundColor: Colors.black,
          confirmBtnTextStyle: const TextStyle(
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
          barrierColor: Colors.white,
          titleColor: Colors.white,
          textColor: Colors.white,
        );
      },
      title: 'Confirm',
      text: 'Do you want to logout',
      leadingImage: 'assets/confirm.gif',
    );

    final loadingAlert = buildButton(
      onTap: () {
        EasyAlert.show(
          context: context,
          type: EasyAlertType.loading,
          title: 'Loading',
          text: 'Fetching your data',
        );
      },
      title: 'Loading',
      text: 'Fetching your data',
      leadingImage: 'assets/loading.gif',
    );

    final customAlert = buildButton(
      onTap: () {
        var message = '';
        EasyAlert.show(
          context: context,
          type: EasyAlertType.custom,
          barrierDismissible: true,
          confirmBtnText: 'Save',
          customAsset: 'assets/custom.gif',
          widget: TextFormField(
            decoration: const InputDecoration(
              alignLabelWithHint: true,
              hintText: 'Enter Phone Number',
              prefixIcon: Icon(Icons.phone_outlined),
            ),
            textInputAction: TextInputAction.next,
            keyboardType: TextInputType.phone,
            onChanged: (value) => message = value,
          ),
          onConfirmBtnTap: () async {
            if (message.length < 5) {
              await EasyAlert.show(
                context: context,
                type: EasyAlertType.error,
                text: 'Please input something',
              );
              return;
            }
            Navigator.pop(context);
            await Future.delayed(const Duration(milliseconds: 1000));
            await EasyAlert.show(
              context: context,
              type: EasyAlertType.success,
              text: "Phone number '$message' has been saved!.",
            );
          },
        );
      },
      title: 'Custom',
      text: 'Custom Widget Alert',
      leadingImage: 'assets/custom.gif',
    );

    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      appBar: AppBar(
        elevation: 1,
        centerTitle: true,
        backgroundColor: Colors.white,
        title: Text(
          "Ease Alert Example",
          style: Theme.of(context).textTheme.titleLarge,
        ),
      ),
      body: ListView(
        children: [
          const SizedBox(height: 20),
          successAlert,
          const SizedBox(height: 20),
          errorAlert,
          const SizedBox(height: 20),
          warningAlert,
          const SizedBox(height: 20),
          infoAlert,
          const SizedBox(height: 20),
          confirmAlert,
          const SizedBox(height: 20),
          loadingAlert,
          const SizedBox(height: 20),
          customAlert,
          const SizedBox(height: 20),
        ],
      ),
    );
  }

  Card buildButton({
    required onTap,
    required title,
    required text,
    required leadingImage,
  }) {
    return Card(
      shape: const StadiumBorder(),
      margin: const EdgeInsets.symmetric(
        horizontal: 20,
      ),
      clipBehavior: Clip.antiAlias,
      elevation: 1,
      child: ListTile(
        onTap: onTap,
        leading: CircleAvatar(
          backgroundImage: AssetImage(
            leadingImage,
          ),
        ),
        title: Text(title ?? ""),
        subtitle: Text(text ?? ""),
        trailing: const Icon(
          Icons.keyboard_arrow_right_rounded,
        ),
      ),
    );
  }
}

更多关于Flutter简易弹窗插件cleaneasyalert的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

h691938207 1楼

更多关于Flutter简易弹窗插件cleaneasyalert的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

CleanEasyAlert 是一个用于 Flutter 的简易弹窗插件，它可以帮助你快速创建和显示各种类型的弹窗，如信息提示、确认对话框、加载指示器等。使用 CleanEasyAlert 可以让你的代码更加简洁和易读。

安装

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

dependencies:
  flutter:
    sdk: flutter
  cleaneasyalert: ^1.0.0 # 请查看最新版本

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

使用方法

1. 导入包

import 'package:cleaneasyalert/cleaneasyalert.dart';

2. 显示简单提示框

CleanEasyAlert.showInfo(
  context: context,
  title: "提示",
  message: "这是一个简单的提示框",
);

3. 显示确认对话框

CleanEasyAlert.showConfirm(
  context: context,
  title: "确认",
  message: "你确定要执行此操作吗？",
  confirmText: "确定",
  cancelText: "取消",
  onConfirm: () {
    // 用户点击确定后的操作
    print("用户点击了确定");
  },
  onCancel: () {
    // 用户点击取消后的操作
    print("用户点击了取消");
  },
);

4. 显示加载指示器

CleanEasyAlert.showLoading(
  context: context,
  message: "加载中...",
);

// 关闭加载指示器
CleanEasyAlert.hideLoading(context);

5. 显示自定义弹窗

CleanEasyAlert.showCustom(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text("自定义弹窗"),
      content: Text("这是一个自定义的弹窗内容。"),
      actions: <Widget>[
        TextButton(
          child: Text("关闭"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

参数说明

context: BuildContext，用于显示弹窗。
title: 弹窗的标题。
message: 弹窗的内容信息。
confirmText: 确认按钮的文本。
cancelText: 取消按钮的文本。
onConfirm: 用户点击确认按钮后的回调函数。
onCancel: 用户点击取消按钮后的回调函数。
builder: 用于构建自定义弹窗的回调函数。

注意事项

CleanEasyAlert 是基于 Flutter 的 showDialog 方法封装的，因此在显示弹窗时需要传入 context。
你可以根据需求自定义弹窗的样式和行为。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CleanEasyAlert 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  CleanEasyAlert.showInfo(
                    context: context,
                    title: "提示",
                    message: "这是一个简单的提示框",
                  );
                },
                child: Text("显示提示框"),
              ),
              ElevatedButton(
                onPressed: () {
                  CleanEasyAlert.showConfirm(
                    context: context,
                    title: "确认",
                    message: "你确定要执行此操作吗？",
                    confirmText: "确定",
                    cancelText: "取消",
                    onConfirm: () {
                      print("用户点击了确定");
                    },
                    onCancel: () {
                      print("用户点击了取消");
                    },
                  );
                },
                child: Text("显示确认对话框"),
              ),
              ElevatedButton(
                onPressed: () {
                  CleanEasyAlert.showLoading(
                    context: context,
                    message: "加载中...",
                  );

                  // 模拟延迟关闭加载指示器
                  Future.delayed(Duration(seconds: 3), () {
                    CleanEasyAlert.hideLoading(context);
                  });
                },
                child: Text("显示加载指示器"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}