Flutter弹窗插件simple_alert

Flutter弹窗插件simple_alert_dialog的使用

Simple Alert Dialog

最简单的弹窗小部件。

喜欢我的工作吗？支持我

示例

完整的示例请查看example/main.dart

SimpleAlertDialog.show(
  context,
  assetImagepath: AnimatedImage.error,
  buttonsColor: Colors.red,
  title: AlertTitleText('Are you sure ?'),
  content: AlertContentText(
    'Do you really want to delete your account ? You will not be able to undo this action.',
  ),
  onConfirmButtonPressed: (ctx) {
    Navigator.pop(ctx);
  },
);

截图

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Alert Dialog',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Simple Alert Dialog'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  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(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: [
            TextButton(
              child: const Text('显示错误弹窗'),
              onPressed: () async {
                // 显示错误弹窗
                SimpleAlertDialog.show(
                  context,
                  assetImagepath: AnimatedImage.error,
                  buttonsColor: Colors.red,
                  title: AlertTitleText('Are you sure ?'), // 标题
                  content: AlertContentText(
                    'Do you really want to delete your account ? You will not be able to undo this action.', // 内容
                  ),
                  onConfirmButtonPressed: (ctx) {
                    Navigator.pop(ctx); // 关闭弹窗
                  },
                );
              },
            ),
            TextButton(
              child: const Text('显示确认弹窗'),
              onPressed: () async {
                // 显示确认弹窗
                SimpleAlertDialog.show(
                  context,
                  assetImagepath: AnimatedImage.confirm,
                  buttonsColor: Colors.teal,
                  title: AlertTitleText('Are you sure ?'),
                  content: AlertContentText(
                    'Do you really want to delete your account ? You will not be able to undo this action.',
                  ),
                  onConfirmButtonPressed: (ctx) {
                    Navigator.pop(ctx);
                  },
                );
              },
            ),
            TextButton(
              child: const Text('显示信息弹窗'),
              onPressed: () async {
                // 显示信息弹窗
                SimpleAlertDialog.show(
                  context,
                  assetImagepath: AnimatedImage.info,
                  buttonsColor: Colors.yellow,
                  title: AlertTitleText('Are you sure ?'),
                  content: AlertContentText(
                    'Do you really want to delete your account ? You will not be able to undo this action.',
                  ),
                  onConfirmButtonPressed: (ctx) {
                    Navigator.pop(ctx);
                  },
                );
              },
            ),
            TextButton(
              child: const Text('显示加载弹窗'),
              onPressed: () async {
                // 显示加载弹窗
                SimpleAlertDialog.show(
                  context,
                  assetImagepath: AnimatedImage.loading,
                  buttonsColor: Colors.blue,
                  title: AlertTitleText('Are you sure ?'),
                  content: AlertContentText(
                    'Do you really want to delete your account ? You will not be able to undo this action.',
                  ),
                  onConfirmButtonPressed: (ctx) {
                    Navigator.pop(ctx);
                  },
                );
              },
            ),
            TextButton(
              child: const Text('显示成功弹窗'),
              onPressed: () async {
                // 显示成功弹窗
                SimpleAlertDialog.show(
                  context,
                  assetImagepath: AnimatedImage.success,
                  buttonsColor: Colors.green,
                  title: AlertTitleText('Are you sure ?'),
                  content: AlertContentText(
                    'Do you really want to delete your account ? You will not be able to undo this action.',
                  ),
                  onConfirmButtonPressed: (ctx) {
                    Navigator.pop(ctx);
                  },
                );
              },
            ),
            TextButton(
              child: const Text('显示警告弹窗'),
              onPressed: () async {
                // 显示警告弹窗
                SimpleAlertDialog.show(
                  context,
                  assetImagepath: AnimatedImage.warning,
                  buttonsColor: Colors.red,
                  title: AlertTitleText('Are you sure ?'),
                  content: AlertContentText(
                    'Do you really want to delete your account ? You will not be able to undo this action.',
                  ),
                  onConfirmButtonPressed: (ctx) {
                    Navigator.pop(ctx);
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

sinazl 1楼

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

当然，以下是一个关于如何在Flutter项目中使用simple_alert_dialog插件的示例代码。这个插件提供了一个简单的方法来显示弹窗（对话框）。

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

dependencies:
  flutter:
    sdk: flutter
  simple_alert_dialog: ^1.0.0  # 请确保使用最新版本

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个完整的示例，展示如何在按钮点击时显示一个简单的弹窗：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Alert Dialog Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Simple Alert'),
                  content: Text('This is a simple alert dialog!'),
                  actions: <Widget>[
                    SimpleAlertDialogAction(
                      title: 'OK',
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      color: Colors.blue,
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Show Alert'),
        ),
      ),
    );
  }
}

不过，上面的代码其实并没有直接使用simple_alert_dialog插件，因为Flutter自带的AlertDialog已经能够满足这个简单的需求。如果你希望使用simple_alert_dialog插件提供的功能，代码会有所不同。以下是一个使用simple_alert_dialog插件的示例：

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

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Alert Dialog Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showSimpleDialog(
              context: context,
              title: 'Simple Alert',
              content: 'This is a simple alert dialog using simple_alert_dialog plugin!',
              actions: [
                SimpleDialogAction(
                  title: 'OK',
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  color: Colors.blue,
                ),
              ],
            );
          },
          child: Text('Show Alert'),
        ),
      ),
    );
  }
}

注意，simple_alert_dialog插件可能提供了更多自定义选项和更简洁的API来创建对话框。但请确保查阅该插件的最新文档，因为API可能会随时间而变化。如果simple_alert_dialog插件没有showSimpleDialog这样直接的方法，你可能需要查看文档来了解如何正确创建和显示对话框。