私はiPadが大好きだが、世の中的には、やっぱりスマホ
そもそも私がこの世界に足を踏み入れたのは、
「iPad用の、自分がほしいアプリを、自分でつくる」が動機だった。
なので基本的にiPadの、それも横位置のアプリをつくるのが好きだ。
Flutterだから、そのままWebアプリにしても、横位置の画面がしっくりくる。
一方、すっかり老眼なので「スマホの画面は小さすぎ！」
とはいっても、老眼なんかじゃない若者は、みんなスマホなのだ。
iPad持ってる人はそんなに多くないらしい。
Flutter大学のみんなが応援Downloadしてくれても、
iPad型デザインが禍して、スマホではぐずぐすだ。
しかも、「Androidのタブレットはサイズがまちまちだから」といって、
せっかくFlutterなのに、Androidのリリースを渋った。
でも、世の中、Androidユーザーが多いのだ！
いい加減、わがまま言ってないで、スマホ対応しよう
ということで、新作『四次元年表 in Cosmos』をスマホ用に修正してみる。
まず横位置をやめる。
微調整だけで何とかなるページもある。
どうしてもダメなのは、Rowを多用しているページだ。
Rowをやめて、ひたすらColumnでスクロールしていく。
いいじゃない、これで何とかなる。
と思って、さて、SimulatorをiPadに戻すと、うーーーーーん、やっぱ、イヤ！。
問題なのは一つのページだけなので
よし、ここでResponsiveとやらに挑戦しよう。
文字の大きさ、とかではなくて、レイアウト自体を変えたい。
１ページだけなんだから、できるだけシンプルに導入したい。
参考にしたのはこちらの記事。
今まで見たいろんな記事の中で、私には一番分かりやすかった。
でも、これよりももっとシンプルにしましたよ。
手順
まず、PageとModel一組だったところに、phone_bodyとtablet_bodyを加える。
lib/
add_events/
principal_model.dart
principal_page.dart <-- Main page where layout switching is added
phone_body.dart <-- Phone-specific layout
tablet_body.dart <-- Tablet-specific layout
layoutのswitchはこんな感じ。
import 'package:flutter/material.dart';
import 'phone_body.dart';
import 'tablet_body.dart';
class PrincipalPage extends StatelessWidget {
const PrincipalPage({super.key});
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth > 600) { <= 切り替えはたったこれだけ
return const TabletBody(); // Load tablet layout
} else {
return const PhoneBody(); // Load phone layout
}
},
);
}
}
tablet_bodyは、もともとprincipal_pageだったファイルの名前変えただけ。
phone_bodyは、RowやめてColumnにしたバージョンの名前変えただけ。
Modelの読み込みが被ってるのがちょっと気になるが、今回はこれで良しとする。
やだ、かんたんじゃん。
スマホとタブレットで切り替わるだけじゃなく、
Webでrunして、画面サイズを動かすと、600で切り替わる。
つまり、すでに公開しているウェブ版にこれを導入すれば、
スマホでWebを見る人にも使えるのかな？
（よくわからないので、後で実験しよう）
ということで、Android申請と、iOSUpgrade、はじめます。
以下はまだ、スマホグズグズバージョンですが、よろしかったらご覧ください。
Discussion