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

发布于 1周前 作者 nodeper 来自 Flutter

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

特性

简单地向用户展示弹窗，或者创建你自己的自定义弹窗。

图片

入门指南

只需导入该包：

import 'package:awesome_alert/awesome_alert.dart';

初始化类时传入有效的上下文：

AwesomeAlert awesomeAlert = AwesomeAlert(context: context);

享受吧！

使用方法

这是一个简单的无状态屏幕，展示了如何使用该插件的示例。

简单示例

如何显示一个包含标题和描述的简单示例：

_simpleAlert() {
  AwesomeAlert awesomeAlert = AwesomeAlert(context: context);
  awesomeAlert.showAlert(
    title: "Example",
    description: "A simple description that will be showed on a alert",
    confirmText: "OK",
    confirmAction: () {
      ScaffoldMessenger.of(context).clearSnackBars();
      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("Pressed")));
      awesomeAlert.hideAlert();
    },
    cancelText: "Back",
    cancelAction: () {
      awesomeAlert.hideAlert();
    },
    cancelButtonTextStyle: const TextStyle(
      fontSize: 14,
      color: Colors.white,
      fontWeight: FontWeight.w400,
    ),
  );
}

加载示例

如何显示一个加载中的弹窗：

_alertLoading() {
  AwesomeAlert awesomeAlert = AwesomeAlert(context: context);
  awesomeAlert.alertLoading(
      sizeProgress: 40,
      paddingFromProgress: 15,
      onComplete: () {
        ScaffoldMessenger.of(context).clearSnackBars();
        ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text("Alert hidded")));
      });
}

带有图像的弹窗

如何在弹窗中显示一张图像：

_alertImage() {
  AwesomeAlert awesomeAlert = AwesomeAlert(context: context);
  awesomeAlert.alertImage(
    cancelable: true,
    type: ImageType.imageFromWeb,
    path: "https://riccimobile.com.br/github/flutter/awsomealert/cat.jpeg",
    borderRadius: 15,
    fit: BoxFit.cover,
  );
}

自定义弹窗内容

如何创建一个带有自定义内容的弹窗：

_customAlert() {
  AwesomeAlert awesomeAlert = AwesomeAlert(context: context);
  awesomeAlert.showCustomAlert(
    body: Padding(
      padding: const EdgeInsets.all(15),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "Custom Example",
            style: TextStyle(
              color: Colors.red[600],
              fontSize: 26,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 20),
          Icon(
            Icons.check_box,
            color: Colors.green[700],
            size: 60,
          ),
          const SizedBox(height: 20),
          Text(
            "Custom description for a custom alert",
            style: TextStyle(
              color: Colors.grey[800],
              fontSize: 14,
              fontWeight: FontWeight.w400,
            ),
          ),
          const SizedBox(height: 20),
          const CircularProgressIndicator(color: Colors.blue),
          const SizedBox(height: 20),
          Row(
            children: [
              Expanded(
                child: ElevatedButton(
                  onPressed: () {
                    awesomeAlert.hideAlert();
                  },
                  child: const Text("Hide alert"),
                ),
              )
            ],
          )
        ],
      ),
    ),
  );
}

示例页面

class AwesomeAlertExample extends StatelessWidget {
  const AwesomeAlertExample({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Awesome Alert - Ricci Mobile")),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            MaterialButton(
              onPressed: _simpleAlert,
              color: Colors.blue,
              height: 40,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50),
              ),
              child: const Text(
                "Show simple Alert",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            MaterialButton(
              onPressed: _customAlert,
              color: Colors.green,
              height: 40,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50),
              ),
              child: const Text(
                "Show custom Alert",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            MaterialButton(
              onPressed: _alertLoading,
              color: Colors.red,
              height: 40,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50),
              ),
              child: const Text(
                "Show Alert loading",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            MaterialButton(
              onPressed: _alertImage,
              color: Colors.pink,
              height: 40,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50),
              ),
              child: const Text(
                "Show Alert image",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用awesome_alert插件来创建自定义弹窗的示例代码。这个插件允许你轻松地创建各种样式和配置的弹窗。

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

dependencies:
  flutter:
    sdk: flutter
  awesome_alert: ^2.0.0  # 请确保使用最新版本

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

接下来，在你的Dart文件中，你可以按照以下步骤使用AwesomeAlert：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  void showAlert() {
    AwesomeAlert(
      context: context,
      animType: AnimType.SCALE,
      title: "Title",
      desc: "This is the description of the alert!",
      closeIcon: Icon(Icons.close),
      btnOkText: "OK",
      btnCancelText: "Cancel",
      btnOkColor: Colors.blue,
      btnCancelColor: Colors.grey,
      hasBtnCancel: true,
      onOkPressed: () {
        // 当点击OK按钮时执行的代码
        print("OK Pressed");
      },
      onCancelPressed: () {
        // 当点击取消按钮时执行的代码
        print("Cancel Pressed");
      },
    ).show();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Awesome Alert Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: showAlert,
          child: Text('Show Alert'),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个按钮。当点击按钮时，会显示一个自定义弹窗。

代码解释

  1. 依赖导入：

    import 'package:awesome_alert/awesome_alert.dart';

  2. 弹窗显示函数：

    void showAlert() {
  AwesomeAlert(
    context: context,
    animType: AnimType.SCALE,
    title: "Title",
    desc: "This is the description of the alert!",
    closeIcon: Icon(Icons.close),
    btnOkText: "OK",
    btnCancelText: "Cancel",
    btnOkColor: Colors.blue,
    btnCancelColor: Colors.grey,
    hasBtnCancel: true,
    onOkPressed: () {
      print("OK Pressed");
    },
    onCancelPressed: () {
      print("Cancel Pressed");
    },
  ).show();
}

  3. 按钮点击事件：

    ElevatedButton(
  onPressed: showAlert,
  child: Text('Show Alert'),
),

自定义选项

  • animType：设置弹窗动画类型。
  • title和desc：设置弹窗的标题和描述。
  • closeIcon：设置关闭图标。
  • btnOkText和btnCancelText：设置OK和取消按钮的文本。
  • btnOkColor和btnCancelColor：设置按钮颜色。
  • hasBtnCancel：是否显示取消按钮。
  • onOkPressed和onCancelPressed：点击按钮时执行的回调。

这个示例展示了如何使用awesome_alert插件来创建和显示一个自定义弹窗。你可以根据自己的需求进一步自定义弹窗的样式和行为。

回到顶部