如何设置 Material Banner 的大小？

Question

我有一个包含儿童的专栏，并希望使用 Material 横幅向用户显示他们可能需要的信息。我希望它是持久的，所以小吃店不是要走的路，我希望它是非侵入性的，所以我也不想使用弹出窗口。

材料横幅似乎是我需要的，但它太大了！

我尝试将它包装在一个容器中并设置容器的高度和宽度，但结果只是告诉我底部溢出了 X 个像素。

似乎这些默认大小的高度为 120。当我需要它有按钮以在其上执行操作时，120 会是完美的，但是当用户没有任何需要解决的问题时，我只想要图标和文本告诉他们他们是最新的。

我可能以错误的方式处理这个问题。将带有默认消息的容器留在那里并仅在有可用通知时才显示横幅会更好吗？你能做到吗？

我查看了flutter网站和material.io上的信息，但我还没有找到任何结论性的信息。

无论如何，这是我的有效代码（没有容器包装它）。

MaterialBanner(
 content: Text("You're Up To Date"),
 leading: Icon(
     Icons.check_box_outlined,
     color: Colors.green[400],
     size: 40,
   ),
  actions: [
     FlatButton(
        child: const Text(''),
        onPressed: () {},
       ),
     FlatButton(
        child: const Text(''),
        onPressed: () {},
       ),
    ],
)

另外，如果有人知道如何在这些东西上设置阴影，那也很酷。

Answer 1

不是对此的直接答案，因此我不会将其标记为已回答，但我会提供有关我所做的详细信息，以防有人遇到类似问题并希望采取与我相同的方式。

所以我最初使用这个 MaterialBanner 来尝试概述用户是否有需要处理的通知。 MaterialBanner 看起来很棒，因为它上面有可点击的操作。相反，我最终使用了一种容器/卡片组合来完成它。

我的代码在这里：

return StreamBuilder<QuerySnapshot>(
    stream: FirebaseFirestore.instance
        .collection('alerts')
        .where('access',
            arrayContains: FirebaseAuth.instance.currentUser!.uid)
        .where('read', isEqualTo: false)
        //.orderBy('createdAt', descending: true)
        .snapshots(),
    builder: (context, snapshot) {
      if (!snapshot.hasData || snapshot.data!.docs.length <= 0) {
        return Container(
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(10),
                topRight: Radius.circular(10),
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10)),
            boxShadow: [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 5,
                blurRadius: 7,
                offset: Offset(0, 3), // changes position of shadow
              ),
            ],
          ),
          height: 60.0,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(width: 10.0),
              Icon(
                Icons.check_box,
                color: Colors.green,
                size: MediaQuery.of(context).size.width * .1,
              ),
              SizedBox(width: 5.0),
              Expanded(
                child: AutoSizeText(
                  "No Current Messages or Alerts",
                  maxLines: 1,
                  maxFontSize: 20,
                  style:
                      TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
              //if (snapshot.hasData) SizedBox(width: 45),
            ],
          ),
        );
      }
      Alert alert = Alert.fromFirestore(snapshot.data!.docs.first);
      return Card(
        //height: 60.0,
        child: InkWell(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                SizedBox(width: 10.0),
                Icon(
                  Icons.warning,
                  color: Colors.red,
                  size: MediaQuery.of(context).size.width * .1,
                ),
                SizedBox(width: 15.0),
                Expanded(
                  child: AutoSizeText(
                    "New Alert for Your Patient",
                    maxLines: 1,
                    maxFontSize: 20,
                    style: TextStyle(
                        fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                ),
                //if (snapshot.hasData) SizedBox(width: 45),
                if (snapshot.hasData) Icon(Icons.arrow_right, size: 50)
              ],
            ),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => Alert_Info(
                    alert: alert,
                  ),
                ),
              );
            }),
        elevation: 12,
      );
    });

这里有很多代码，所以让我带你看看吧。

我有一个流构建器设置一个查询，所以我可以查看是否会有任何通知给登录的用户。

如果查询返回时没有数据，它只会显示一个容器，上面写着“您是最新的”

但是如果查询返回数据，那么它将显示一张卡片，里面有一个 InkWell。卡片完成了包含我需要显示的信息的工作，而 InkWell 完成了让它可点击的工作！

因此，我没有尝试使用 Material Banner（回头看有点难看），而是创建了一个解决方案。

因此，如果您尝试将 Material Banner 用于与我相同的用例并希望它成为 UI 的永久固定装置，那么请尝试类似的方法。但是 Material Banners 仍然适用于需要立即关注并且可以被忽略的传入通知。