Flutter轻量级提示插件flutter_hot_toast的使用

Flutter Hot Toast 是一个非常酷且简单的提示插件，灵感来源于 React Hot Toast。它提供了多种类型的提示，如加载中、成功、失败等。

特性

开始使用

首先需要将 GlobalLoaderOverlay 包裹在你的 MaterialApp 外层：

import 'package:flutter/material.dart';
import 'package:loader_overlay/loader_overlay.dart';
import 'package:flutter_hot_toast/flutter_hot_toast.dart';

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

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

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Hot Toast Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FloatingActionButton(
              child: const Icon(Icons.add),
              onPressed: () {
                context.loaderOverlay.show(
                  widget: FlutterHotToast.loading(
                    height: 70,
                    width: 280,
                    label: const Text(
                      'loading...😬',
                      style: TextStyle(
                        fontSize: 30,
                      ),
                    ),
                  ),
                );
                Future.delayed(const Duration(seconds: 2), () {
                  context.loaderOverlay.hide();
                  context.loaderOverlay.show(
                    widget: FlutterHotToast.success(
                      context,
                      height: 70,
                      width: 280,
                      label: const Text(
                        'success ✅',
                        style: TextStyle(
                          fontSize: 30,
                        ),
                      ),
                    ),
                  );
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

显示提示

你可以通过以下方式在任何被 MaterialApp 包裹的小部件中调用提示显示：

context.loaderOverlay.show(
  widget: FlutterHotToast.loading(
    height: 70,
    width: 280,
    label: const Text(
      'loading...😬',
      style: TextStyle(
        fontSize: 30,
      ),
    ),
  ),
);

使用示例

下面是一个完整的示例，展示了如何使用这个插件来显示加载和成功的提示：

FloatingActionButton(
  child: const Icon(Icons.add),
  onPressed: () {
    context.loaderOverlay.show(
      widget: FlutterHotToast.loading(
        height: 70,
        width: 280,
        label: const Text(
          'loading...😬',
          style: TextStyle(
            fontSize: 30,
          ),
        ),
      ),
    );
    Future.delayed(const Duration(seconds: 2), () {
      context.loaderOverlay.hide();
      context.loaderOverlay.show(
        widget: FlutterHotToast.success(
          context,
          height: 70,
          width: 280,
          label: const Text(
            'success ✅',
            style: TextStyle(
              fontSize: 30,
            ),
          ),
        ),
      );
    });
  },
)