Flutter Row not taking full Scaffold height

857

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

Share:
857
codeKiller
Author by

codeKiller

Updated on December 20, 2022

Comments

  • codeKiller
    codeKiller over 1 year

    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:

    enter image description here

    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:

    enter image description here

    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?

  • codeKiller
    codeKiller about 4 years
    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
    codeKiller about 4 years
    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
    codeKiller about 4 years
    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.