Flutter弹出提示框插件flutter_prompt的使用

Flutter弹出提示框插件flutter_prompt的使用

简介

flutter_prompt 是一个轻量级的提示库，包括吐司（Toast）、加载（Loading）等。它支持自定义的吐司效果和加载效果，并且吐司和加载不会相互影响。

demo.gif

安装

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

dependencies:
  flutter_prompt: ^latest

然后运行 flutter pub get 来安装该插件。

初始化

方法一

在 MaterialApp 中使用 builder 参数来初始化 flutter_prompt：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Prompt',
      home: YouerPage(title: 'Flutter Prompt'),
      builder: Prompt.init(style: MyCustomStyle()),
    );
  }
}

方法二

在 MaterialApp 中使用 home 参数来初始化 flutter_prompt：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Prompt',
      home: Prompt.initRoot(child: const Home(), style: MyCustomStyle()),
    );
  }
}

如何使用

使用吐司（Toast）

void example() {
  // 显示简单的吐司消息
  Prompt.showToast("你的消息");

  // 吐司并指定位置
  Prompt.showToast("你的消息", alignment: Alignment.topRight);

  // 吐司并指定类型
  Prompt.showToast("你的消息", type: ToastType.success);
  Prompt.showToast("你的消息", type: ToastType.error);
  Prompt.showToast("你的消息", type: ToastType.warning);
  Prompt.showToast("你的消息", type: ToastType.info);

  // 吐司并指定显示时间
  Prompt.showToast("你的消息", duration: Duration(seconds: 3));

  // 自定义吐司内容
  Prompt.showToastWidget((context) => Text("你好"));

  // 显示加载
  Prompt.showLoading();
  Prompt.showLoading(msg: "loading...");

  // 隐藏加载
  Prompt.hideLoading();
}

定制你的组件

在 MyCustomStyle 类中，你可以自定义吐司和加载的样式：

class MyCustomStyle with FlutterPromptCustomStyle {
  // 自定义颜色
  [@override](/user/override)
  Color get colorDefault => super.colorDefault;

  [@override](/user/override)
  Color get colorError => super.colorError;

  [@override](/user/override)
  Color get colorInfo => super.colorInfo;

  [@override](/user/override)
  Color get colorSuccess => super.colorSuccess;

  [@override](/user/override)
  Color get colorWarning => super.colorWarning;

  // 自定义图标
  [@override](/user/override)
  get iconDefault => super.iconDefault;

  [@override](/user/override)
  Widget get iconError => super.iconError;

  [@override](/user/override)
  Widget get iconInfo => super.iconInfo;

  [@override](/user/override)
  Widget get iconSuccess => super.iconSuccess;

  [@override](/user/override)
  Widget get iconWarning => super.iconWarning;

  // 自定义吐司设置
  [@override](/user/override)
  BorderRadius get toastRadius => super.toastRadius;

  [@override](/user/override)
  EdgeInsets get toastPadding => super.toastPadding;

  [@override](/user/override)
  double get toastGap => super.toastGap;

  // 自定义加载设置
  [@override](/user/override)
  EdgeInsets get loadingBgMargin => super.loadingBgMargin;

  [@override](/user/override)
  BorderRadius get loadingBgRadius => super.loadingBgRadius;

  [@override](/user/override)
  Color get loadingColor => super.loadingColor;

  [@override](/user/override)
  Color get loadingDefaultMaskColor => super.loadingDefaultMaskColor;

  [@override](/user/override)
  String get loadingDefaultText => super.loadingDefaultText;

  [@override](/user/override)
  double get loadingHeight => super.loadingHeight;

  [@override](/user/override)
  Widget get loadingSpin => super.loadingSpin;

  [@override](/user/override)
  double get loadingWidth => super.loadingWidth;

  [@override](/user/override)
  Alignment get toastDefaultAlignment => Alignment.topCenter;

  // 自定义加载的显示组件
  [@override](/user/override)
  Widget customLoadingStyle(BuildContext context, String? msg,
      {String? defaultMsg, Color? maskColor}) {
    return super.customLoadingStyle(context, msg,
        defaultMsg: defaultMsg, maskColor: maskColor);
  }

  // 自定义吐司的显示方式
  [@override](/user/override)
  Widget customToastStyle(BuildContext context, String msg,
      {Alignment? alignment = Alignment.center,
      String? id,
      Duration? duration,
      ToastType? type}) {
    return super.customToastStyle(context, msg,
        alignment: alignment, id: id, duration: duration, type: type);
  }
}

示例代码

import 'package:flutter/material.dart';
import 'package:flutter/system.dart';
import 'package:flutter_prompt/flutter_prompt.dart';

import 'future_widget.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        textTheme: const TextTheme(
          labelLarge: TextStyle(color: Colors.white, fontSize: 12),
        ),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
            textStyle: MaterialStateProperty.all(
              const TextStyle(color: Colors.white, fontSize: 14),
            ),
            foregroundColor: MaterialStateProperty.all(Colors.white),
            backgroundColor: MaterialStateProperty.resolveWith(
              (states) => switch (states) {
                MaterialState.disabled => Colors.grey,
                MaterialState.selected => Colors.green,
                MaterialState.pressed => Colors.yellow,
                _ => Colors.green,
              },
            ),
          ),
        ),
      ),
      home: Prompt.initRoot(child: const Home(), style: MyCustomStyle()),
    );
  }
}

class Home extends StatefulWidget {
  const Home({super.key});

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  String _platformVersion = 'Unknown';
  final _flutterPromptPlugin = Prompt();

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，所以我们在异步方法中进行初始化
  Future<void> initPlatformState() async {
    String platformVersion;
    // 平台消息可能会失败，所以我们使用 try/catch 来处理 PlatformException
    Prompt.showLoading();
    try {
      platformVersion = await _flutterPromptPlugin.getPlatformVersion() ?? 'Unknown platform version';
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }
    Prompt.hideLoading();

    // 如果小部件从树中移除，而异步平台消息仍在飞行，则我们想要丢弃回复而不是调用 setState 更新非存在的外观。
    if (!mounted) return;

    Prompt.showToast("@@@init", alignment: Alignment.topCenter);
    setState(() {
      _platformVersion = platformVersion;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    int count = 1;

    _testAsyncLoading();

    final style = MyCustomStyle();
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Prompt'),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text('Running on: $_platformVersion\n'),
            Title(
              color: Colors.black,
              child: const Text("TOAST"),
            ),
            Wrap(
              runSpacing: 10,
              spacing: 10,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Prompt.showToast(
                      "Top Left ${count++}",
                      alignment: Alignment.topLeft,
                    );
                  },
                  child: Text("Top Left"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Prompt.showToast(
                      "Top Center${count++}",
                      alignment: Alignment.topCenter,
                    );
                  },
                  child: const Text("Top Center"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Prompt.showToast(
                      "Top Right${count++}",
                      alignment: Alignment.topRight,
                    );
                  },
                  child: const Text("Top Right"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Prompt.showToast(
                      "Bottom Left ${count++}，",
                      alignment: Alignment.bottomLeft,
                    );
                  },
                  child: const Text("Bottom Left"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Prompt.showToast(
                      "Bottom Center${count++}",
                      alignment: Alignment.bottomCenter,
                    );
                  },
                  child: const Text("Bottom Center"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Prompt.showToast(
                      "Bottom Right${count++}",
                      alignment: Alignment.bottomRight,
                    );
                  },
                  child: const Text("Bottom Right"),
                ),
                ElevatedButton(
                  onPressed: () {
                    Prompt.showToast(
                      "A long text, test the display effect.,A long text, test the display effect.,A long text, test the display effect.A long text, test the display effect.,A long text, test the display effect.,A long text, test the display effect.A long text, test the display effect.,A long text, test the display effect.,A long text, test the display effect.",
                      type: ToastType.error,
                    );
                  },
                  child: const Text("Long Text"),
                ),
              ],
            ),
            Title(
              color: Colors.black,
              child: const Text("Theme Toast"),
            ),
            Wrap(
              spacing: 4,
              children: [
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(style.colorSuccess),
                  ),
                  onPressed: () {
                    Prompt.showToast(
                      "Success ${count++}",
                      type: ToastType.success,
                    );
                  },
                  child: const Text("Success"),
                ),
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(style.colorInfo),
                  ),
                  onPressed: () {
                    Prompt.showToast(
                      "Info ${count++}",
                      type: ToastType.info,
                    );
                  },
                  child: const Text("Info"),
                ),
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(style.colorError),
                  ),
                  onPressed: () {
                    Prompt.showToast(
                      "Error ${count++}",
                      type: ToastType.error,
                    );
                  },
                  child: const Text("Error"),
                ),
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(style.colorWarning),
                  ),
                  onPressed: () {
                    Prompt.showToast(
                      "Warning ${count++}",
                      type: ToastType.warning,
                      duration: const Duration(seconds: 3),
                    );
                  },
                  child: const Text("Warning"),
                ),
                ElevatedButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(style.colorWarning),
                  ),
                  onPressed: () {
                    Prompt.showToastWidget(
                      (ctx) => Container(
                        decoration: BoxDecoration(
                          color: Colors.grey.shade400,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        padding: const EdgeInsets.all(10),
                        child: const Column(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            CircleAvatar(
                              child: Icon(Icons.verified_user),
                            ),
                            Text("hello~~")
                          ],
                        ),
                      ),
                      type: ToastType.warning,
                      duration: const Duration(seconds: 3),
                    );
                  },
                  child: const Text("CustomToast"),
                ),
              ],
            ),
            Title(
              color: Colors.black,
              child: const Text("Loading"),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: () {
                    Prompt.showLoading(msg: "拼命加载中...");
                    Future.delayed(const Duration(seconds: 1), () {
                      Prompt.hideLoading();
                    });
                  },
                  child: const Text("Loading"),
                ),
              ],
            ),
            FutureWidget(
              future: _testAsyncLoading(),
              onSuccess: (BuildContext context, data) {
                return Text("async loading $data");
              },
            )
          ],
        ),
      ),
    );
  }
}

Future<int> _testAsyncLoading() {
  Prompt.showLoading(msg: "async loading demo");
  Prompt.showToast("你好啊");
  return Future.value(123).whenComplete(() => Prompt.hideLoading());
}

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

1 回复

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


flutter_prompt 是一个用于在 Flutter 应用中显示自定义提示框的插件。它允许你创建带有输入字段的对话框，用户可以输入信息并返回给应用程序。以下是如何使用 flutter_prompt 插件的简单指南。

1. 安装插件

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

dependencies:
  flutter:
    sdk: flutter
  flutter_prompt: ^0.0.1  # 请检查最新版本

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

2. 使用 flutter_prompt

2.1 基本使用

以下是一个简单的例子，展示如何使用 flutter_prompt 显示一个带有输入框的提示框，并获取用户的输入：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Prompt Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              String? result = await showPrompt(
                context: context,
                title: Text('Enter your name'),
                hintText: 'Your name',
              );
              if (result != null) {
                print('User entered: $result');
              } else {
                print('User canceled');
              }
            },
            child: Text('Show Prompt'),
          ),
        ),
      ),
    );
  }
}

2.2 自定义提示框

你还可以自定义提示框的外观和行为。以下是一个更复杂的例子：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Prompt Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              String? result = await showPrompt(
                context: context,
                title: Text('Enter your email'),
                hintText: 'Email address',
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your email';
                  }
                  if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
                    return 'Please enter a valid email';
                  }
                  return null;
                },
                onCancel: () {
                  print('User canceled');
                },
                onConfirm: (value) {
                  print('User confirmed: $value');
                },
              );
              if (result != null) {
                print('User entered: $result');
              }
            },
            child: Text('Show Custom Prompt'),
          ),
        ),
      ),
    );
  }
}
回到顶部