Creating responsive and adaptive apps
JboyHashimoto公式の解説
Flutterの主な目標のひとつは、単一のコードベースから、どんなプラットフォームでも見栄えのするアプリを開発できるフレームワークを作ることだ。
つまり、あなたのアプリは、腕時計から、2つのスクリーンを持つ折りたたみ式の携帯電話、高解像度のモニターまで、さまざまなサイズのスクリーンに表示される可能性があるということです。
このシナリオのコンセプトを表す2つの用語は、アダプティブとレスポンシブです。理想を言えば、アプリはその両方であることが望ましいが、これは具体的に何を意味するのだろうか？これらの用語は似ていますが、同じではありません。
アダプティブアプリとレスポンシブアプリの違い
アダプティブ・アプリとレスポンシブ・アプリは、アプリの別々の次元として見ることができる。もちろん、アプリは両方であることも、どちらでもないこともあります。
レスポンシブ
通常、レスポンシブアプリは、利用可能な画面サイズに合わせてレイアウトを調整します。多くの場合、これは（例えば）ユーザーがウィンドウのサイズを変更したり、デバイスの向きを変えたりした場合に、UIをレイアウトし直すことを意味します。これは、同じアプリが時計、電話、タブレット、ラップトップやデスクトップコンピュータなど、さまざまなデバイスで実行できる場合に特に必要です。
アダプティブ
モバイルとデスクトップなど、異なるタイプのデバイスでアプリを実行するには、タッチ入力だけでなく、マウスやキーボード入力にも対応する必要があります。また、アプリの視覚的な密度、コンポーネントの選択方法（カスケードメニューとボトムシートなど）、プラットフォーム固有の機能（トップレベルウィンドウなど）の使用などについて、異なる期待があることを意味します。
詳しくは、次の5分間のビデオをご覧ください：
JboyHashimotoレスポンシブFlutterアプリの作成
Flutterでは、デバイスの画面サイズや向きに自己適応するアプリを作成できます。
レスポンシブデザインでFlutterアプリを作るには、2つの基本的なアプローチがあります：
LayoutBuilderクラスを使う
そのbuilderプロパティからBoxConstraintsオブジェクトを取得する。制約のプロパティを調べて、何を表示するかを決めます。例えば、maxWidthがwidthのブレークポイントより大きい場合は、左にリストがある行を持つScaffoldオブジェクトを返します。幅が狭い場合は、そのリストを含む引き出しを持つScaffoldオブジェクトを返します。また、デバイスの高さやアスペクト比、その他のプロパティに基づいて表示を調整することもできます。制約が変更されると（たとえば、ユーザーが携帯電話を回転させたり、AndroidでアプリをタイルUIにしたり）、ビルド関数が実行されます。
ビルド関数でMediaQuery.of()メソッドを使用します。
これにより、現在のアプリのサイズや向きなどが得られます。これは、特定のウィジェットのサイズだけでなく、完全なコンテキストに基づいて判断したい場合に便利です。繰り返しになりますが、これを使用すると、ユーザーが何らかの方法でアプリのサイズを変更した場合に、ビルド関数が自動的に実行されます。
レスポンシブUIを作成するためのその他の便利なウィジェットやクラス：
AspectRatio
CustomSingleChildLayout
CustomMultiChildLayout
FittedBox
FractionallySizedBox
LayoutBuilder
MediaQuery
MediaQueryData
OrientationBuilder
その他のリソース
より詳しい情報については、Flutterコミュニティからの寄稿を含むいくつかのリソースがあります：
Flutterで複数のスクリーンサイズと向きに対応する開発 by Deven Joshi
FlutterでレスポンシブUIを作る by Raouf Rahiche
クロスプラットフォームのFlutterランディングページをレスポンシブにする by Priyanka Tyagi
Flutterアプリを異なるスクリーンサイズに応じてレスポンシブにする方法は？
アダプティブFlutterアプリの作成
アダプティブなFlutterアプリの作成については、gskinnerチームによるBuilding adaptive appsを参照してください。
The Boring Showの以下のエピソードもチェックしてみてください：