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

Logo

You deserve a simple snack!

很多当前的Snackbar和Toast库对于简单的使用场景来说过于复杂。Snacky是一个简单的库，允许你用最少的设置创建一个Snackbar，并且API易于使用。

Demo

你可以通过以下链接查看Live Web demo。

Usage

基本配置

在你的Flutter应用中使用Snacky，首先需要进行基本配置：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SnackyConfiguratorWidget(
      app: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
        navigatorObservers: [
          SnackyNavigationObserver(), // 可选，如果你想在页面切换时关闭snacky
        ],
      ),
    );
  }
}

显示一个简单的Snacky

要显示一个简单的Snacky，可以使用以下代码：

class MyHomePage extends StatelessWidget {
  final SnackyController _controller = SnackyController.instance;

  void showSimpleSnacky(BuildContext context) {
    final snacky = Snacky(
      title: 'My super simple snacky title',
      type: SnackyType.info, // 或者 SnackyType.error, SnackyType.success, SnackyType.warning, SnackyType.info
      showDuration: Duration(seconds: 3), // 显示时长
      transitionDuration: Duration(milliseconds: 300), // 过渡动画时长
      transitionCurve: Curves.easeInOut, // 动画曲线
      location: SnackyLocation.top, // 显示位置 (顶部或底部)
      openUntillClosed: false, // 是否保持打开直到手动关闭
      canBeClosed: true, // 用户是否可以关闭
      onTap: () => print('Snacky tapped'), // 点击事件
      subtitle: 'My super simple snacky subtitle', // 副标题
      leadingWidgetBuilder: (context, snacky) => Icon(Icons.check), // 前置图标
      trailingWidgetBuilder: (context, snacky) => Icon(Icons.close), // 后置图标
    );
    _controller.showMessage((context) => snacky);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Snacky Example"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => showSimpleSnacky(context),
          child: Text("Show Simple Snacky"),
        ),
      ),
    );
  }
}

显示带有自定义组件的Snacky

如果你想要显示一个带有自定义组件的Snacky，可以使用以下代码：

void showCustomSnacky(BuildContext context) {
  final snacky = Snacky.widget(
    builder: (context, cancelableSnacky) => Container(
      padding: EdgeInsets.all(16.0),
      color: Colors.red,
      child: Text(
        "This is a custom snacky!",
        style: TextStyle(color: Colors.white),
      ),
    ),
    showDuration: Duration(seconds: 3), // 显示时长
    transitionDuration: Duration(milliseconds: 300), // 过渡动画时长
    transitionCurve: Curves.easeInOut, // 动画曲线
    location: SnackyLocation.top, // 显示位置 (顶部或底部)
  );
  _controller.showMessage((context) => snacky);
}

取消活动中的Snacky

你可以取消当前正在显示的Snacky：

_controller.cancelActiveSnacky();

取消所有Snacky

你可以取消所有未完成的Snacky：

_controller.cancelAll();

Easy to extend

你可以使用自己的SnackyController、SnackyBuilder和Snacky消息。这允许你创建自己的Snacky消息并使用自己的Snacky控制器。

默认情况下，SnackyController是单例的，但你可以创建自己的实例并在应用中使用它。确保将其传递给SnackyConfiguratorWidget，以便可以在应用中使用。

默认情况下，SnackyBuilder是SimpleSnackyBuilder，但你可以创建自己的SnackyBuilder并在应用中使用它。确保将其传递给SnackyConfiguratorWidget，以便可以在应用中使用。

Todo

• ❌ Add tests
• ❌ Add support for “material”-like snackies

希望这篇文档能帮助你更好地理解和使用Snacky插件！如果你有任何问题或建议，请随时提出。