如何在Flutter中创建具有渐变背景色的自定义snackbar？

Question

我正在使用 Flutter 构建应用程序，并使用 Firebase 作为后端。突然，我需要使用 Snackbar 向用户显示有关身份验证的消息。例如：未找到用户、密码或电子邮件错误。然后我使用了默认的小吃栏，它效果很好，但我希望它能吸引眼球。所以 Eye 创建了自定义小吃栏，不用说我在某些部分使用了 chatgpt。以下是如何创建具有渐变背景颜色的自定义小吃栏。

import 'package:flutter/material.dart';

class CustomGradientSnackbar {
   final String text;
   final Gradient gradient;
   final Color textColor;

   CustomGradientSnackbar({
    required this.text,
    required this.gradient,
    required this.textColor,
  });

  void show(BuildContext context) {
    OverlayState? overlayState = Overlay.of(context);
    OverlayEntry overlayEntry;

    overlayEntry = OverlayEntry(
      builder: (BuildContext context) => Positioned(
        bottom: 0,
        left: 0,
        right: 0,
        child: Material(
          elevation: 6.0,
          child: Container(
            padding:
                const EdgeInsets.symmetric(horizontal: 16.0, vertical: 10.0),
            decoration: BoxDecoration(
             gradient: gradient,
            ),
            child: Text(
              text,
              style: TextStyle(
                color: textColor,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );

    overlayState.insert(overlayEntry);

    Future.delayed(const Duration(seconds: 2)).then((_) {
      overlayEntry.remove();
    });
  }
}

结果：

如果有人知道创建自定义渐变小吃栏的更好方法，请随时回答。

Answer 1

ElevatedButton(
          onPressed: () {
            Flushbar(
              title: "Hey Ninja",
              message:
                  "Lorem Ipsum is simply dummy text of the printing and typesetting industry",
              duration: const Duration(seconds: 3),
              backgroundGradient: const LinearGradient(
                  colors: [Colors.orange, Colors.black]), //here's the gradient support
            ).show(context);
          },
          child: const Text('click'))