レスポンシブアプリは、画面またはウィンドウのサイズと形状に応じてUIをレイアウトします。
これは、同じアプリを時計、電話、タブレットからラップトップやデスクトップコンピューターまで、さまざまなデバイスで実行できる場合に特に必要です。
ユーザーがラップトップまたはデスクトップのウィンドウのサイズを変更したり、電話やタブレットの向きを変更したりすると、アプリはそれに応じてUIを再配置することで応答する必要があります。
Flutterを使用すると、デバイスの画面サイズと向きに自己適応(self-adapt)するアプリを作成できます。
レスポンシブデザインのFlutterアプリを作成するには、2つの基本的なアプローチがあります。
Use the LayoutBuilder class
そのbuilderプロパティから、BoxConstraintsオブジェクトを取得します。
constraintsのプロパティを調べて、何を表示するかを決定します。
たとえば、maxWidthがwidthブレークポイントよりも大きい場合は、左側にリストがある行を持つScaffoldオブジェクトを返します。
工事中🏗
Use the MediaQuery.of() method in your build functions
これにより、現在のアプリのサイズ、向きなどがわかります。
これは、特定のウィジェットのサイズだけでなく、完全なコンテキストに基づいて決定を下したい場合に便利です。
繰り返しますが、これを使用すると、ユーザーが何らかの方法でアプリのサイズを変更すると、build関数が自動的に実行されます。
レスポンシブUIを作成するためのその他の便利なウィジェットとクラス：
AspectRatioCustomSingleChildLayoutCustomMultiChildLayoutFittedBoxFractionallySizedBoxLayoutBuilderMediaQueryMediaQueryDataOrientationBuilder
詳細については、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
参考
