はじめに
画面回転の対応について調べたので、記事にしたいと思います。
実装したのは下記になります。
画面回転に対応するために必要なこと
いくつかの参考記事を読んだ結果、以下が必要だという結論に至りました。
- 画面回転に対応するための実装知識
- 画面回転時のデザインの知識
Flutterで画面回転に対応する記事はたくさんあります。ただ、デザインについて言及している記事はあまりみかけなかったです。
回転に対応するだけの実装なら簡単だと思いますが、効果的に回転に対応するのは実装の知識だけではダメだと思いました。
どの画面で入れるのがいいのか？ どういうデザインにすればいいのか？ についての知識が必要だと思います。
デザインの知識を得るためには、普段使っているアプリを回転させてみて、どういった画面になるのか、または回転しないのかを確認してみるのが良いと考えています。
例えば、Youtubeでは以下のような動作になっていました。
- 検索して動画一覧を表示する画面は縦向き固定
- 一覧から動画を選択し再生する画面では、縦横両方をサポート
（スマホで確認したので、タブレットでは違う動作かもしれないです）
この例から私は以下のようなパターンがあるのかなと思いました。
- 動画一覧のような画面では縦向き固定で、横向きに対応する必要はないっぽい
- 動画を表示するような画面では縦と横両方に対応した方が良さそう
私自身まだまだ勉強中ですが、例えば、設定画面ならどうなるのか？、ログイン画面ならどうなるのか？など、いろんなアプリで試してみると良さそうです。また、スマホとタブレットで比較してもいいかもしれません。
こういうのが、まとまっているサイトがあればいいんですけどね。
もし知っている方いれば教えていただけると助かります。
画面回転に対応する実装
実装の手順としては以下の順序で行いました。
- 画面毎の向きの対応を決める
- 縦・横両方の対応を入れる画面では、縦と横のデザインを決める
- 実装する
画面毎の向きの対応を決める
前提として、実装したアプリは、一覧画面と詳細画面を表示するアプリです。
YouTubeのアプリを参考にし、画面毎の対応は以下にします。
- 一覧画面は縦向き固定
- 詳細画面は縦・横両方対応
縦・横両方の対応を入れる画面では、縦と横のデザインを決める
両対応が必要な詳細画面は縦と横で以下のようなデザインにしました。
実装する
画面毎にサポートする向きを設定する
Flutterでは、SystemChrome.setPreferredOrientationsでサポートする画面の向きを設定できます。
以下のように使います。
// 縦向きに変更
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitDown,
DeviceOrientation.portraitUp
]);
デフォルトで縦向き固定にしたい場合は上記をmainで呼んでおくといいと思います。
iPadの場合は別途対応が必要になります。詳細は以下をご参照ください。
私がサンプルで実装したアプリでは、一覧画面と詳細画面の遷移のタイミングで設定するようにしています。
縦と横でUIを実装する
縦と横で別々にUIを実装するのは非常に簡単で、以下の二つどちらかの方法を使い、画面の方向を検知し、それぞれでUIを実装します。
- MediaQuery
- OrientationBuilder
class UseMediaQueryPage extends StatelessWidget {
const UseMediaQueryPage({super.key});
@override
Widget build(BuildContext context) {
return MediaQuery.of(context).orientation == Orientation.portrait
? Container(
child: const Text("縦向き"),
)
: Container(
child: const Text("横向き"),
);
}
}
class UseOrientationBuilderPage extends StatelessWidget {
const UseOrientationBuilderPage({super.key});
@override
Widget build(BuildContext context) {
return OrientationBuilder(
builder: (context, orientation) {
return orientation == Orientation.portrait
? Container(
child: const Text("縦向き"),
)
: Container(
child: const Text("横向き"),
);
},
);
}
}
実装のTips
画面の向きに対して実装するだけなら上記の情報で問題ないのですが、参考記事を読んでいて、役に立ちそうなTipsがあったので紹介します。
Widgetをバーツ化して、レイアウトに合わせて組みかえられるようにする
Androidアプリの開発では、Fragmentsという再利用可能なコンポーネントを作成し、画面に合わせて組み換えて、レスポンシブなデザインに対応するみたいです。
Flutterでいうなら、再利用可能なWidgetsを作成するという形になると思います。
実際のコードで考えてみましょう。
以下のページを実装しました。
（赤枠と数字は分割して捉えるために記載しています）
再利用可能ではない状態とは下記のようなコードです。
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//---- 1の部分 ------
Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
decoration: BoxDecoration(
color: Colors.deepPurple.shade300,
shape: BoxShape.circle,
),
width: 72,
height: 72,
child: const Center(
child: Text(
"Image",
style: TextStyle(
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
),
),
const SizedBox(width: 16),
Flexible(
child: Text(
"username",
style: Theme.of(context).textTheme.headlineLarge,
),
),
],
),
//---------------
//---- 余白 ------
const SizedBox(
height: 16,
),
//---------------
//--- 2の部分 ----
SizedBox(
width: width,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_createRow(
context: context,
label: "ID",
content: user.id,
),
const Divider(
thickness: 1,
height: 8,
color: Colors.black,
),
const SizedBox(
height: 8,
),
_createRow(
context: context,
label: "email",
content: user.email,
),
const Divider(
thickness: 1,
height: 8,
color: Colors.black,
),
const SizedBox(
height: 8,
),
_createRow(
context: context,
label: "age",
content: "${user.age}",
),
const Divider(
thickness: 1,
height: 8,
color: Colors.black,
),
],
),
),
],
),);
}
Widget _createRow({
required BuildContext context,
required String label,
required String content,
}) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_createLabel(label, context),
Flexible(
child: Align(
alignment: Alignment.centerRight,
child: _createText(content, context),
),
),
],
);
}
Widget _createLabel(
String text,
BuildContext context,
) {
return Text(
text,
maxLines: 3,
style: Theme.of(context).textTheme.titleLarge,
);
}
Widget _createText(
String text,
BuildContext context,
) {
return Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
text,
style: Theme.of(context).textTheme.titleMedium,
),
);
}
見ての通り、全部べた書きで書いているようなコードです。
再利用可能なコードとは以下のようなコードになります。
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//---- 1の部分 ------
UserNameView(name: user.name),
//---------------
//---- 余白 ------
const SizedBox(
height: 16,
),
//---------------
//---- 2の部分 ------
UserDetailsView(user: user),
//---------------
],
),
)
べた書きで長々と書いていた部分を別Widgetに切り出しました。
別Widgetに切り出す単位は、デザインによって変わると思います。
個人的な指標としては、デジタル庁が出しているデザインシステムのコンポーネント、テンプレート単位が良いと思ってます。
今回の実装では、横向きのデザインを下記のようにしました。
縦向きの場合は1と2を縦並び、横向きの場合は1と2を横並びにするデザインなので、UserNameViewとUserDetailsViewという単位で再利用可能なWidgetとして切り出しています。
そうすることで以下のように縦向きと横向きの実装が、Widgetを配置調整するだけで可能になります。
OrientationBuilder(
builder: (context, orientation) {
return orientation == Orientation.portrait
// 縦向きは縦ならべ
? Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
UserNameView(name: user.name),
const SizedBox(
height: 16,
),
UserDetailsView(user: user),
],
),
)
// 横向きは横並べ
: Row(
children: [
Expanded(
flex: 4,
child: Align(
alignment: Alignment.centerRight,
child: UserNameView(
name: user.name,
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 32.0
),
child: UserDetailsView(user: user),
),
),
],
);
},
),
場合によっては、横向きと縦向きで別のWidgetを使わないとだめな場合もあると思いますが、開発速度と工数を減らすことを目的とすると、縦横で同じWidgetとなるようにデザイン段階から考えて、調整することが良いのではないかと思います。
device_previewを使う
device_previewを使うと、さまざまなデバイス上の表示を簡単に確認できるみたいです。
以下の記事を見ていただくとわかりやすいかと思います。
おわりに
実装にあたっては下記の記事を参考にしました。
画面回転だけではなく、レスポンシブ対応についてもわかりやすい良記事でした。
また上記の記事の中で、Tabletとスマートフォンをどうやって区別したらいいかということに言及していて、iOSとAndroidで指標になりそうなデータを見つけたので共有させていただきます。
Androidのデバイスごとのサイズ
上記の記事内の引用
他の最小幅の値と、一般的な画面サイズの対応を次に示します。
320dp: 通常のスマートフォンの画面（240x320 ldpi、320x480 mdpi、480x800 hdpi など）。
480dp: 5 インチ未満の大画面スマートフォン（480x800 mdpi）。
600dp: 7 インチ タブレット（600x1024 mdpi）。
720dp: 10 インチ タブレット（720x1280 mdpi、800x1280 mdpi など）。