書籍情報保管アプリ 『はじめに』

‎liTrail : #Tagコメントつき読書記録

(2024/9/1 追記）アメリカでも公開できるように名前を修正しております。（リンクも貼りかえました）

（2,024.５.５追記）ついに公開できました！

アプリの概要

書籍メモアプリを作ろうとしています。参考にしたサイト。

書籍メモアプリ「PickBook」をFlutterでリリースした【個人開発】 - Qiita

[Flutter]2022年に作ってきた開発物の紹介！ - Qiita

最初は、１つ目の「PickBook」を参考にしようかと思っていたのですが、Barcodeモジュールのインストールで、google関係がうまくいかず（詳細は割愛）、ISBNをOpenBDから引用する２つ目のサイトを参考にしました。

BarCodeスキャナーの導入

Scannerの選択

最初は下記のスキャナーを導入しようとするが、色々エラーが発生。

flutter_barcode_scanner | Flutter Package

Google Play関係の設定との情報も見つけたのですが、最終的に断念。確かにLikeの数も多いのですが、最終更新が2年前というのが少し気になってやめました。

Android：ML Kitのテキスト認識に失敗する問題と対処法

最終的に導入したのはこちら。 mobile_scanner。問題なく導入完了。（もしかしたら、Firebase導入のところに記載のSDKバージョンの修正をしていたかも）

mobile_scanner | Flutter Package

Android simulatorのカメラ

最初よくわからなかった。。
キッチンの奥のリビングの「壁」と「テーブル」にバーチャル画像が投影されるのね。ちょっと昔のファミコンのよう。

Android emulator camera custom image

ページ間の変数受け渡し

Scannerが別ページでの呼び出しとなった（mobile_scannerのexampleから借用した）ため、読み込んだISBNを元のページに渡す処理を作成する。

以下を参考に「戻る」ボタンを作成。

【Flutter】AppBarの戻るアイコン（leading）をカスタマイズしてみる - Qiita

      appBar: AppBar(
          title: const Text('Scanning ISBN code'),
          leadingWidth: 85, //leadingWidthを設定する
          leading: TextButton(
            child: const Text('Back'),
            onPressed: () => Navigator.pop(context, barcode),
          ))

  Future<void> _navigateAndDsplayBarcodeScan(BuildContext context) async {
    final result = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => const BarcodeScannerWithScanWindow(),
        ));
    setState(() {
      _isbn = result.displayValue;
    });
  }

Firestoreの導入

主に参考にしたサイトは以下です。

FlutterでFirestoreからデータ取得するまで - Qiita

エラー対処

途中途中で、色々エラーが発生した。基本はSDKやら何やらのバージョンの指定の問題。

Flutter3.10.0での新規プロジェクトにFirebaseを導入した際、Android向けビルドでエラーが出る現象の解決方法

[Flutter]FlutterでAndroidのcompileSdkVersion,targetSdkVersion,minSdkVersionを変更する方法 - Qiita

[Flutter/Android]compileSdkVersionを「31」にする場合の注意点（Apps targeting Android 12 and higher are required to specify an explicit value for `android:exported`・・の対処法） – みんプロ式 – 初心者専門Flutterでスマホアプリプログラミング講座

少し前のFlutterでは下記のように直接Projectのファイルに書き込みしていたみたい。

How can I resolve the error "The minCompileSdk (31) specified in a dependency's AAR metadata" in native Java or Kotlin?

【Flutter】cloud_firestoreで『非推奨のAPIを使用またはオーバーライドしています』の注意が出た時の対処法

Flutter : How to change Android minSdkVersion in Flutter Project?

どうやら最近（３？）のFlutterでは、miniSDKversionやらの変数に格納されている。
下記のフォルダの flutter.groovy ファイルのバージョンの数値を変更して動いた。

./flutter/packages/flutter_tools/gradle/src/main/groovy

class FlutterExtension {
    /** Sets the compileSdkVersion used by default in Flutter app projects. */
    static int compileSdkVersion = 34

    /** Sets the minSdkVersion used by default in Flutter app projects. */
    static int minSdkVersion = 24 * <== ここ

    /**
     * Sets the targetSdkVersion used by default in Flutter app projects.
     * targetSdkVersion should always be the latest available stable version.
     *
     * See https://developer.android.com/guide/topics/manifest/uses-sdk-element.
     */
    static int targetSdkVersion = 34

    /**
     * Sets the ndkVersion used by default in Flutter app projects.
     * Chosen as default version of the AGP version below as found in
     * https://developer.android.com/studio/projects/install-ndk#default-ndk-per-agp.
     */
    static String ndkVersion = "25.1.8937393" * <== ここ

下記に記載の細かなエラーも修正。

現時点の見た目

ひとまず、Android simulatorで下記の動作まで確認。

これからやりたいこと

• ログイン画面

• 本一覧表示

• ライセンス関係表示

• 書評保存

• UI/UXの修正

次の記事