Responsive

目前的狀況

使用直向手機為基礎做設計

遇到的問題

1. 手機轉向時，可滑動的區域過小
2. 手機自帶遮擋的區域（ e.g. 瀏海、下方橫條、單點前鏡頭 ） app 內容會被手機原生的

希望做到的

顧及 app 在不同尺寸、不同裝置下的體驗

change app layout base on screen size ← detect & use screen informations ← adaptive widgets

source: https://dribbble.com/shots/23665673-Adaptive-versions-of-an-educational-web-app-dashboard

source: https://dribbble.com/shots/15574574-Adaptive-design

Device Orientations

跟我一樣懶的人可以參考： 點擊 134 旁邊的 resource → 另開新分頁 → 下載 → 解壓縮 使用 VSCode 開啟 → 在 terminal 中下指令 flutter pub get 安裝 pubspec.yaml 中的項目 到 main.dart 中點擊 run with debugging，此時可以選擇 enable iOS / android

void main() {
  runApp(/* ... */);
}

import 'package:flutter/services.dart';

void main() {
  // 確認 Widget 已初始化
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
  ]).then((fn) {
    runApp(/* ... */);
  });
}

對部分 app 來說，直接鎖 orientation 是最好的方式（ e.g. 遊戲 ）

Update Layout

MediaQuery

https://www.youtube.com/watch?v=A3WrA4zAaPw

MediaQuery class - widgets library - Dart API

// content size
MediaQuery.of(context).size.width;
MediaQuery.of(context).size.height;

// orientation: Orientation.portrait / Orientation.landscape
MediaQuery.of(context).orientation;

// text size: no scaling / linear (1.3529411764705883x) / ...
MediaQuery.of(context).textScaler;

// PixelRatio: 2.0 / 3.0 / 6.5
MediaQuery.of(context).devicePixelRatio;

// brightness: Brightness.light / Brightness.dark
MediaQuery.of(context).platformBrightness;

// disableAnimations: false / true
MediaQuery.of(context).disableAnimations;