如何在 Flutter 中将两个容器拆分为 60% / 40% 并将文本放置在容器底部？

Question

我正在尝试创建类似于下图的内容，其中有两个容器，一个占屏幕的 40%，另一个占屏幕的其余部分。

在顶部容器中，我希望在顶部有一个文本，在底部有一个文本，左对齐。

我有这个：

 // 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

您可以使用 Expanded widget with flex 属性.

我是这样做的：

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

如何在 Flutter 中将两个容器拆分为 60% / 40% 并将文本放置在容器底部？

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

positioning

flutter