Flutter 自定义弹窗插件 cool_alert_two 的使用

cool_alert_two

cool_alert_two 是一个用于在 Flutter 应用中显示动画弹窗的插件。

注意：这是一个对原始 cool_alert 插件的分叉版本，因为该插件在编写本文时已不再被积极维护！

Cool Alert Two 包含了我在自己的项目中使用的各种错误修复和改进，并且我正在将其作为公共分叉进行维护。欢迎贡献！

使用

要使用此插件，在您的 pubspec.yaml 文件中添加 cool_alert_two 作为依赖项。然后在文件中添加以下导入：

import 'package:cool_alert_two/cool_alert_two.dart';

示例

示例代码

// 引入必要的库
import 'package:cool_alert_two/cool_alert_two.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cool Alert',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: GoogleFonts.poppins().fontFamily,
      ),
      home: MyHomePage(title: 'Cool Alert'),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 构建按钮
  Widget _buildButton({VoidCallback? onTap, required String text, Color? color}) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10.0),
      child: MaterialButton(
        color: color,
        minWidth: double.infinity,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30.0),
        ),
        onPressed: onTap,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 15.0),
          child: Text(
            text,
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 成功弹窗
    final successAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.success,
          text: 'Transaction completed successfully!',
          autoCloseDuration: Duration(seconds: 2),
        );
      },
      text: 'Success',
      color: Colors.green,
    );

    // 错误弹窗
    final errorAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.error,
          title: 'Oops...',
          text: 'Sorry, something went wrong',
          loopAnimation: false,
        );
      },
      text: 'Error',
      color: Colors.red,
    );

    // 警告弹窗
    final warningAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.warning,
          text: 'You just broke protocol',
        );
      },
      text: 'Warning',
      color: Colors.orange,
    );

    // 信息弹窗
    final infoAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.info,
          text: 'Buy two, get one free',
        );
      },
      text: 'Info',
      color: Colors.blue[100],
    );

    // 确认弹窗
    final confirmAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.confirm,
          text: 'Do you want to logout',
          confirmBtnText: 'Yes',
          cancelBtnText: 'No',
          confirmBtnColor: Colors.green,
        );
      },
      text: 'Confirm',
      color: Colors.lightGreen,
    );

    // 加载弹窗
    final loadingAlert = _buildButton(
      onTap: () {
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.loading,
        );
      },
      text: 'Loading',
      color: Colors.grey,
    );

    // 自定义弹窗
    final customAlert = _buildButton(
      onTap: () {
        var _message = '';
        CoolAlertTwo.show(
          context: context,
          type: CoolAlertTwoType.custom,
          barrierDismissible: true,
          confirmBtnText: 'Save',
          widget: TextFormField(
            decoration: InputDecoration(
              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 CoolAlertTwo.show(
                context: context,
                type: CoolAlertTwoType.error,
                text: 'Please input something',
              );
              return;
            }
            Navigator.pop(context);
            await Future.delayed(Duration(milliseconds: 1000));
            await CoolAlertTwo.show(
              context: context,
              type: CoolAlertTwoType.success,
              text: "Phone number '$_message' has been saved!.",
            );
          },
        );
      },
      text: 'Custom',
      color: Colors.orange,
    );

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            successAlert,
            errorAlert,
            warningAlert,
            infoAlert,
            confirmAlert,
            loadingAlert,
            customAlert,
          ],
        ),
      ),
    );
  }
}