今回読んだページ
このページは短め
Creating responsive apps
レスポンシブアプリは、スクリーンやウィンドウのサイズと形に応じてUIをレイアウトする。
これは、同じアプリが様々なデバイス（例えば、スマートウォッチ、スマートフォン、タブレット、ラップトップ・デスクトップコンピューターなど）で起動する際に特に必要不可欠である。
ユーザーがラップトップ・デスクトップのウィンドウをリサイズしたときや、スマートフォン・タブレットの向きを変えた時、アプリはそれに応じてUIを再配置する必要がある。
Flutterを使うと、デバイスの画面サイズと向きに自己適応するアプリを作ることができる。
レスポンシブデザインでFlutterアプリを作る2つのアプローチがある。
Use the LayoutBuilder class
そのbuilderプロパティから、BoxConstraintsオブジェクト変えられる。
表示するものを決定するために、制約プロパティを調べる。
例えば、maxWidthが幅のブレークポイントより大きければ、左側にリストを持った行を持つScaffoldオブジェクトを返す。もし狭ければ、そのリストを含むドロワーを持つScaffoldオブジェクトを返す。
デバイスの高さ、アスペクト比、その他のプロパティに基づいて調整することもできる。
制約が変わった時（例えば、ユーザーが端末を回転させた、または、NougatのタイルUIにアプリを配置したときなど）は、build関数が実行される。
Nougat（ヌガー）はAndroid 7の名称で、アプリを同時に2つ表示する機能があるらしい。
Use the MediaQuery.of() method in your build functions
これにより、現在のアプリのサイズや向きが得られる。
これは、特定のWidgetのサイズだけでなく、完全なコンテキストに基づいて決定したいときにより役立つ。
繰り返しだが、これを使うと、ユーザーが何らかの方法でアプリのサイズを変更したときにビルド関数が自動的に実行される。
レスポンシブUIを作るための その他の便利なWidgetやClass:
- AspectRatio
- CustomSingleChildLayout
- CustomMultiChildLayout
- FittedBox
- FractionallySizedBox
- LayoutBuilder
- MediaQuery
- MediaQueryData
- OrientationBuilder
より詳しい情報は、Flutterコミュニティからの投稿を含む、以下のリソースをみよう。
- Developing for Multiple Screen Sizes and Orientations in Flutter by Deven Joshi
- Build Responsive UIs in Flutter by Raouf Rahiche
- Making Cross-platform Flutter Landing Page Responsive by Priyanka Tyagi
- How to make flutter app responsive according to different screen size?, a question on StackOverflow