手機有各式大小、尺寸繁多，當然開發App也要做到Responsive響應式的設計，身為前端工程師，RWD網站可說是在熟悉不過，在Css裡設定好media query；或是在JS中判斷window尺寸，兩者都可以讓網站乖乖地不破版。那App該怎麼做呢？Flutter針對響應式介面提供了一些非常有用的widget：

• BoxConstraints
  透過LayoutBuilder建立一個給定範圍尺寸的Box。

BoxConstraints({double minWidth: 0.0, double maxWidth: double.infinity, double minHeight: 0.0, double maxHeight: double.infinity })

minWidth < BoxConstraints.width < maxWidth
minHeight < BoxConstraints.height < maxHeight

• AspectRatio
  依照父元素尺寸縮放的，指定長寬比例的widget。
  widget首先會依照LayoutConstraints(佈局約束)的最大寬度來取等比的高度，會一層一層往外找符合lauout限制長寬值、AspectRatio二者兼具的尺寸。
  例如：AspectRatio設為2.0，佈局約束要求 0 < width、height < 100，最後會得到寬度100(允許的最大值)，高度50(匹配結果)。
  之前我們做GridView也有用到：Day12-懶洋洋的週末就來做個卡片吧

If the widget does not find a feasible size after consulting each constraint, the widget will eventually select a size for the child that meets the layout constraints but fails to meet the aspect ratio constraints.
如果widget在佈局中沒辦法找到匹配的寬高，則widget最終將為child選擇一個符合佈局約束但不符合長寬比的大小。

• FittedBox
  FittedBox會自動縮放或剪裁其子元素，也可以用alignment置左置中對齊。使用Boxfit來規定子元素如何縮放，他有許多參數可以使用，例如：fill 、cover、contain、fitWidth。

MyRect(
  child: FittedBox(
    fit: Boxfit.contain,
    alignment: Alignment.center
    child: mychild()
  )
)

• FractionallySizedBox
  如果Widget的尺寸要用%數來表示，好達到隨著螢幕縮放尺寸，FractionallySizedBox就是為了它而存在的，widthFactor、heightFactor的參數值以小數表示百分比，FractionallySizedBox裡的物件都會是水平垂直置中，如果要改變他在畫面中的位置，必須在父層設定。

Container(
  alignment: Alignment.centerLeft, //在父層控制FractionallySizedBox位置
  child: FractionallySizedBox(  //FractionallySizedBox always align:center
    widthFactor: 0.7,  //70%
    heightFactor: 0.8,   //80%
    child: MyChild(),
  )
);

這邊有FractionallySizedBox的範例程式碼可以參考一下～
祝大家有個美好的國慶假期