每周学习一个 Flutter widget 2 : Expanded --- 填补可用的空间

flutter widget demo 地址：github

几乎每个Flutter布局都需要用到Row行和Column列, Row或Column类似于 前端 css 中的 flex布局，

Row或Column可以生成上面任何一个布局，也覆盖了业务的大部分布局，但总是有例外的嘛～～～，例如下面这种

看到这种布局，前端同学应该印象，利用flex布局，左右两边固定，中间自适应就可以实现这样的布局。那Flutter如何实现这种布局呢？其实Flutter更简单，只需要用Expanded包裹中间，然后设置 flex 属性即可。

Row _buildRowExpanded() {
    return Row(
      children: <Widget>[
        Container(
          color: Colors.greenAccent,
          height: 50,
          width: 50,
        ),
        Expanded(
          flex: 1,
          child: Container(
            color: Colors.amber,
            width: 50,
            height: 50,
          ),
        ),
        Container(
          color: Colors.blue,
          height: 50,
          width: 50,
        )
      ],
    );
  }