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

问题

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'),
        ),
      ],
    ),
  ),

回答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
            ),
          ),
        ],
      ),
      ),
    );
  }
}

来源：https://stackoverflow.com/questions/49827520/how-to-split-two-containers-in-60-40-and-position-text-at-the-bottom-of-a-co

标签

positioning

Flutter