做两个圆角和两个直切而不是颤动的曲线 [英] Make two corner rounded and two straight cut instead of curve in flutter

问题描述

我怎样才能使下面的瓷砖像设计一样飘动，两侧有点弯曲，两侧的其余部分是平直的，曲线柔和.我可以制作两个圆角和两个不圆角，但无法制作像下面这样的.任何人都知道如何制作这样的瓷砖.我使用过 RoundRect、ClipRRect 和 Container，但无法制作这样的 Widget.任何帮助都将不胜感激.

How can I make below tile like design in flutter, two sides are little curved and rest of the two side are straight cut with soft curve. I can make two rounded corners and two unrounded, but unable to make like below one. Anyone know how to make tile like this. I have used RoundRect, ClipRRect and Container but unable to make Widget like this. Any help will be appreciable.

提前感谢您的时间和精力.

Thanks for your time and effort in advance.

推荐答案

你是这样做的:

            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),
                        ),
              ),
            ),

如果你需要实现的话，这里是你提供的图片的代码:

Here is the code of the image you provided if you need to implement it:

            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),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),

这篇关于做两个圆角和两个直切而不是颤动的曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！