🦋

Flutter Responsiveやってみた

2024/09/16に公開

私はiPadが大好きだが、世の中的には、やっぱりスマホ

そもそも私がこの世界に足を踏み入れたのは、
「iPad用の、自分がほしいアプリを、自分でつくる」が動機だった。
なので基本的にiPadの、それも横位置のアプリをつくるのが好きだ。
Flutterだから、そのままWebアプリにしても、横位置の画面がしっくりくる。
一方、すっかり老眼なので「スマホの画面は小さすぎ!」

とはいっても、老眼なんかじゃない若者は、みんなスマホなのだ。
iPad持ってる人はそんなに多くないらしい。
Flutter大学のみんなが応援Downloadしてくれても、
iPad型デザインが禍して、スマホではぐずぐすだ。
しかも、「Androidのタブレットはサイズがまちまちだから」といって、
せっかくFlutterなのに、Androidのリリースを渋った。
でも、世の中、Androidユーザーが多いのだ!

いい加減、わがまま言ってないで、スマホ対応しよう

ということで、新作『四次元年表 in Cosmos』をスマホ用に修正してみる。
まず横位置をやめる。
微調整だけで何とかなるページもある。
どうしてもダメなのは、Rowを多用しているページだ。
Rowをやめて、ひたすらColumnでスクロールしていく。
いいじゃない、これで何とかなる。
と思って、さて、SimulatorをiPadに戻すと、うーーーーーん、やっぱ、イヤ!。

問題なのは一つのページだけなので

よし、ここでResponsiveとやらに挑戦しよう。
文字の大きさ、とかではなくて、レイアウト自体を変えたい。
1ページだけなんだから、できるだけシンプルに導入したい。
参考にしたのはこちらの記事。
https://4qualia.co.jp/technology/solution_business/flutter/20230706103208.html
今まで見たいろんな記事の中で、私には一番分かりやすかった。
でも、これよりももっとシンプルにしましたよ。

手順

まず、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、はじめます。

以下はまだ、スマホグズグズバージョンですが、よろしかったらご覧ください。
https://apps.apple.com/jp/app/chronomap-in-cosmos/id6642644551

Flutter大学

Discussion