Flutter自定义Snackbar内容插件awesome_snackbar_content_new的使用

Flutter 自定义 Snackbar 内容插件 awesome_snackbar_content_new 的使用

A package that lets you uplift your SnackBar or MaterialBanner experience in the app.

🛠 属性

• title: 显示在主体部分的顶部标签。
• message: 反映错误消息、成功消息等的主体消息。
• color: Snackbar 背景颜色。
• contentType: 反映失败、成功、帮助或警告的 ContentType 类。
• inMaterialBanner: 简单配置以根据 showMaterialBanner 运行。

Overall Look’n Feel

https://user-images.githubusercontent.com/43790152/200166529-51927c9d-66a6-4f76-b8f7-990680db2eba.mov

📱 使用

要使用该包：

1. 将依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter

  awesome_snackbar_content_new: <latest-package>

1. 在您的 Flutter 项目中导入它：

import 'package:awesome_snackbar_content_new/awesome_snackbar_content_new.dart';

👀 Snackbar 外观

以下是作为 Snackbar 使用时包中各种类型的外观：

🔴 失败

✅ 成功

❔ 帮助

⚠ 警告

👀 Material Banner 外观

以下是作为 Material Banner 使用时包中各种类型的外观：

🔴 失败

✅ 成功

❔ 帮助

⚠ 警告

💻 示例

以下是 awesome_snackbar_content_new 的基本用法示例：

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              child: const Text('Show Awesome SnackBar'),
              onPressed: () {
                final snackBar = SnackBar(
                  /// 需要设置以下属性以获得 awesome_snackbar_content_new 的最佳效果
                  elevation: 0,
                  behavior: SnackBarBehavior.floating,
                  backgroundColor: Colors.transparent,
                  content: AwesomeSnackbarContent(
                    title: 'On Snap!',
                    message:
                        'This is an example error message that will be shown in the body of snackbar!',

                    /// 更改 contentType 为 ContentType.success, ContentType.warning 或 ContentType.help 以获得不同的样式
                    contentType: ContentType.failure,
                  ),
                );

                ScaffoldMessenger.of(context)
                  ..hideCurrentSnackBar()
                  ..showSnackBar(snackBar);
              },
            ),
            const SizedBox(height: 10),
            ElevatedButton(
              child: const Text('Show Awesome Material Banner'),
              onPressed: () {
                final materialBanner = MaterialBanner(
                  /// 需要设置以下属性以获得 awesome_snackbar_content_new 的最佳效果
                  elevation: 0,
                  backgroundColor: Colors.transparent,
                  forceActionsBelow: true,
                  content: AwesomeSnackbarContent(
                    title: 'Oh Hey!!',
                    message:
                        'This is an example error message that will be shown in the body of materialBanner!',

                    /// 更改 contentType 为 ContentType.success, ContentType.warning 或 ContentType.help 以获得不同的样式
                    contentType: ContentType.success,
                    // 为了配置 Material Banner
                    inMaterialBanner: true,
                  ),
                  actions: const [SizedBox.shrink()],
                );

                ScaffoldMessenger.of(context)
                  ..hideCurrentMaterialBanner()
                  ..showMaterialBanner(materialBanner);
              },
            ),
          ],
        ),
      ),
    );
  }
}