Creating responsive and adaptive apps

One of Flutter’s primary goals is to create a framework that allows you to develop apps from a single codebase that look and feel great on any platform.

Flutterの一つの主要なゴールは、あらゆるプラットフォームで素晴らしいルックアンドフィールを一つのコードベースで開発することを可能にするフレームワークを作ることです。

 

This means that your app may appear on screens of many different sizes, from a watch, to a foldable phone with two screens, to a high def monitor.

つまり、腕時計、2つの画面を持つ折りたたみ式携帯電話、高解像度モニターなど、さまざまなサイズの画面にあなたのアプリが表示される可能性があるということです。

 

Two terms that describe concepts for this scenario are adaptive and responsive. Ideally, you’d want your app to be both but what, exactly, does this mean? These terms are similar, but they are not the same.

このシナリオの概念を表す2つの用語は、adaptive(アダプティブ)とresponsive(レスポンシブ)です。理想的には、アプリがその両方であることが望ましいのですが、具体的にはどのような意味でしょうか。これらの用語は似ていますが、同じではありません。

---

The difference between an adaptive and a responsive app

Adaptive and responsive can be viewed as separate dimensions of an app: you can have an adaptive app that is not responsive, or vice versa. And, of course, an app can be both, or neither.

アダプティブとレスポンシブは、アプリの別の次元と見なすことができます。アダプティブなアプリがレスポンシブでない場合もあれば、その逆もあり得ます。もちろん、アプリはその両方であることもありますし、どちらでもないアプリもあり得ます。

 

ResponsiveTypically, a responsive app has had its layout tuned for the available screen size. Often this means (for example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is especially necessary when the same app can run on a variety of devices, from a watch, phone, tablet, to a laptop or desktop computer.

通常、レスポンシブ・アプリは、利用可能な画面サイズに合わせてレイアウトが調整されています。多くの場合、これはたとえば、ユーザーがウィンドウのサイズを変更したり、デバイスの向きを変えたりした場合に、UIを再レイアウトすることを意味します。これは、同じアプリを時計、電話、タブレット、ノートパソコン、デスクトップパソコンなど、さまざまなデバイスで実行する場合に特に必要なことです。

---

Adaptive

Adapting an app to run on different device types, such as mobile and desktop, requires dealing with mouse and keyboard input, as well as touch input. It also means there are different expectations about the app’s visual density, how component selection works (cascading menus vs bottom sheets, for example), using platform-specific features (such as top-level windows), and more.

モバイルとデスクトップなど、異なる種類のデバイス上でアプリを実行するには、マウスやキーボードによる入力と、タッチ入力に対応する必要があります。また、アプリのビジュアル密度、コンポーネントの選択方法（例えばカスケードメニューにするか、ボトムシートにするか、など）、プラットフォーム固有の機能（トップレベルウィンドウなど）の使用などについても、それぞれ異なる要件があることを意味します。

---

Creating a responsive Flutter app

Flutter allows you to create apps that self-adapt to the device’s screen size and orientation.

Flutterでは、デバイスの画面サイズや向きに自己適応するアプリを作成することができます。

There are two basic approaches to creating Flutter apps with responsive design:

レスポンシブデザインでFlutterアプリを作るには、2つの基本的なアプローチがあります。

Use the LayoutBuilder class

From its builder property, you get a BoxConstraints object. Examine the constraint’s properties to decide what to display.

そのbuilderプロパティからBoxConstraintsオブジェクトを取得できます。BoxConstraintsプロパティを調べて、何を表示するかを決めます。

 

For example, if your maxWidth is greater than your width breakpoint, return a Scaffold object with a row that has a list on the left. If it’s narrower, return a Scaffold object with a drawer containing that list.

例えば、maxWidthがwidthのブレイクポイントよりも大きい場合、左側にリストがある行を持つScaffoldオブジェクトを返します。maxWidthがブレイクポイントより狭い場合は、そのリストを含むdrawerを持つScaffoldオブジェクトを返します。

 

You can also adjust your display based on the device’s height, the aspect ratio, or some other property.

また、デバイスの高さやアスペクト比などのプロパティに基づいて、表示を調整することも可能です。

 

When the constraints change (for example, the user rotates the phone, or puts your app into a tile UI in Nougat), the build function runs.

BoxConstraintsが変わると（例えば、ユーザーが携帯電話を回転させたり、NougatでアプリをタイルUIにしたり）、buildメソッドが実行されます。

---

Use the MediaQuery.of() method in your build functions

This gives you the size, orientation, etc, of your current app. This is more useful if you want to make decisions based on the complete context rather than on just the size of your particular widget. Again, if you use this, then your build function automatically runs if the user somehow changes the app’s size.

これは、現在のアプリのサイズ、向きなどを取得できます。これは特定のウィジェットのサイズだけでなく、完全なコンテキストに基づいて意思決定を行いたい場合に、より便利です。繰り返しになりますが、これを使用すると、ユーザーが何らかの方法でアプリのサイズを変更した場合に、ビルド関数が自動的に実行されます。

 

Other useful widgets and classes for creating a responsive UI:

レスポンシブUIの作成のために有用な他のwidgetsとして下記のようなものがあります。

• AspectRatio
• CustomSingleChildLayout
• CustomMultiChildLayout
• FittedBox
• FractionallySizedBox
• LayoutBuilder
• MediaQuery
• MediaQueryData
• OrientationBuilder

---

Other resources

For more information, here are a few resources, including contributions from the Flutter community:

より詳しい情報は、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

---

Creating an adaptive Flutter app

Learn more about creating an adaptive Flutter app with Building adaptive apps, written by the gskinner team.

adaptiveなflutterアプリを作る方法をgskinnerチームのBuilding adaptive apps

で学びましょう。

---

Other resources

You can learn more about creating platform adaptive apps in the following resources:

プラットフォーム適応型(adaptive)アプリの作成については、以下のリソースで詳しく説明されています。

• Platform-specific behaviors and adaptations, a page on this site.
• Designing truly adaptive user interfaces a blog post and video by Aloïs Deniel, presented at this year’s FlutterViking conference.
• The Flutter gallery app (repo) has been written as an adaptive app.

 

参考

https://docs.flutter.dev/development/ui/layout/adaptive-responsive