Expanded与FractionallySizedBox的选择

Expanded：等分组件 flex来设置比例,父组件必须是Flex，Row，Column
FractionallySizedBox：根据现有布局调整child大小，child设置的大小无效
FractionallySizedBox 在同一方向不允许与其他FractionallySizedBox并列，否则会出现crash

FractionallySizedBox

如果你有一个Widget，则可以使用FractionallySizedBox widget指定要填充的可用空间的百分比。在这里，绿色Container设置为填充可用宽度的70％和可用高度的30％。

Widget myWidget() {
 return FractionallySizedBox(
   widthFactor: 0.7,
   heightFactor: 0.3,
   child: Container(
     color: Colors.green,
   ),
 );
}

Expanded

该Expanded 允许widget来填充可用的空间，该空间水平和垂直都可以。你可以使用Expanded 的flex属性将多个widget设置他们的权重。绿色Container占宽度的70％，黄色Container占宽度的30％。

Widget myWidget() {
 return Row(
   children: <Widget>[
     Expanded(
       flex: 7,
       child: Container(
         color: Colors.green,
       ),
     ),
     Expanded(
       flex: 3,
       child: Container(
         color: Colors.yellow,
       ),
     ),
   ],
 );
}