事情起源于项目里一直用的一个组件库： flutter_easyloading

在里面遇到了一个问题，官方似乎没有想修的打算。

问题是这样的，下面是一个很简单的 loading 使用流程。 看上去好像没啥，但实际上，你会发现toast 不见了？？ 思考了下后，发现是EasyLoading.dismiss()连带着 toast 一起干掉了。 啊这...，然后理了下源码发现 easyloading 是通过 Overlay 显示的。loading 和 toast 用的同一个 Overlay。所以懒得用它了，自己动手搞一个来算了。

问题代码：

try{
    Easyloading.showLoading()
    //等待一个耗时请求
    await Future()
}catch(e){
     //EasyLoading的问题，不会出现这个 toast 了。
     EasyLoading.showToast("请求失败")
}finally{
    EasyLoading.dismiss();
}

思考组件功能

• 要支持上下左右中间无死角的 toast 吧
• 要支持各种颜色状态的 toast 吧
• 要支持自定义各种样式的 toast 吧
• 要简单好用避免 context 传来传去吧
• 要支持直接 toast 一个 widget 岂不美滋滋
• toast 支持下要不显示多个？？
• loading 最好也能全局自定义一个
• 配置要杠杠的完善吧
• 后续扩展些气泡框啥的？

搞起～

flutter_prompt

项目地址：github.com/AlwaysSum/f…

一个轻巧的提示库，包含有：吐司、加载、气泡等。支持任意的自定义toast 效果和 loading 效果。toast 和 loading 互不影响

Install / 安装

Add the following code to your project/ 将以下代码添加到您项目中的 pubspec.yaml 文件:

dependencies:
  flutter_prompt: ^latest

Init / 初始化

Methods 1 / 方式一

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

Methods 2 / 方式二

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

How to Use / 如何使用

Use Toast:

example() {
  // toast
  Prompt.showToast("你的消息");

  //toast and position
  Prompt.showToast("你的消息", alignment: Alignment.topRight);

  // toast and type
  Prompt.showToast("你的消息", type: ToastType.success);
  Prompt.showToast("你的消息", type: ToastType.error);
  Prompt.showToast("你的消息", type: ToastType.warning);
  Prompt.showToast("你的消息", type: ToastType.info);

  //toast and time
  Prompt.showToast("你的消息", duration: Duration(seconds: 3),);

  // toast widget
  Prompt.showToastWidget((context) => Text("你好"));


  // loading 
  Prompt.showLoading();
  Prompt.showLoading(msg: "loading...");

  //hide Loading
  Prompt.hideLoading();
}

Custom / 定制你的组件

在customLoadingStyle或者customToastStyle中可以返回一个任意的 Widget。

Prompt.init(style: MyCustomStyle())

class MyCustomStyle with FlutterPromptCustomStyle {
  ///自定义颜色
  ///Custom color
  @override
  Color get colorDefault => super.colorDefault;

  @override
  Color get colorError => super.colorError;

  @override
  Color get colorInfo => super.colorInfo;

  @override
  Color get colorSuccess => super.colorSuccess;

  @override
  Color get colorWarning => super.colorWarning;

  ///自定义图标
  ///Custom icon
  @override
  get iconDefault => super.iconDefault;

  @override
  Widget get iconError => super.iconError;

  @override
  Widget get iconInfo => super.iconInfo;

  @override
  Widget get iconSuccess => super.iconSuccess;

  @override
  Widget get iconWarning => super.iconWarning;

  ///自定义吐司设置
  ///Custom toast
  @override
  BorderRadius get toastRadius => super.toastRadius;

  @override
  EdgeInsets get toastPadding => super.toastPadding;

  @override
  double get toastGap => super.toastGap;

  ///自定义loading
  ///Custom loadng
  @override
  EdgeInsets get loadingBgMargin => super.loadingBgMargin;

  @override
  BorderRadius get loadingBgRadius => super.loadingBgRadius;

  @override
  Color get loadingColor => super.loadingColor;

  @override
  Color get loadingDefaultMaskColor => super.loadingDefaultMaskColor;

  @override
  String get loadingDefaultText => super.loadingDefaultText;

  @override
  double get loadingHeight => super.loadingHeight;

  @override
  Widget get loadingSpin => super.loadingSpin;

  @override
  double get loadingWidth => super.loadingWidth;

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

  ///自定义 toast 的显示方式
  @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);
  }
}

Recommend a loading library / 推荐一个加载库

可以用来自定义 loading

It can be used to customize loading

pub.dev/packages/fl…

TODO

Welcome to leave a message / 欢迎留言

1. Bubble / 气泡框
2. ...

致谢

❤️❤️❤️

Thanks to flutter_spinkit , flutter_easyloading ❤️