How to split two containers in 60% / 40% and position text at the bottom of a container in Flutter? - positioning

Question

I am trying to create something similar like the image below, where there are two containers, one that takes 40% of the screen and the other one the rest of the screen.
In the top container I would like to have a text at the top and one at the bottom, left aligned.
I have this:
// main page body
body: Container(
child: Column(
children: [
// top container
new Expanded(
child: null, // todo, add the two texts,
),
// bottom container
new Container(
height: 400.0, // this needs to be 60% of the page
child: new Text('test'),
),
],
),
),

Answer 1

You can use Expanded widget with flex property.
This is how I did it:
//with dart 2 new and const keywords are optional
void main() => runApp(new MaterialApp(home: new HomePage(),));
class HomePage extends StatelessWidget {
final text = new Text('Text here', style: new TextStyle(fontSize: 50.0),);
final margin = const EdgeInsets.only(bottom: 10.0, right: 10.0, left: 10.0);
final backColor = Colors.lightGreen;
#override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width; // Using this line I got the device screen width
return new Scaffold(
body: new SafeArea(//I didnt add appbar. this will add necessary padding for status bar.
child: new Column(
children: [
new Expanded(
flex: 2,
child: new Container(
width: width /1.5, // this will give you flexible width not fixed width
margin: margin, // variable
color: backColor,// variable
child: new Column(
children: <Widget>[
new Expanded(
flex: 1,
child: new Container(
alignment: Alignment.topCenter,
child: text, //varaible above
),
),
new Expanded(
flex: 1,
child: new Container(
alignment: Alignment.bottomCenter,
child: text, //variable above
),
),
],
),
),
),
new Expanded(
flex: 3,
child: new Container(
width: width /1.5, // this will give you flexible width not fixed width
margin: margin, //variable
color: backColor,//variable
),
),
],
),
),
);
}
}