How to Stretch Columns to Full Screen Height In Flutter ?

A Column Widget is a widget where the elements or children are arranged vertically like a column. So, in this article, we will go through how to Stretch columns to Full-Screen Height in a flutter.

How to Stretch Columns to Full-Screen Height In Flutter?

Each Container Widget contains a column allowing you to add multiple widgets.

return Scaffold(
  backgroundColor: Color(0xFF222222),
    body: SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Expanded(
                  child: Container(
                    color: Colors.red,
                    child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                    Text('Left', textAlign: TextAlign.center),
                    Text('Left', textAlign: TextAlign.center),
                    Text('Left', textAlign: TextAlign.center),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.green,
                  child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                  Text('Right', textAlign: TextAlign.center),
                  Text('Right', textAlign: TextAlign.center),
                  Text('Right', textAlign: TextAlign.center),
                  ],
                 ),
                ),
               ),
              ],
             ),
            ),
            Expanded(
            child: Container(
              color: Colors.blue,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                Text('Bottom', textAlign: TextAlign.center),
                Text('Bottom', textAlign: TextAlign.center),
                Text('Bottom', textAlign: TextAlign.center),
               ],
             ),
           ),
         ),
       ],
     ),
   ),
 );

So, we will get output like the below:

Here’s the way to distribute your containers evenly both horizontally and vertically. Also, the code snippet will look like the below:

return Scaffold(
  backgroundColor: Color(0xFF222222),
  body: Column(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      Expanded(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            Expanded(
              child: Container(
              color: Colors.red,
              child: Text('Left', textAlign: TextAlign.center),
             ),
           ),
           Expanded(
             child: Container(
             color: Colors.green,
             child: Text('Right', textAlign: TextAlign.center),
             ),
            ),
          ],
        ),
      ),
      Expanded(
        child: Container(
        color: Colors.blue,
        child: Text('Bottom', textAlign: TextAlign.center),
       ),
      ),
    ],
  ),
);

So, we will get a result like the below:

Final Edit version 4:

return Scaffold(
backgroundColor: Color(0xFF222222),
body: Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
  SizedBox(height: 20),
    Expanded(
    child: Row(
    mainAxisSize: MainAxisSize.max,
    crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
            Expanded(
              child: Container(
              color: Colors.red,
              child: Text('Left', textAlign: TextAlign.center),
             ),
            ),
           ],
          ),
         ),
         Expanded(
         child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
           Expanded(
             child: Container(
             color: Colors.red,
             child: Text('Right', textAlign: TextAlign.center),
              ),
             ),
            ],
           ),
          ),
         ],
        ),
      ),
      Expanded(
        child: Column(
        mainAxisSize: MainAxisSize.max,
        crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
          Expanded(
          child: Container(
          color: Colors.green,
          child: Text('Bottom', textAlign: TextAlign.center),
           ),
          ),
         ],
        ),
       ),
      ],
     ),
   );

Also, to get columns to take up the full width of the display and to share the height equally we did the following:

return MaterialApp(
  home: Scaffold(
    backgroundColor: Colors.black,
    body: SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Expanded(
            child: SizedBox(
              width: double.infinity,
              child: FlatButton(
                onPressed: () {
                  playSound(1);
                },
                color: Colors.blue,
              ),
            ),
          ),

Expanded Widget will share the height while the SizedBox Widget will take up the whole width with width is set to double.infinity.

Conclusion:

Thanks for being with us on a Flutter Journey !!!

In this article, We have been through How to center the Title of a ListTile In Flutter ??

Keep Learning !!! Keep Fluttering !!!

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.