Flutter-最簡單的 Flexible 使用範例

背景知識

有使用到 Container 、 Row 與 Row 可參考Flutter-最簡單的 Container 使用範例 、 Flutter-最簡單的 Row 使用範例 、 Flutter-最簡單的 Column 使用範例

官方說明頁面

本文 source code

介紹內容

Flexible 可以擴展 Row, Column 的子畫面，若超過指定的大小則根據 flex 畫面佔比的平均分配，在多個物件需要自適應大小的狀況下相當實用，如以下效果

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Flexible(
          child: Container(
            color: Colors.red,
            height: 80,
            width: 80,
          ),
          flex: 2,
        ),
        Flexible(
          child: Container(
            color: Colors.yellow,
            height: 80,
            width: 80,
          ),
          flex: 3,
        ),
        Flexible(
          child: Container(
            color: Colors.green,
            height: 80,
            width: 80,
          ),
          flex: 4,
        ),
      ],
    );

超過大小的狀況

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Flexible(
          child: Container(
            color: Colors.red,
            height: 80,
            width: 800,
          ),
          flex: 2,
        ),
        Flexible(
          child: Container(
            color: Colors.yellow,
            height: 80,
            width: 800,
          ),
          flex: 3,
        ),
        Flexible(
          child: Container(
            color: Colors.green,
            height: 80,
            width: 800,
          ),
          flex: 4,
        ),
      ],
    );