Sizing widgets

如果widget太大，例如圖片太大張導致畫面放不下的時候，可以使用Expanded widget去把尺寸太大的widget包進去，Expanded可以讓row或column裡的widget平均分配大小

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);

output

使用flex property調整大小的比例

在上圖都沒有使用flex，所以系統會使用預設值1:1:1去分配三張圖片的大小，這次在中間的圖片加上flex: 2,，這樣就可以讓三張圖片大小的比例變成1:2:1

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      flex: 2,
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);

output

參考資料:
https://docs.flutter.dev/development/ui/layout