Flutter Row not taking full Scaffold height

Question

I am working on the skeleton of a tablet app with flutter and I am facing, probably a very simple issue, but it is getting tricky for me to figure out what is going on here.

Basically the skeleton of the app should look something like this:

For that, I have written a simple Stateless class like this:

class BaseDetailsRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Flexible(flex: 1, child: _selectionColumn()),
          Flexible(flex: 7, child: _contentArea())
        ],
      ),
    );
  }

  Widget _contentArea() => Container(color: Colors.orange,);

  Column _selectionColumn() => Column(
    children: <Widget>[
      Expanded(child: Container(color: Colors.blue,))
    ],
  );
}

Which is giving me ALMOST the expected result:

The little issue here is on the bottom of the screen, as you can see, in the Scaffold, I have put backgroundColor: Colors.grey, and, after rendering the Row in the screen, it seems like for some reason I cannot make it take the whole available height, and I still see a bit of the grey background color of the Scaffold on the bottom.

I have tried wrapping the whole Scaffold inside a SafeArea widget, but it did not work.

How can I fix this in an easy way, meaning not having to add a bunch of other widgets?

score 1 · Answer 1 · answered May 06 '20 at 08:09

1

It's kind of weird but your code is working as intended on my side (For both Portrait and Landscape). What emulator are you using?

See Picture: Pixel 2 API 29 Emulator Portrait Pixel 2 API 29 Emulator Lanscape

answered May 06 '20 at 08:09

Bilaal Abdel Hassan

1,181
2
12
20

ok that is good to know, I am using real device, a tablet in this case so, it it perhaps something that the tablet is producing?, very weird – codeKiller May 06 '20 at 08:16
no, unfortunately I just have the possibility to use one single tablet that I have now, I will try to test that on an emulator. – codeKiller May 06 '20 at 08:20

score 0 · Answer 2 · answered May 06 '20 at 07:27

0

could you Please try

     child: Column(
                mainAxisSize:  MainAxisSize.max,
                children: <Widget>[

and let me know is it working

answered May 06 '20 at 07:27

JustCodeNinja

79
3

thanks but no it does not, note that the Column is inside the main Row that is in the body of the Scaffold, so the Column "seems" to not be the problem here, I think. – codeKiller May 06 '20 at 07:29

Flutter Row not taking full Scaffold height

2 Answers2