White space between Expanded widgets

Viewed 357

Some Flex values create white space between Expanded widgets, as I understand it is the remainder of the calculations.

For example:

Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
        flex: 4,
        child: Container(
          color: Colors.green,
        ),
      ),
      Expanded(
        flex: 6,
        child: Container(
          color: Colors.green,
        ),
      ),
    ],
  ),
);

I'm looking for an elegant way to make these widgets take up all the available space. The whole problem is that the flex values change during animation and this white line blinks.

Thanks!

2 Answers

it seems it is coming from border of Container,

Github Issue is still open.

enter image description here

here is the widget

 Scaffold(
      backgroundColor: Colors.green,
      body: Column(
        children: <Widget>[
          Expanded(
            flex: 4,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(
                  color: Colors.green,
                ),
              ),
              child: Text("Section A"),
            ),
          ),
          Expanded(
            flex: 6,
            child: Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                color: Colors.green,
                border: Border.all(
                  color: Colors.green,
                ),
              ),
              child: Text("Section B"),
            ),
          ),
        ],
      ),
    );

Try to add SizedBox() in between your expanded Widget like below:

Scaffold(
  body: Column(
    children: <Widget>[
      Expanded(
        flex: 4,
        child: Container(
          color: Colors.green,
        ),
      ),
   SizedBox(
     height: 25,)
      Expanded(
        flex: 6,
        child: Container(
          color: Colors.green,
        ),
      ),
    ],
  ),
); 
Related