Flutter stretch columns to full screen height

Question

All three elements are at the top of the screen and stretch to fill the width, but I want them to stretch to fill the screen vertically from top to bottom.

I tried adding a Row around everything but it throws the error RenderFlex children have non-zero flex but incoming width constraints are unbounded? So I tried wrapping that Row in an Expanded widget which throws the error 'Expanded widgets must be placed inside Flex widgets'.

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

Answer 1

Is this more like what you are after?

Each container 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),                   ],                 ),               ),             ),           ],         ),       ),     );