Flutter弹窗提示插件simple_alert_box的使用

Flutter弹窗提示插件simple_alert_box的使用

特性

  • 简单易用
  • 支持暗色主题
  • 可自定义按钮

使用方法

AlertBox.showAlertBox(
  context: context,
  darkTheme: true,
  alertText: 'Alert ! Alert ! Alert ! \nMy alert box !!',
  buttonText: 'Example noted',
);

完整示例代码

import 'package:flutter/material.dart';
import 'package:simple_alert_box/simple_alert_box.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: 'Example for alert box',
      theme: ThemeData.dark(),
      home: const MyHomePage(title: 'Alert Box Example'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: TextButton(
          onPressed: () {
            // 显示弹窗
            AlertBox.showAlertBox(
              context: context,
              darkTheme: true,
              title: 'Alert ! Alert ! Alert !',
              body: 'My alert box',
              buttonText1: 'Noted 1',
              buttonText2: 'Noted 2',
              onPressedButton1: () {
                // 关闭弹窗并显示一个提示
                Navigator.pop(context);
                ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                  duration: Duration(milliseconds: 500),
                  content: Text('Button 1 Pressed'),
                ));
              },
              onPressedButton2: () {
                // 关闭弹窗并显示另一个提示
                Navigator.pop(context);
                ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
                  duration: Duration(milliseconds: 500),
                  content: Text('Button 2 Pressed'),
                ));
              },
            );
          },
          child: const Text(
            "点击显示弹窗",
            style: TextStyle(fontSize: 20, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


simple_alert_box 是一个用于 Flutter 的简单弹窗提示插件，它可以帮助你快速创建各种类型的弹窗。以下是使用 simple_alert_box 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  simple_alert_box: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 simple_alert_box 包：

import 'package:simple_alert_box/simple_alert_box.dart';

3. 使用 SimpleAlertBox

SimpleAlertBox 提供了多种类型的弹窗，以下是一些常见的使用示例：

基本弹窗

SimpleAlertBox.showBasicAlert(
  context: context,
  title: '提示',
  message: '这是一个基本弹窗',
);

带确认按钮的弹窗

SimpleAlertBox.showAlertWithButton(
  context: context,
  title: '提示',
  message: '这是一个带确认按钮的弹窗',
  buttonText: '确定',
  onPressed: () {
    // 点击确认按钮后的操作
    print('确认按钮被点击');
  },
);

带确认和取消按钮的弹窗

SimpleAlertBox.showAlertWithTwoButtons(
  context: context,
  title: '提示',
  message: '这是一个带确认和取消按钮的弹窗',
  confirmButtonText: '确认',
  cancelButtonText: '取消',
  onConfirmPressed: () {
    // 点击确认按钮后的操作
    print('确认按钮被点击');
  },
  onCancelPressed: () {
    // 点击取消按钮后的操作
    print('取消按钮被点击');
  },
);

自定义弹窗

你还可以自定义弹窗的样式和行为：

SimpleAlertBox.showCustomAlert(
  context: context,
  title: '自定义弹窗',
  message: '这是一个自定义弹窗',
  alertBox: AlertBox(
    title: Text('自定义标题'),
    content: Text('自定义内容'),
    actions: <Widget>[
      TextButton(
        child: Text('确定'),
        onPressed: () {
          // 点击确定按钮后的操作
          print('确定按钮被点击');
          Navigator.of(context).pop();
        },
      ),
      TextButton(
        child: Text('取消'),
        onPressed: () {
          // 点击取消按钮后的操作
          print('取消按钮被点击');
          Navigator.of(context).pop();
        },
      ),
    ],
  ),
);

4. 其他功能

simple_alert_box 还支持更多的自定义选项，比如设置弹窗的宽度、高度、背景颜色等。你可以根据需要查阅官方文档或源码进行更深入的使用。

5. 注意事项

  • 确保在使用 SimpleAlertBox 时，context 是一个有效的 BuildContext。
  • 如果你需要更复杂的弹窗，可能需要使用 Flutter 的原生 AlertDialog 或其他更高级的弹窗插件。

6. 示例代码

以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('SimpleAlertBox 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  SimpleAlertBox.showBasicAlert(
                    context: context,
                    title: '提示',
                    message: '这是一个基本弹窗',
                  );
                },
                child: Text('显示基本弹窗'),
              ),
              ElevatedButton(
                onPressed: () {
                  SimpleAlertBox.showAlertWithButton(
                    context: context,
                    title: '提示',
                    message: '这是一个带确认按钮的弹窗',
                    buttonText: '确定',
                    onPressed: () {
                      print('确认按钮被点击');
                    },
                  );
                },
                child: Text('显示带确认按钮的弹窗'),
              ),
              ElevatedButton(
                onPressed: () {
                  SimpleAlertBox.showAlertWithTwoButtons(
                    context: context,
                    title: '提示',
                    message: '这是一个带确认和取消按钮的弹窗',
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    onConfirmPressed: () {
                      print('确认按钮被点击');
                    },
                    onCancelPressed: () {
                      print('取消按钮被点击');
                    },
                  );
                },
                child: Text('显示带确认和取消按钮的弹窗'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部