卡片底部颜色飘动答案

【问题标题】：Color bottom of Card in flutter卡片底部颜色飘动
【发布时间】：2019-01-23 14:10:26
【问题描述】：

我正在使用 GridView 和卡片构建布局。我想在每张卡片的底部添加一种颜色。我发现了这个问题Fill an area with color in Flutter 并尝试对底部做同样的技巧，但每次 SizedBox 都会溢出圆卡角。知道如何解决这个问题吗？

下面的示例代码显示了该问题。我尝试为卡片的底部着色，当我这样做时，卡片的角落会丢失，就像从容器溢出一样。

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Colors.lightBlue,
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Card(
        margin: EdgeInsets.all(20),
        elevation: 10,
        child: SizedBox(
          height: 100,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Text("line1"),
              Text(
                "line2",
              ),
              Expanded(
                  child: Container(
                /*color: Colors.orange,*/ child: Text("Bottom"),
              )), 
            ],
          ),
        ),
      ),
      Expanded(
        child: Container(),
      )
    ],
  ),      
);

}

【问题讨论】：

您能否提供您当前的Card 代码和您希望它们看起来像的图像示例？
可能在这里找到了解决方案stackoverflow.com/questions/53866481/… 然后重启模拟器:(

标签： flutter

【解决方案1】：

尝试在您的Container 中使用BoxDecoration，并使用与您的Card (4.0) 相同的半径

            Expanded(
                        child: Container(
                          decoration: BoxDecoration(
                              color: Colors.orange,
                              borderRadius: BorderRadius.only(
                                  bottomLeft: Radius.circular(4.0),
                                  bottomRight: Radius.circular(4.0))),
                          child: Text("Bottom"),
                        ),
                      ),

【讨论】：