我正在使用Ffltter构建一个应用程序,并使用Firebase作为后端.突然,我需要使用Snackbar向用户显示有关身份验证的消息.例如:user-not-found,password or email is wrong.然后我用了默认的小吃店,它工作得很好,但我想让它看起来很吸引人.所以Eyes创建了定制的小吃吧,不用说,我在一些部分使用了chat gpt.以下是如何使用渐变背景色创建自定义快餐栏.

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();
    });
  }
}

结果:

Final result

如果有人知道创建自定义渐变快餐栏的更好方法,请随时回答.

推荐答案

ElevatedButton(
          onPressed: () {
            Flushbar(
              // title: "User not found",
              // message: 'User not found.',
              messageText: const Text(
                'User not found',
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.w500),
              ),
              duration: const Duration(seconds: 3),
              backgroundGradient: const LinearGradient(colors: [
                Color(0xffD95F30),
                Color.fromRGBO(181, 120, 44, 1),
                Color.fromRGBO(167, 149, 48, 1)
              ]), //here's the gradient support

            ).show(context);
          },
          child: const Text('click'))

enter image description here

Flutter相关问答推荐

如何解决这个错误,同时获得的高度的小部件,因此高度的可用工作区域在Flutter ?

更改BottomNavigationBar onTap?的大小

为什么我的PIN字段在第一次打字时不显示数字?

出现异常.RangeError(RangeError(index):无效值:有效值范围为空:0).分度误差

如何从文本比例因子迁移到文本比例因子

Firebase WHERE过滤器在日期字段中不起作用

尽管 onCollision 处理了我的角色还是从平台上掉了下来

尽管我的 url 链接正确,但 ArgumentError(无效参数:URI 文件中未指定主机:///)错误

如何拥有 StreamProvider 的多个侦听器,其中稍后添加的侦听器接收最新数据?

我无法找到修复此错误的位置,指出无法使用静态访问来访问实例成员

Flutter:如何在现有布局之上显示圆角布局?

Flutter - 我需要显示文本,但应用程序不需要

如何在 flutter 中同时使用 ButtonStyle() 和 ElevatedButton.styleFrom() ?

按下 Command+W 时关闭窗口

我在弹出框中编辑后无法保存日期

如何获得Flutter 的时差?

使用 Firebase/Flutter 进行应用判断 - 100% 无效请求

Flutter_riverpod 安装时出现问题

在列表视图Flutter 中 Select 下一个单选按钮时单选按钮更改

这在Flutter 的 pubspec 文件中是什么意思?