Flutter顶部提示插件top_snackbar_flutter的使用

发布于 1周前 作者 ionicwang 来自 Flutter

Flutter顶部提示插件top_snackbar_flutter的使用

插件简介

top_snackbar_flutter 是一个Flutter插件，它允许开发者在应用的顶部显示Snackbar（提示信息）。与传统的Snackbar不同，它可以更灵活地定制和控制。此插件提供了简单的API，类似于Flutter中常用的showDialog方法，并且可以传递自定义的小部件以进行显示。

快速开始

要显示一个自定义的Snackbar，您只需要调用showTopSnackBar函数，并传递相应的参数。例如：

showTopSnackBar(
  Overlay.of(context),
  CustomSnackBar.success(
    message: "Good job, your release is successful. Have a nice day",
  ),
);

上面的例子展示了如何展示一个成功的提示信息。同样地，你也可以通过更改CustomSnackBar中的类型来展示不同类型的信息，比如错误或者普通的信息。

持久化的Snackbar

有时候，我们希望Snackbar保持可见直到用户手动关闭或执行特定操作。这时可以设置persistent参数为true，同时还可以通过动画控制器来管理其生命周期。

TapBounceContainer(
  onTap: () {
    showTopSnackBar(
      Overlay.of(context),
      CustomSnackBar.info(
        message: "Persistent SnackBar",
      ),
      persistent: true,
      onAnimationControllerInit: (controller) => localAnimationController = controller,
    );
  },
  child: buildButton(context, "Show persistent SnackBar"),
),
TapBounceContainer(
  onTap: () => localAnimationController.reverse(),
  child: buildButton(context, "Dismiss"),
),

在这个例子中，点击按钮后会显示一个持久化的Snackbar，并且可以通过另一个按钮来关闭它。

完整示例代码

下面是一个完整的Flutter应用程序示例，包含了多种类型的Snackbar展示方式：

import 'package:flutter/material.dart';
import 'package:top_snackbar_flutter/custom_snack_bar.dart';
import 'package:top_snackbar_flutter/tap_bounce_container.dart';
import 'package:top_snackbar_flutter/top_snack_bar.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  late AnimationController localAnimationController;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.orangeAccent),
      home: Builder(
        builder: (BuildContext context) {
          return Scaffold(
            body: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TapBounceContainer(
                    onTap: () {
                      showTopSnackBar(
                        Overlay.of(context),
                        const CustomSnackBar.info(
                          message:
                              'There is some information. You need to do something with that',
                        ),
                      );
                    },
                    child: buildButton(context, 'Show info'),
                  ),
                  const SizedBox(height: 24),
                  TapBounceContainer(
                    onTap: () {
                      showTopSnackBar(
                        Overlay.of(context),
                        const CustomSnackBar.success(
                          message:
                              'Good job, your release is successful. Have a nice day',
                        ),
                      );
                    },
                    child: buildButton(context, 'Show success'),
                  ),
                  const SizedBox(height: 24),
                  TapBounceContainer(
                    onTap: () {
                      showTopSnackBar(
                        Overlay.of(context),
                        const CustomSnackBar.error(
                          message:
                              'Something went wrong. Please check your credentials and try again',
                        ),
                      );
                    },
                    child: buildButton(context, 'Show error'),
                  ),
                  const SizedBox(height: 48),
                  TapBounceContainer(
                    onTap: () {
                      showTopSnackBar(
                        Overlay.of(context),
                        const CustomSnackBar.info(
                          message: 'Persistent SnackBar',
                        ),
                        persistent: true,
                        onAnimationControllerInit: (controller) {
                          localAnimationController = controller;
                        },
                      );
                    },
                    child: buildButton(context, 'Show persistent SnackBar'),
                  ),
                  const SizedBox(height: 24),
                  TapBounceContainer(
                    onTap: () => localAnimationController.reverse(),
                    child: buildButton(context, 'Dismiss persistent SnackBar'),
                  ),
                  const SizedBox(height: 24),
                  TapBounceContainer(
                    onTap: () {
                      showTopSnackBar(
                        Overlay.of(context),
                        const CustomSnackBar.info(
                          message: 'Try to swipe me left',
                        ),
                        dismissType: DismissType.onSwipe,
                        dismissDirection: [DismissDirection.endToStart],
                      );
                    },
                    child: buildButton(
                      context,
                      'Show swiped dismissible SnackBar',
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }

  Container buildButton(BuildContext context, String text) {
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).primaryColor,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.4),
            spreadRadius: 6,
            blurRadius: 10,
            offset: const Offset(0, 3),
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
        child: Center(
          child: Text(
            text,
            style: const TextStyle(
              color: Colors.white,
              fontSize: 16,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      ),
    );
  }
}

这段代码创建了一个包含多个按钮的应用程序界面，每个按钮对应不同的Snackbar展示逻辑，包括普通、成功、错误提示以及持久化和可滑动消失的Snackbar。你可以根据需要调整这些功能以适应你的应用场景。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 top_snackbar_flutter 插件的示例代码。这个插件允许你在 Flutter 应用中显示位于顶部的 Snackbar。

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

dependencies:
  flutter:
    sdk: flutter
  top_snackbar_flutter: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，你可以在你的 Dart 文件中使用 TopSnackbar。以下是一个完整的示例：

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TopSnackbarController _topSnackbarController = TopSnackbarController();

  void _showTopSnackbar() {
    _topSnackbarController.showSnackbar(
      message: '这是一个顶部的Snackbar!',
      backgroundColor: Colors.blue,
      textColor: Colors.white,
      duration: Duration(seconds: 3),
      actionText: '确定',
      onActionPressed: () {
        // 点击确定按钮后的回调
        print('点击确定按钮');
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Top Snackbar Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _showTopSnackbar,
          child: Text('显示顶部Snackbar'),
        ),
      ),
      // 使用TopSnackbarOverlay来显示Snackbar
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Focus',
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: TopSnackbarOverlay(
        controller: _topSnackbarController,
      ),
    );
  }
}

在这个示例中：

  1. 我们首先引入了 top_snackbar_flutter 包。
  2. 创建了一个 TopSnackbarController 实例来控制 Snackbar 的显示。
  3. 定义了一个 _showTopSnackbar 方法来显示 Snackbar，包括设置消息内容、背景颜色、文字颜色、显示时间以及操作按钮的文本和回调。
  4. 在 Scaffold 的 bottomNavigationBar 属性中使用了 TopSnackbarOverlay 并传递了 TopSnackbarController 实例。

当你点击按钮时，一个顶部的 Snackbar 将会显示出来。

请注意，确保你已经正确安装并配置了 top_snackbar_flutter 插件，并根据需要调整代码中的参数。

回到顶部