點樣 Flutter 做 responsive layout？

Responsive UI (Source: Interactive Design)

喺 web dev 就可以用 Boostrap 嘅 Grid，但 Flutter 呢？之前成日以為得 LayoutBuilder，雖然就唔係覺得好方便，但都足以令我遲遲未用，直到我喺呢度發現左好野，極度好用嘅extension 一個：

import 'package:flutter/material.dart';

class ScreenSize {
  static const mobileLandscapeScreenWidth = 640;
  static const tabletScreenWidth = 768;
  static const desktopScreenWidth = 1024;
  static const ultraScreenWidth = 1280;
}

extension ResponsiveExtension on BuildContext {
  T responsive<T>(
    T defaultVal, {
    T? sm,
    T? md,
    T? lg,
    T? xl,
  }) {
    final wd = MediaQuery.of(this).size.width;

    return wd >= ScreenSize.ultraScreenWidth
        ? (xl ?? lg ?? md ?? sm ?? defaultVal)
        : wd >= ScreenSize.desktopScreenWidth
            ? (lg ?? md ?? sm ?? defaultVal)
            : wd >= ScreenSize.tabletScreenWidth
                ? (md ?? sm ?? defaultVal)
                : wd >= ScreenSize.mobileLandscapeScreenWidth
                    ? (sm ?? defaultVal)
                    : defaultVal;
  }
}

我第一眼望落其實有少少抗拒，但之後就覺得好好用，唔係 state manage 個介面 size，又唔洗下下要 MediaQuery.of(context) 黎 check，更加唔洗 LayoutBuilder。唯一 concern 可能係變 size 嘅時候（例如拉大屏幕邊框，engine 要 update 好多 widgets，但一般黎講使用嘅時候好少話屏幕成日變？

如果大家發現呢個方法有唔妥當嘅地方請留言，如果我發現我都會即時喺度更新，除非都係覺得無問題。

多謝收睇。