I want to split my box in two parts seperated by a divider line I tried something like this:

Card(
    child: Row(
        mainAxisSize: MainAxisSize.max,
        children: [
            Container(
                color: Colors.green,
                width: 25.w-8-4,
                child: const Text("box1")),
            const VerticalDivider(
                color: Colors.red,
                width: 16,
                thickness: 2,
            ),
            Container(
                color: Colors.indigo,
                width: 75.w-8-4,
                child: const Text("box2"),
            )
        ],
    )
)

using the

But unfortunately I can't seem to see the vertical divider (space is just white?). And also it would be great to have a way to say, "please consume about 25% and 75% of the space" to the left and right container, of what is left after the divider line is drawn. Is there a way to put it like this? This would make it easier to use padding/margin at the containers too. Without having to subtract stuff from width of the containers respectively.

Thanks a lot

CodePudding user response：

Have you considered using Expanded ?

return Row(
 children:[
  Expanded(
    flex:25,
    child: Container(
       color: Colors.green,
       child: Text('box1'),
        ),
      ),
  Expanded(
    flex:75,
    child: Container(
       color: Colors.blue,
       child: Text('box2'),
        ),
      ),
   ],
);

Add the margin/padding accordingly.