Flutter顶部通知栏插件awesome_top_snackbar的使用

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

Flutter顶部通知栏插件awesome_top_snackbar的使用

CustomSnackBar 是一个多功能且视觉效果出色的 SnackBar 小部件,旨在为您的应用程序中的用户提供信息丰富且互动的通知。通过其可定制的功能,包括图标、背景颜色和装饰,甚至文本样式,您可以根据应用程序的品牌来调整外观。此外,您还可以从各个方向关闭 snackbar。无论是显示重要消息、警报还是反馈,CustomSnackBar 都能提供引人入胜且用户友好的体验,确保您的用户随时了解应用程序的最新更新。

预览

Snackbar 示例

入门指南

介绍令人惊叹的 awesomeTopSnackbar!这是您展示华丽 CustomSnackBars 的门户。您只需要传递上下文和消息,然后就可以看到效果了!但还有更多!这个强大的工具提供了广泛的自定义选项,包括图标、背景颜色、装饰,甚至是文本样式。此外,您还可以从各个方向关闭 snackbar。准备好以前所未有的方式释放 snackbar 的全部潜力吧!

手机端实现

要使用该包:

  1. pubspec.yaml 文件中添加依赖项:
dependencies:
  flutter:
    sdk: flutter

  awesome_top_snackbar: <latest-package>
  1. 然后在您的 Flutter 项目中导入它:
import 'package:awesome_top_snackbar/awesome_top_snackbar.dart';
  1. 示例 1:基本用法
// 显示简单的 Snackbar
awesomeTopSnackbar(context, "Hello world");
  1. 示例 2:如果需要在末尾添加关闭图标或其他图标,可以参考以下示例。
// 显示带有关闭图标的 Snackbar
awesomeTopSnackbar(
  context,
  "Hello world",
  iconWithDecoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    border: Border.all(),
    color: Colors.white,
  ),
  icon: Icon(
    Icons.close,
    color: Colors.white,
  ),
);
  1. 示例 3:自定义文本样式
// 显示带有自定义文本样式的 Snackbar
awesomeTopSnackbar(
  context,
  "Hello world ...",
  textStyle: const TextStyle(
    color: Color.fromARGB(255, 20, 64, 83),
    fontStyle: FontStyle.italic,
    fontWeight: FontWeight.w400,
    fontSize: 24,
  ),
  backgroundColor: Color.fromARGB(255, 220, 149, 111),
  icon: const Icon(Icons.close, color: Colors.white),
  iconWithDecoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    border: Border.all(color: Colors.white),
  ),
);

完整示例 Demo

以下是完整的示例代码,展示了如何在 Flutter 应用程序中使用 awesome_top_snackbar 插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 按钮 1:基本 Snackbar
              ElevatedButton(
                onPressed: () {
                  awesomeTopSnackbar(context, "Hello world");
                },
                child: const Text('Snackbar 1'),
              ),
              const SizedBox(height: 50),

              // 按钮 2:带关闭图标的 Snackbar
              ElevatedButton(
                onPressed: () {
                  awesomeTopSnackbar(
                    context,
                    "Hello world",
                    backgroundColor: Color.fromARGB(255, 19, 129, 45),
                    icon: const Icon(Icons.close, color: Colors.white),
                    iconWithDecoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(color: Colors.white),
                    ),
                  ); // 使用此属性进行装饰
                },
                child: const Text('Snackbar 2'),
              ),
              const SizedBox(height: 50),

              // 按钮 3:带自定义文本样式的 Snackbar
              ElevatedButton(
                onPressed: () {
                  awesomeTopSnackbar(
                    context,
                    "Hello world ...",
                    textStyle: const TextStyle(
                      color: Color.fromARGB(255, 20, 64, 83),
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w400,
                      fontSize: 24,
                    ),
                    backgroundColor: Color.fromARGB(255, 220, 149, 111),
                    icon: const Icon(Icons.close, color: Colors.white),
                    iconWithDecoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      border: Border.all(color: Colors.white),
                    ),
                  ); // 使用此属性进行装饰
                },
                child: const Text('Snackbar 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然,下面是一个关于如何在Flutter项目中使用awesome_top_snackbar插件的示例代码。这个插件允许你在应用的顶部显示通知栏(Snackbar),非常适合用来显示简短的提示信息或操作结果。

首先,你需要在你的pubspec.yaml文件中添加awesome_top_snackbar的依赖:

dependencies:
  flutter:
    sdk: flutter
  awesome_top_snackbar: ^x.y.z  # 请替换为最新的版本号

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

接下来,在你的Flutter项目中,你可以按照以下步骤来使用这个插件:

  1. 导入插件

在你的Dart文件中(例如main.dart),导入awesome_top_snackbar

import 'package:awesome_top_snackbar/awesome_top_snackbar.dart';
import 'package:flutter/material.dart';
  1. 创建并显示Snackbar

你可以在你的应用中创建一个函数来显示Snackbar。例如,在按钮点击时显示Snackbar:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Top Snackbar Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '0',
                style: Theme.of(context).textTheme.headline4,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  // 显示Snackbar
                  _showSnackbar(context);
                  // 这里可以添加其他逻辑,比如计数器增加
                },
                child: Text('Show Snackbar'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _showSnackbar(BuildContext context) {
    AwesomeTopSnackbar.show(
      context: context,
      message: 'This is a top snackbar!',
      actionText: 'OK',
      onActionPressed: () {
        // 当点击"OK"按钮时执行的逻辑
        print('Action button pressed!');
      },
      duration: Duration(seconds: 3), // 显示持续时间
      backgroundColor: Colors.blue, // 背景颜色
      messageTextStyle: TextStyle(color: Colors.white), // 消息文本样式
      actionTextStyle: TextStyle(color: Colors.white), // 动作按钮文本样式
    );
  }
}

在上面的代码中,我们定义了一个简单的Flutter应用,其中包含一个按钮。点击按钮时,会调用_showSnackbar函数,显示一个顶部Snackbar。

  • context:当前的BuildContext。
  • message:Snackbar中显示的文本。
  • actionText:Snackbar底部动作按钮的文本。
  • onActionPressed:当点击动作按钮时调用的回调函数。
  • duration:Snackbar显示的持续时间。
  • backgroundColor:Snackbar的背景颜色。
  • messageTextStyle:Snackbar消息的文本样式。
  • actionTextStyle:Snackbar动作按钮的文本样式。

你可以根据需要调整这些参数来定制Snackbar的外观和行为。

希望这个示例能够帮助你顺利地在Flutter项目中使用awesome_top_snackbar插件!

回到顶部