Flutter自定义提示框插件show_custom_snackbar的使用

简介

SnackBar 是 Flutter 中的一个小部件，用于临时显示弹出消息。它通常用于在短时间内向用户展示应用程序中发生的某些操作结果。例如，您可以使用 SnackBar 来通知用户某项内容已成功添加到购物车或删除成功，或者表单已成功提交或图片上传完成。

功能特性

自定义的 SnackBar 提供了以下功能：

• 显示带有标题和标签的错误消息，并支持自定义颜色。
• 成功消息。
• 警告消息。

使用步骤

要使用可定制的 SnackBar，需要通过 ScaffoldMessenger 的 showSnackBar 方法传递自定义的 SnackBar 小部件，并设置其颜色、标题、图标等可定制值。

示例代码

以下是一个完整的示例，演示如何使用 show_custom_snackbar 插件来显示成功消息。

import 'package:flutter/material.dart';

// 自定义SnackBar小部件
class ShowCustomSnackBar extends StatelessWidget {
  final String title;
  final String label;
  final Color color;
  final IconData icon;

  const ShowCustomSnackBar({
    Key? key,
    required this.title,
    required this.label,
    required this.color,
    required this.icon,
  }) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Row(
      children: [
        Icon(
          icon,
          color: color,
          size: 24,
        ),
        const SizedBox(width: 10),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              title,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: color),
            ),
            Text(
              label,
              style: TextStyle(fontSize: 14, color: Colors.grey),
            ),
          ],
        ),
      ],
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey.shade500,
      appBar: AppBar(
        title: const Text('Show Notification'),
      ),
      body: ElevatedButton(
        onPressed: () {
          // 显示成功消息的SnackBar
          ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
            content: ShowCustomSnackBar(
              title: "恭喜！",
              label: "您的更改已成功保存。",
              color: Colors.green,
              icon: Icons.check_circle_outline,
            ),
            behavior: SnackBarBehavior.floating, // 设置为浮动样式
            elevation: 0, // 不显示阴影
            backgroundColor: Colors.transparent, // 背景透明
          ));
        },
        child: const Text("成功消息"),
      ),
    );
  }
}

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