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

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

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

awesome_snackbar_content 是一个Flutter插件,它允许您提升应用中SnackBar或MaterialBanner的用户体验。以下是该插件的详细使用说明。

🛠 Attributes

  • title: 显示在主体顶部的标签。
  • message: 反映某些错误信息、成功信息等的主体消息。
  • color: SnackBar主体的颜色。
  • contentType: ContentType类,反映失败、成功、帮助或警告类型。
  • inMaterialBanner: 根据showMaterialBanner配置工作方式。

Overall Look’n Feel

示例

📱 Usage

要使用此包,请按照以下步骤操作:

1. 添加依赖项

在您的pubspec.yaml文件中添加依赖项:

dependencies:
  flutter:
      sdk: flutter

  awesome_snackbar_content: ^<latest-package-version>

2. 导入包

在您的Flutter项目中导入包:

import 'package:awesome_snackbar_content/awesome_snackbar_content.dart';

👀 SnackBar Looks

以下是包中不同类型的SnackBar外观:

🔴 Failure

Failure

✅ Success

Success

❔ Help

Help

⚠ Warning

Warning

👀 Material Banner Looks

以下是包中不同类型的Material Banner外观:

🔴 Failure

Failure

✅ Success

Success

❔ Help

Help

⚠ Warning

Warning

💻 Example

以下是一个基本的 awesome_snackbar_content 示例用法:

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Awesome Snackbar Example')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              child: const Text('Show Awesome SnackBar'),
              onPressed: () {
                final snackBar = SnackBar(
                  /// 设置以下属性以获得最佳效果
                  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(
                  /// 设置以下属性以获得最佳效果
                  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);
              },
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: AwesomeSnackBarExample(),
  ));
}

🧑 Credits

这个包是参考 Abu Anwar (GDE Flutter)YouTube视频 创建的。请务必查看他的作品!


更多关于Flutter自定义Snackbar内容插件awesome_snackbar_content的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义Snackbar内容插件awesome_snackbar_content的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用awesome_snackbar_content插件来自定义Snackbar内容的示例代码。这个插件允许你自定义Snackbar的布局和样式。

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

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

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

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

1. 导入必要的包

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

2. 创建一个自定义Snackbar内容的小部件

你可以创建一个自定义的小部件,比如一个包含图标和文本的Snackbar内容。

class CustomSnackbarContent extends StatelessWidget {
  final String message;
  final IconData icon;

  CustomSnackbarContent({required this.message, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Icon(icon, color: Colors.white),
          Text(
            message,
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.0,
            ),
          ),
          // 你可以在这里添加更多内容,比如按钮等
        ],
      ),
    );
  }
}

3. 使用AwesomeSnackbar显示自定义Snackbar

在你的主应用或需要显示Snackbar的页面中,使用AwesomeSnackbar并传入自定义内容。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Snackbar Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              AwesomeSnackbar.show(
                context: context,
                content: CustomSnackbarContent(
                  message: 'This is a custom snackbar!',
                  icon: Icons.check,
                ),
                duration: Duration(seconds: 3),
                backgroundColor: Colors.blue,
                action: AwesomeSnackbarAction(
                  text: 'Undo',
                  onPressed: () {
                    // 执行撤销操作
                    print('Undo button pressed');
                  },
                ),
              );
            },
            child: Text('Show Snackbar'),
          ),
        ),
      ),
    );
  }
}

完整代码示例

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

class CustomSnackbarContent extends StatelessWidget {
  final String message;
  final IconData icon;

  CustomSnackbarContent({required this.message, required this.icon});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 12.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Icon(icon, color: Colors.white),
          Text(
            message,
            style: TextStyle(
              color: Colors.white,
              fontSize: 16.0,
            ),
          ),
        ],
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Awesome Snackbar Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              AwesomeSnackbar.show(
                context: context,
                content: CustomSnackbarContent(
                  message: 'This is a custom snackbar!',
                  icon: Icons.check,
                ),
                duration: Duration(seconds: 3),
                backgroundColor: Colors.blue,
                action: AwesomeSnackbarAction(
                  text: 'Undo',
                  onPressed: () {
                    // 执行撤销操作
                    print('Undo button pressed');
                  },
                ),
              );
            },
            child: Text('Show Snackbar'),
          ),
        ),
      ),
    );
  }
}

这样,你就可以在Flutter应用中显示一个带有自定义内容的Snackbar了。希望这个示例对你有所帮助!

回到顶部