flutter - 如何在Flutter中进行自定义边框设计？

Question

我正在尝试使布局类似于此图像。

这是我的代码:

  GestureDetector(
              child: Container(
                width: double.infinity,
                margin: EdgeInsets.only(left: 15, right: 15),
                height: 100,
                decoration: BoxDecoration(
                    border: Border(
                      left: BorderSide(color: Colors.blue, width: 10.0),
                      top: BorderSide(color: Colors.grey[300], width: 2),
                      right: BorderSide(color: Colors.grey[300], width: 2),
                      bottom: BorderSide(color: Colors.grey[300], width: 2),
                    ),
                    borderRadius:
                        BorderRadius.only(
                        topRight: Radius.circular(15)
                        )),
              ),
              onTap: () => {},
            )

Answer 1

不确定为什么，但是borderRadius仅在使用Border指定边框时才起作用，否则它将崩溃。
也许这种解决方法可以为您完成工作。

 GestureDetector(
   child: Stack(children: <Widget>[
     new Container(
       margin: EdgeInsets.only(left: 15, right: 15),
       width: double.infinity,
       height: 100.0,
       decoration: new BoxDecoration(
         border: new Border.all(
             color: Colors.grey[300],
             width: 2.0,
             style: BorderStyle.solid),
         borderRadius: new BorderRadius.horizontal(
           right: new Radius.circular(20.0),
         ),
       ),
     ),
     Container(
         width: 10,
         height: 100,
         margin: EdgeInsets.only(left: 15),
         color: Colors.blue),
   ]),
 )