在 Flutter 中移除 Material 小部件的水平阴影答案

【问题标题】：Remove horizontal shadow of Material widget in Flutter在 Flutter 中移除 Material 小部件的水平阴影
【发布时间】：2020-08-17 23:10:02
【问题描述】：

将elevation 添加到Material 小部件后，我只想保留底部阴影。不想要左右两边的阴影。如何做到这一点？

这是我的代码：

        // searchbar
        child: Material(
          color: Colors.transparent,
          elevation: 5.0,
          child: Container(
            margin: EdgeInsets.symmetric(horizontal: 10.0),
            color: AppColors.searchBoxColor,
            child: Row(
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.arrow_back),
                  onPressed: () {},
                ),
                // searchfield
                Expanded(
                  child: Container(
                    alignment: Alignment.center,
                    height: AppBar().preferredSize.height,
                    child: TextField(
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: "Hint Text",
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),

【问题讨论】：

好的，你能提供一些可复制的代码和一些图片来说明你的意思吗？
@LonelyWolf 我已经添加了代码。我只想删除添加高程属性后得到的水平阴影。
嗨@Newaj。我已经更新了我的答案，用你的代码应用了阴影。希望能帮助到你！ :)

标签： flutter

【解决方案1】：

您可以使用容器的 boxShadow 属性自定义阴影，这里是一个示例：

Container(
    decoration: BoxDecoration(
      color: Colors.white,
      boxShadow: [
        BoxShadow(
          offset: Offset(0, 5),
          blurRadius: 5,
          color: Colors.grey,
        ),
     ],
   ),
 ),

【讨论】：

是的，我知道。但是 Material 小部件呢？
根据我在文档中看到的内容，无法使用 Material 的属性更改高程阴影。

【解决方案2】：

elevation 无法做到这一点，因为这将不可避免地投射出阴影，就像一张纸在空中升起一样。

您可以使用BoxShadow 添加自定义阴影。例如，如果您使用的是RaisedButton，则可以更改为使用FlatButton 和Container 和BoxDecoration。这是一个例子：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              RaisedButton(
                child: Text('Button With Elevation'),
                textColor: Colors.white,
                color: Colors.red,
                onPressed: () {},
                elevation: 12.0,
              ),
              SizedBox(
                height: 32.0,
              ),
              Container(
                decoration: BoxDecoration(
                  boxShadow: [
                    BoxShadow(
                      offset: Offset(0.0, 6.0),
                      color: Colors.grey.withOpacity(0.3),
                      blurRadius: 5.0,
                    ),
                  ]
                ),
                child: FlatButton(
                  child: Text('Button With Custom Shadow'),
                  textColor: Colors.white,
                  color: Colors.red,
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

结果如下：

通过指定 Offset 的值，您可以更改阴影投射的方向。

更新：

我后来看到了你的代码。以下是使用代码实现 BoxShadow 的方法：

child: Material(
  color: Colors.transparent,
  elevation: 0.0,
  child: Container(
    decoration: BoxDecoration(
      color: AppColors.searchBoxColor,
      boxShadow: [
        BoxShadow(
          offset: Offset(0.0, 12.0),
          color: Colors.grey.withOpacity(0.3),
          blurRadius: 5.0,
        ),
      ],
    ),
    margin: EdgeInsets.symmetric(horizontal: 10.0),
    child: Row(
      children: <Widget>[
        IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {},
        ),
        Expanded(
          child: Container(
            alignment: Alignment.center,
            height: AppBar().preferredSize.height,
            child: TextField(
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: "Hint Text",
              ),
            ),
          ),
        ),
      ],
    ),
  ),
),

【讨论】：