如何创建具有内阴影和渐变填充的卡片答案

【问题标题】：How to create a Card with both an inner shadow and a gradient fill如何创建具有内阴影和渐变填充的卡片
【发布时间】：2019-12-21 05:07:41
【问题描述】：

我正在尝试创建一个类似于此图像（左侧）的 ListView：

--请注意，列表的每一行都有从右到左的渐变，并且每行顶部的阴影从上面的行投射

但是出于对邪恶的热爱，我不能让 Flutter 为 Card 小部件同时绘制渐变和内部阴影（从顶部）！

在我的 Scaffold 中，我创建了一个 ListView，其中包含一堆供儿童使用的 InkWell。这些 InkWell 中的每一个都包含一张卡片，卡片有一个容器作为其子项。这些容器包含由一堆文本和东西组成的 A Row。

我已经尝试了很多技巧来为卡片颜色（BG 颜色）和 BoxShadow 设置颜色渐变（从 centerLeft 到 centerRight）（不幸的是，它没有为小部件顶部绘制的选项） .但到目前为止，没有什么能达到我想要的效果。

body: new ListView(
            children: <Widget>[
          new InkWell(
            onTap: () => showContent("Shadows in Flutter? :/"),
            child: new Card(
              elevation: 9.0,
              margin: EdgeInsets.all(0),
              child: new Container(
                  height: 104.0,
                  child: new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      new Container(

                        padding: EdgeInsets.only(left: 2.0, right: 5.0),
                        child: new Text("John Smith",
                            textAlign: TextAlign.center,
                            style: new TextStyle(
                                color: Color.fromARGB(255, 224, 117, 86),),
                      ),
                    ],
                  ),
                  decoration: new BoxDecoration(
                    boxShadow: [
                      new BoxShadow(
                          color: Colors.black,
                          blurRadius: 5.0,
                          offset: Offset(0, 10.0)
                      ),
                    ],
                    gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                        const Color.fromARGB(255, 254, 225, 111),
                        const Color.fromARGB(255, 232, 206, 96)
                      ],

                      tileMode: TileMode.clamp,
                    ),
                  )),
            ),
          ),

     ----- put a couple of Inkwell's similar to above

阴影未正确绘制，我无法从 Listview 的上部元素中绘制单个阴影

那么，有什么方法可以实现我想要的吗？

【问题讨论】：

标签： flutter

【解决方案1】：

使用foregroundDecoration 添加LinearGradient 这不是答案，但可以解决阴影

oregroundDecoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment(-1, -1),
          end: Alignment(-1, -0.8),
          colors: [Colors.black26, Colors.transparent],
        ),
      )

【讨论】：

是的，它完成了工作！这个可以和渐变一起使用。