如何在 Flutter 中制作方形应用栏按钮？答案

【问题标题】：How To Make a Squared App Bar Button in Flutter?如何在 Flutter 中制作方形应用栏按钮？
【发布时间】：2020-10-25 15:55:25
【问题描述】：

我想知道我们如何制作一个像图片中那样的 App Bar 操作按钮。似乎在 Icon 上添加背景或包装小部件无法实现下图中按钮的外观。

【问题讨论】：

您可以使用 OrientationBuilder 来实现这一目标

标签： flutter flutter-layout

【解决方案1】：

我做了一个你想要达到的目标的演示：

  return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: Text(
          'Title',
        ),
        centerTitle: true,
        actions: [
          // squared button/icon
          Padding(
            padding: const EdgeInsets.only(right: 20.0, top: 10.0, bottom: 10.0),
            child: Container(
              width: 35,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8.0),
                color: Colors.white.withOpacity(0.5),
              ),
              child: Center(
                child: Icon(
                  Icons.settings,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ],
      ),
  body: .... YOUR WIDGETS ...

结果：

【讨论】：

很好的答案，但是这段代码在不同的屏幕尺寸上显示时不会有方形图标吗？
屏幕大小在这里无关紧要，AppBar 的高度不会根据屏幕大小而变化，所以这不会是问题@JayVDiyk
AppBar 高度根据平台和像素密度而变化，但非常感谢您提供这样的详细答案

【解决方案2】：

您可以在Container 中使用Icon 与相等的width 和heigth（这样您就可以得到一个正方形），然后您可以用BorderRadius 将其四舍五入以获得该效果。

当然你应该使用容器的颜色属性来填充背景。

【讨论】：