使两个角圆化和两个直切而不是颤振中的曲线

Question

我怎样才能在颤振中做出下面的瓷砖状设计，两侧有一点弯曲，两侧的其余部分是直线切割的柔和曲线。我可以制作两个圆角和两个非圆角，但无法制作如下所示的一个。任何人都知道如何制作这样的瓷砖。我已经使用了 RoundRect、ClipRRect 和 Container，但无法制作这样的 Widget。任何帮助都将非常重要。

感谢您提前投入的时间和精力。

Answer 1

操作方法如下：

            Material(
              clipBehavior: Clip.antiAlias,
              shape: BeveledRectangleBorder(
                 // side: BorderSide(color: Colors.blue), if you need
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20.0),
                      bottomRight: Radius.circular(20.0))),
              child: Container(
                height: 100,
                width: 100,
               decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
              ),
            ),

如果您需要实现它，这是您提供的图像的代码：

            Row(
              children: <Widget>[
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.blue,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.black,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Material(
                      clipBehavior: Clip.antiAlias,
                      shape: BeveledRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0))),
                      child: Container(
                        height: 100,
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: BorderRadius.circular(15.0),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),