🏄

Flutter & ChatGPT モバイルアプリ開発(5)

2024/03/03に公開

Android

実機での実行

しばらくFlutter版は放置状態でしたが、すっかり忘れてしまいそうなので少し手を入れていきたいと思います。

そういえば実機で実行したことがなかったな、どうせならapkでもビルドしてみるかと思ったら下記のエラー。
Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.8.0, expected version is 1.6.0.
一応ビルドは完了します。
✓ Built build/app/outputs/flutter-apk/app-release.apk (18.9MB).
インストールして実行してみると、最初の画面でタイトルだけ出て残りは空白のまま。ChatGPTに質問すると、

buildscript {
    ext.kotlin_version = '1.8.0'
}

に書き換えてSync Project with Gradle Filesボタンを押せ、とのこと。そんなボタンどこにも見当たりませんが？これ、はまりました。Android Studioのバージョンの違いなのでしょうか。どうやったらSyncできるのかまったくわからず。

なんとなくFileメニューのOpenからandroid/build.gradleを別のウィンドウで開いたところ、

ようやく象のボタンが見つかりました。

実はよく見ると元のウィンドウにOpen for Editing in Android Studioというリンクがあるのですが、これを押しても一瞬別のウィンドウが表示されるだけで編集することはできません。というか実は一度だけウィンドウが普通に開いて編集できたのですが、そのときは象のボタンには気づくことができませんでした。バグなのでしょうかね。

とにかくKotlinのバージョンを上げてcompiled with an incompatible version of Kotlinのエラーを消すことはできました。しかし、やはり最初の画面でタイトルだけ表示してカテゴリ一覧が表示されません。実機だけではなくAndroidエミュレータでも同様です。

このあたりはリリース版を作ってストアに出すような経験があればなんてことないのでしょうね。Release版ではインターネットへの接続許可を与えろとのことです。

android/app/src/main/AndroidManifest.xml

<uses-permission android:name="android.permission.INTERNET"/>

実機での表示

エミュレータでは問題ないものの、実機ではこのようにカテゴリ名が切れてしまっています。

実機で実行すると画像のようにカテゴリ名の文字の下側が1/3ほど切れて表示されていません。次の画面の板一覧画面での板名でも同様にうまく表示されません。修正してください。
エミュレータでは問題なく、実機のみで問題があることを念頭に修正案を提示してください。単純にセルの高さを調整したり、フォントサイズを小さくしたのでは見づらくなってしまいます。エミュレータでの表示には影響を与えず、実機のみで修正されるようにしてください。
実機の解像度は2,312×1,080のようです。この情報は何か改善につながりますか？
_categories[index].categoryNameがカテゴリ名です。現在のソースコードに解像度による調整を組み込んでください。
セル内のテキストの表示位置が下に下り、前よりもさらに文字の下の部分が切れてしまいました。調整方法が間違っていませんか？
パディングを0にしてみたところ文字の下の部分が切れず、垂直方向にセンタリングされて正しく表示されました。ただし左寄せになってパディングがないためグリッド線にくっついてしまっています。上下のパディングは0とし、左右のパディングを16px程度として、文字列が長い場合は後ろを省略するというのはどうでしょうか？
セルの高さを20%増しにしてください。
カテゴリ一覧と板一覧のフォントサイズを大きくするには、どこを修正すればよいでしょうか？
中華フォントでの表示を日本語フォントでの表示に修正してください。
実機やエミュレータの中にもともと存在する日本語フォントを使用することはできないのでしょうか？

localizationsDelegatesを指定しただけでは、エミュレータでは上手く表示されるもののAndroid実機では中華フォントのままだったのでNotoSansJPを導入することにしました。

// main.dart
  Widget build(BuildContext context) {
    const locale = Locale("ja", "JP");
    return MaterialApp(
      title: 'SurfBrett',
      theme: ThemeData(
        fontFamily: 'NotoSansJP', // ここに日本語フォントファミリーを指定
      ),
      locale: locale,
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        locale,
      ],
      home: const JsonFetchPage(),
    );
  }

# pubspec.yaml
dependencies:
  flutter_localizations:
    sdk: flutter
  ...
flutter:
  fonts:
    - family: NotoSansJP
      fonts:
        - asset: fonts/NotoSansJP-Regular.ttf
  ...

日本語フォントで表示されて良い感じになりましたね。

ここまでのソースコードです。

実機での実行

実機での表示

Discussion