圆角的卡片小部件，右边框呈抖动状

Question

我必须创建一个这样的卡：

我已经编写了下面的代码来实现所需的UI，但未按预期工作。

Card(
  elevation: 5,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomRight: Radius.circular(10),
      topRight: Radius.circular(10)),
    side: BorderSide(width: 5, color: Colors.green)),
  child: ListTile(),
)

上面的代码产生了这一点：

而使用以下代码：

Card(
  elevation: 5,
  shape: Border(right: BorderSide(color: Colors.red, width: 5)),
  child: ListTile(),
)

生成此输出：

如何在flutter中创建所需的UI？

Answer 1

使用 Card 小部件中的 shape 参数，例如：

Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15.0),
      ),
      child: Container() )

Answer 2

你应该把你Card放在一个ClipRRect小部件里面：

     return ClipRRect(
              borderRadius: BorderRadius.circular(15.0),
              child: Card(
                elevation: 5,
                shape: Border(right: BorderSide(color: Colors.red, width: 5)),
                child: ListTile(),
       ),
     );

但我建议您减小 的值，elevation因为它会扭曲小圆形边框。

Answer 3

我已经使用ClipPath来实现问题中提出的UI，请查看以下代码。

Card(
     elevation: 2,
     child: ClipPath(
       child: Container(
              height: 100,
              decoration: BoxDecoration(
              border: Border(right: BorderSide(color: Colors.green, width: 5))),
            ),
       clipper: ShapeBorderClipper(shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(3))),
               ),
    )

这给出了以下输出，

如果有更好的方法达到上述结果，请回答。

Answer 4

这个解决方案对我有用。如果我们shape从卡片中移除属性，它会留下矩形的白色角落。没有任何限制elevation。

              Card(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(15.0),
                ),
                shadowColor: Colors.blueAccent,
                elevation: 15,
                child: ClipPath(
                  clipper: ShapeBorderClipper(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(15))),
                  child: Container(
                    height: 180,
                      decoration: BoxDecoration(
                        border: Border(
                            left: BorderSide(color: Colors.red, width: 15)),
                        color: Colors.yellowAccent.shade100,
                      ),
                      padding: EdgeInsets.all(20.0),
                      alignment: Alignment.centerLeft,
                      child: Container()),
                ),
              )