Flutter placing a colored vertical line in a row-CodePudding

Below is code that is found in a row. I'm attempting to have them spaced out and separated with a thin white line. My idea was to place 3 sized boxes between the two containers (the first and last being the background color, with the middle being the figurative white line). Is there a better approach? I'm new to flutter and was instructed to keep my code DRY (don't repeat yourself).

Container(
  width: 135.0,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15),
  ),
),
const SizedBox(
  width: 20,
  child: DecoratedBox(
      decoration: BoxDecoration(color: Colors.white)),
),
Container(
  width: 135.0,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15),
  ),
)

CodePudding user response：

You SizedBox is fine for a thin white line, an alternative would be to give one of the containers a border only on their left/right side if thats what you want. For the spacing consider using the Expanded widget.

CodePudding user response：

You can use VerticalDivider with color parameter.

SizedBox(
  height: 100,
  child: Row(
    children: [
      Container(
        width: 135.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(15),
        ),
      ),
      VerticalDivider(
        color: Colors.red,
        thickness: 10,
      ),
      const SizedBox(
        width: 20,
        child: DecoratedBox(
            decoration: BoxDecoration(color: Colors.white)),
      ),
      VerticalDivider(
        color: Colors.red,
        thickness: 33,
      ),
      Container(
        width: 135.0,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(15),
        ),
      )
    ],
  ),
)