Flutter | How to draw custom borders around a widget / inside a Container

Question

I am trying to achieve a Flutter UI that has a look similar to that in this image;

Currently I am trying to achieve the border, basically a border with top and bottom cut out, possibly even cut out the top, bottom, and both sides to only have corners.

I have tried various CustomPaint methods but they were all very complex and had to be done per widget. I feel this should be simple but I cannot find a way.

How can I create a widget to wrap any given widget, say a FlatButton, or a Card or a TextSpan that will then create this border around its child?

Or even better, would it be possible to create a wrapper widget for the entire app/screen that will place a custom border around particular widgets? So if the widget tree contained any FlatButton's they would have the CustomBorder but say all Text's would not?

Answer 1

Custom border class

class TechBorder extends StatelessWidget {
  final Widget child;
  final Color borderColor;
  final double borderWidth, leftBorderLength, rightBorderLength;

  //This is just a sample, modify it as your requirement
  //add extra properties like padding,color etc.

  TechBorder(
      {Key k,
      @required this.child,
      @required this.borderColor,
      @required this.borderWidth,
      @required this.leftBorderLength,
      @required this.rightBorderLength,})
      : super(key: k);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          decoration: BoxDecoration(
                  border: Border(
                      left: BorderSide(color: borderColor, width: borderWidth),
                      right:
                          BorderSide(color: borderColor, width: borderWidth)),
                  color: Colors.transparent),
        ),
        Container(
            color: Colors.transparent,
            child: Stack(children: [
              Positioned(
                  top: 0,
                  left: 0,
                  child: Container(
                      color: borderColor,
                      width: leftBorderLength,
                      height: borderWidth)),
              Positioned(
                  bottom: 0,
                  left: 0,
                  child: Container(
                      color: borderColor,
                      width: leftBorderLength,
                      height: borderWidth)),
              Positioned(
                  right: 0,
                  child: Container(
                      color: borderColor,
                      width: rightBorderLength,
                      height: borderWidth)),
              Positioned(
                  bottom: 0,
                  right: 0,
                  child: Container(
                      color: borderColor,
                      width: rightBorderLength,
                      height: borderWidth)),
            ])),
        Padding(
          padding: const EdgeInsets.all(10.0),
          child: child,
        )
      ],
    );
  }
}

Usage

Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(
                      'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX18042265.jpg',
                    ),
                    fit: BoxFit.fill)),
            padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
            child: TechBorder(
              borderWidth:3.0,
              leftBorderLength:25,
              rightBorderLength:25,
                borderColor: Colors.blueAccent,
                child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                          padding: EdgeInsets.only(top: 5, bottom: 5),
                          child: Text('SCREEN:  Ox1b o1197hgk500',
                              style: TextStyle(
                                  color: Colors.blueAccent, fontSize: 17))),
                      Padding(
                          padding: EdgeInsets.only(top: 5, bottom: 5),
                          child: Row(
                            children: <Widget>[
                              Text('3518',
                                  style: TextStyle(
                                      color: Colors.blueAccent, fontSize: 17)),
                              Container(
                                  margin: EdgeInsets.only(left: 15),
                                  color: Colors.blueAccent,
                                  height: 12,
                                  width: 80),
                              SizedBox(width: 8),
                              Container(
                                  color: Colors.blueAccent,
                                  height: 12,
                                  width: 100)
                            ],
                          )),
                      Padding(
                          padding: EdgeInsets.only(top: 5, bottom: 5),
                          child: Text('Other fields gos here...',
                              style: TextStyle(
                                  color: Colors.blueAccent, fontSize: 17))),
                    ])))