Flutter弹窗提示插件pop_alert的使用

Flutter弹窗提示插件pop_alert的使用

Pop Alert

Pop alert 是一个响应式且带有动画效果的弹窗插件，它是 Flutter 原生弹窗（如 AlertDialog）的一个美观替代品。

PopAlert

安装

  1. 在 pubspec.yaml 文件中添加最新版本的插件，并运行 flutter pub get：
dependencies:
  pop_alert: ^0.0.30
  1. 导入插件并在你的 Flutter 应用程序中使用它：
import 'package:pop_alert/pop_alert.dart';

示例

Pop Alert 提供了多种属性可以进行修改，例如 icon, title, text, button 等。

简单弹窗

简单的弹窗不带动画图标。

PopAlert.simpleAlert(
    context: context,
    title: 'Hello world!',
    button: 'OK',
)

PopAlert.simpleAlert(
    context: context,
    title: 'Title goes here!',
    text: '...and text goes here!',
    button: 'OK',
)

带图标弹窗

带图标的弹窗会展示四种类型的图标之一：成功、失败、信息、警告。

PopAlert.iconAlert(
    context: context,
    icon: PopAlertIcon.success,
    title: 'Good job!',
    button: 'OK',
)

PopAlert.iconAlert(
    context: context,
    icon: PopAlertIcon.success,
    title: 'Good job!',
    text: 'You clicked the button!',
    button: 'OK',
)

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 Pop Alert 插件。

import 'package:flutter/material.dart';
import 'package:pop_alert/pop_alert.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 const MaterialApp(
      title: 'Pop Alert',
      home: 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) {
    return Scaffold(
      body: ListView(
        children: [
          const SizedBox(height: 20),
          Center(
            child: GestureDetector(
              onTap: () => PopAlert.simpleAlert(
                context: context,
                title: 'Title goes here!',
                text: '...and text goes here!',
                button: 'OK',
              ),
              child: Container(
                height: 100,
                width: 100,
                color: Colors.blue,
                child: Center(
                  child: RichText(
                    text: const TextSpan(
                      text: 'Simple Alert',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: GestureDetector(
              onTap: () => PopAlert.iconAlert(
                context: context,
                icon: PopAlertIcon.success,
                title: 'Good job!',
                text: 'You clicked the button!',
                button: 'OK',
              ),
              child: Container(
                height: 100,
                width: 100,
                color: Colors.blue,
                child: Center(
                  child: RichText(
                    text: const TextSpan(
                      text: 'Icon Alert',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用pop_alert插件来实现弹窗提示的示例代码。首先，你需要确保已经在你的pubspec.yaml文件中添加了pop_alert插件的依赖。

添加依赖

在你的pubspec.yaml文件中，添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  pop_alert: ^latest_version  # 请替换为实际的最新版本号

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

使用示例

以下是一个完整的示例，展示如何在Flutter应用中使用pop_alert插件来显示弹窗提示。

main.dart

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {

  void showAlert() {
    showMaterialAlert(
      context: context,
      title: "提示",
      description: "这是一个弹窗提示！",
      buttons: [
        DialogButton(
          child: Text("取消"),
          color: Colors.grey,
          onPressed: () {
            Navigator.pop(context);
          },
          width: 120,
        ),
        DialogButton(
          child: Text("确定"),
          color: Colors.blue,
          onPressed: () {
            // 点击确定后的逻辑
            Navigator.pop(context);
            print("点击确定按钮");
          },
          width: 120,
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter PopAlert Demo"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: showAlert,
          child: Text("显示弹窗"),
        ),
      ),
    );
  }
}

解释

  1. 添加依赖：在pubspec.yaml中添加pop_alert依赖。
  2. 创建主应用：在main.dart中创建一个Flutter应用，其中包含一个主页面MyHomePage。
  3. 定义弹窗逻辑：在MyHomePage的_MyHomePageState中定义一个showAlert方法，该方法使用showMaterialAlert函数来显示弹窗提示。
  4. 按钮和回调：在showMaterialAlert中定义弹窗的标题、描述以及按钮。每个按钮都有相应的文本、颜色、点击回调以及宽度。
  5. 显示按钮：在页面的中心添加一个ElevatedButton，点击该按钮时会调用showAlert方法来显示弹窗。

注意事项

  • 请确保pop_alert插件的版本号是最新的，或者在pubspec.yaml中使用^符号来自动获取最新版本。
  • 根据需要调整弹窗的样式和内容。

以上代码展示了如何在Flutter项目中使用pop_alert插件来实现简单的弹窗提示功能。

回到顶部