FlutterFlowとAndroidManifest編集で簡単APK作成！初心者向けガイド

  • 投稿日
  • 著者 tsubasatwi( つばさ）
  • カテゴリー FlutterFlow

こんにちは、NoCodeCampのツバサです。

最近のFlutterFlowでは、スマートフォンのハードウェアやセンサーと連携する機能実装する人が増えてきました。
ただ、FlutterFlow自体ではコード編集ができず、そのままでは高度なカスタマイズが難しいという制約があります。
そこで今回は、FlutterFlowからコードをエクスポートし、Flutter環境で編集・APKファイルを作成する方法を解説します。

以下のようなアプリを作りたい場合にほとんどの場合に、権限の編集のためにAndroidManifestというファイルの変更が必要になるケースが多いです。

  1. 歩数計データの取得
    • ヘルスケアやフィットネスアプリでは、歩数データを取得して健康管理に役立てることが一般的です。この機能を実現するには、スマートフォンのセンサーを利用するためのパーミッション設定が必要です。
  2. Bluetooth接続
    • IoTデバイスやウェアラブル機器（スマートウォッチなど）と連携するアプリでは、Bluetoothを使用してデバイス間でデータを送受信する機能が欠かせません。これにはBluetoothの使用宣言や権限の設定が必要になります。

こうした機能を実装するために、FlutterFlowからエクスポートしたコードをFlutter環境で編集し、AndroidManifestファイルやネイティブコードを適切に調整する方法をこのガイドで詳しく解説していきます。

ちなみに、iOSアプリでは、アプリの設定やパーミッション、ランタイムの挙動を定義するファイルとしてInfo.plist（Property List）が使用されます。このファイルは、AndroidでのAndroidManifest.xmlと同等の役割を果たします。

やりたいこと

この記事を読むことで、以下のことができるようになります：

  1. FlutterFlowからコードをダウンロードし、Flutter環境で編集する
    FlutterFlowで生成されたコードをエクスポートして高度なカスタマイズを行えます。
  2. Windows環境でFlutterを使用してAndroid用のAPKファイルを作成する
    初心者でも手順を守れば、問題なくビルド可能です。
  3. AndroidManifest.xmlを編集してセンサーやBluetooth接続機能を実装する
    歩数計やBluetooth接続に必要なネイティブ設定を正しく行えます。
  4. よくあるエラーを特定し、正確に解決する
    実際の開発で遭遇しやすい問題をスムーズに解決できます。

FlutterFlowからコードをダウンロードする方法

FlutterFlowで生成されたアプリのコードを編集するには、以下の手順でコードをダウンロードします：

  1. FlutterFlowプロジェクトを開く
    FlutterFlowにログインし、編集したいプロジェクトを開きます。
  2. コードエクスポート
    プロジェクト画面の右上にある「Code」または「Export Code」ボタンをクリックします。
    ※ この機能は有料プラン（Standardまたはプロプラン）で利用可能です。
  3. ダウンロード
    ダウンロードしたZIPファイルを解凍します。この中にFlutterプロジェクトが含まれています。
  4. Flutter環境で開く
    解凍したフォルダをFlutterがセットアップされた環境（例：Android StudioやVS Code）で開きます。

AndroidManifest.xmlの編集場所

FlutterFlowで生成されたコードには、Androidネイティブの設定ファイルであるAndroidManifest.xmlも含まれています。このファイルを編集することで、センサーやBluetooth接続などのネイティブ機能を有効にできます。

  1. プロジェクト構造を確認
    ダウンロードしたFlutterプロジェクト内で以下のディレクトリを開きます
    android/app/src/main/
  2. AndroidManifest.xmlを見つける
    上記のディレクトリ内にAndroidManifest.xmlファイルがあります。
  3. 編集ツール
    テキストエディタ（VS CodeやAndroid Studio）を使用して編集します。
  4. 注意点
    • 編集前にバックアップを取ることをおすすめします。

AndroidManifest.xmlの編集　（一例です）

それぞれ、必要な権限に基づき以下のAndroidManifest.xmlを追加していきます。今回は、私の場合には、ACTIVITY_RECOGNITIONの権限が必要だった為、歩数系データの取得コードを入れました。それぞれここは、必要なコードはFlutterのパッケージなどによって異なります。

歩数計データの取得

xmlコードをコピーする<uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />
<uses-permission android:name="android.permission.BODY_SENSORS" />

Bluetooth接続

xmlコードをコピーする<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-permission android:name="android.permission.BLUETOOTH_SCAN" />
<uses-permission android:name="android.permission.BLUETOOTH_CONNECT" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

手順1: 必要なソフトウェアのインストール

1. Android Studioのインストール

  1. 公式サイト（Android Studio公式サイト）から最新バージョンをダウンロードします。
  2. インストール中に「Android SDK」が含まれることを確認してください。
  3. インストール後、Android Studioを起動し、「SDK Manager」で以下をインストールします：
    • Android SDK Platform
  4. 設定が完了したら、適用をクリックして閉じます。

2. Gradleのインストール

概要

最新のAndroid StudioではGradleが自動的に管理されますが、今回手動でダウンロードしました。
現在Gradleの最新版は8ですが、GradleのバージョンとJavaのバージョンが一致していないためエラーが発生するケースがあります。
Flutterプロジェクトでは通常Java 11が推奨されていますが、Gradle 8はJava 17以上を必要とするため、Gradle 8ではFlutterプロジェクトが正常にビルドできませんでした。そのため、今回はGradle 7.6.2を手動でダウンロードしました。

手順1: ダウンロードしたZIPファイルを解凍する

  1. Gradle公式サイトからダウンロードしたZIPファイルを右クリックして「すべて展開」を選択します。
  2. 解凍先を選択します。たとえば、C:\Gradleフォルダに解凍すると分かりやすいです。
    解凍後、以下のような構造になります：

<pre><code> C:\Gradle\gradle-7.6.2\ ├── bin\ ├── lib\ ├── docs\ └── init.d\ </code></pre>

手順2: GradleのbinフォルダをPath環境変数に追加する

  1. スタートメニューを開く
    • Windowsの「スタート」ボタンをクリックし、検索バーに「環境変数」と入力します。
    • 「環境変数を編集」と表示されるオプションをクリックします。
  2. 環境変数ダイアログを開く
    • システムプロパティの「詳細設定」タブに移動します。
    • 「環境変数」をクリックします。
  3. Path変数を編集する
    • 「システム環境変数」セクションの中から「Path」を探します。
    • 「編集」ボタンをクリックします。
  4. 新しいPathを追加する
    • 「新規」ボタンをクリックし、Gradleのbinフォルダのパスを追加します：
      例：C:\Gradle\gradle-7.6.2\bin
    • 入力後、「OK」をクリックしてダイアログを閉じます。

手順3: 設定が正しいか確認する

  1. Windows PowerShellを開く
    • Windowsの「スタート」ボタンをクリックし、「PowerShell」と検索します。
    • 「Windows PowerShell」をクリックして開きます。
  2. Gradleのバージョン確認コマンドを実行する
  3. 実行結果を確認 正常に設定されていれば、以下のような結果が表示されます：

gradle -v　と入れる

補足: よくある問題と解決方法

  1. gradle -vが認識されない場合
    • 環境変数の設定が間違っている可能性があります。Path変数に正しいbinフォルダのパスを追加したか再確認してください。
  2. コマンドプロンプトを再起動
    • 環境変数の設定後、コマンドプロンプトを再起動しないと変更が反映されない場合があります。一度閉じて再度開いてください。
  3. 複数のGradleバージョンが存在する場合
    • 古いGradleが優先される可能性があります。環境変数のPathに設定した順番を確認し、最新のGradleのパスが最優先になるよう調整してください。

3. Java 11のインストール

手順1: Java 11をダウンロードする

  1. Oracle公式サイトにアクセスします：
    Java 11ダウンロードページ
  2. Java 11のバージョンを選択する
    • ページ内で「Java SE Development Kit 11」を探します。
    • Windows用のインストーラーを選択します（例：Windows x64 Installer）。
    • 「ダウンロード」をクリックします。
  3. ライセンス契約に同意する
    • ダウンロードボタンをクリックする前に、「I reviewed and accept the Oracle Technology Network License Agreement」をチェックします。
    • ダウンロードが開始されます。

手順2: Java 11をインストールする

  1. インストーラーを実行
    • ダウンロードしたインストーラー（例：jdk-11.x.x_windows-x64_bin.exe）をダブルクリックして実行します。
  2. インストール先を選択
    • 初期設定では、JavaはC:\Program Files\Java\jdk-11.x.xにインストールされます。
    • カスタムインストールを選びたい場合は、適切なフォルダを指定してください。
  3. インストールを開始
    • 「次へ」をクリックしてインストールを進め、完了したら「閉じる」をクリックします。

手順3: 環境変数JAVA_HOMEを設定する

  1. 環境変数ダイアログを開く
    • Windowsの「スタート」ボタンをクリックし、「環境変数」と検索します。
    • 「環境変数を編集」をクリックします。
  2. システム環境変数にJAVA_HOMEを追加
    • 「システム環境変数」セクションの「新規」をクリックします。
    • 以下の情報を入力します：
      • 変数名: JAVA_HOME
      • 変数値: Javaがインストールされたフォルダのパス
        例：C:\Program Files\Java\jdk-11.x.x
  3. Path環境変数に設定を追加
    • 「Path」を選択して「編集」をクリックします。
    • 「新規」をクリックし、以下を入力します：
  • 入力後、「OK」をクリックして設定を保存します。

手順4: インストール確認

  1. Windows PowerShellを開く
    • Windowsの「スタート」ボタンをクリックし、「PowerShell」と検索します。
    • 「Windows PowerShell」をクリックして開きます。
  2. Javaのバージョンを確認する
    java -version
  3. 実行結果を確認 正常に設定されていれば、以下のような結果が表示されます：

補足: よくある問題と解決方法

  1. javaが認識されない場合
    • 環境変数JAVA_HOMEやPathの設定が間違っている可能性があります。
    • 再度設定を確認してください。
  2. コマンドプロンプトを再起動
    • 環境変数の設定後、コマンドプロンプトを再起動しないと変更が反映されない場合があります。
  3. 複数のJavaバージョンがインストールされている場合
    • 古いJavaが優先されている可能性があります。JAVA_HOMEとPathの設定順序を確認し、使用したいバージョンが優先されるように調整してください。

手順2: APKファイルを作成する

1. Flutterコマンドでビルドを実行

  1. Windows PowerShellを起動し、
    Flutterプロジェクトのルートディレクトリに移動します。
  2. 以下のコマンドを実行します：cssコードをコピーするflutter build apk --debug このコマンドでデバッグ用のAPKファイルが生成されます

2. よくあるエラーと解決方法

  • エラー例: Unsupported class file major version 65
    • 原因: GradleとJavaのバージョンが一致していない場合に発生します。
      私の場合、なぜかJava 21が実行されていました。
  • 解決方法:
    1. android/gradle.propertiesファイルに以下を追加して、GradleがJava 11を使用するよう明示的に指定しました：org.gradle.java.home=C:/Program Files/Java/jdk-11
    1. Android Studioで以下を設定：
      • File > Settings > Build, Execution, Deployment > Gradle
      • Gradle JDKを「Java 11」に設定します。
    この手順でエラーが解消し、正常にビルドが完了しました。

    あらためて
    flutter pub get
    flutter build apk –debug　とし
  • 以下の表記ができたら完了です。
✓ Built build\app\outputs\flutter-apk\app-debug.apk

\app\outputs\flutter-apk\app-debug.apk 　配下にAPKファイルがあるはずです

まとめ

この記事では、FlutterFlowからコードをエクスポートし、Flutterで編集・APKファイルを作成する方法を解説しました。また、AndroidManifest.xmlの設定をカスタマイズして、手順を詳しく説明しました。

ここから、FlutterFlowのカスタムウィジェットを使えば、以下のようなアプリも実装できるはずです。
応用例

  • フィットネスアプリ: 歩数計や心拍数モニタリング機能を統合。
  • IoTデバイス連携: スマートウォッチやBluetooth対応デバイスとの通信。
  • ヘルスケアアプリ: 健康データを収集・分析してユーザーにフィードバックを提供。

様々なウィジェットの組み合わせで、さらに高度なアプリを開発してみてください！

AndroidManifest編集 APK作成 Bluetooth設定 FlutterFlow Flutterカスタマイズ Flutter開発 Gradleインストール IoTアプリ開発 Java環境設定 NoCode開発 センサー機能 プログラミング初心者 初心者ガイド 歩数計アプリ

この記事を書いた人

tsubasatwi( つばさ）

国立工業高専卒業（新居浜工業高等専門学校）
「イベント×IT×営業」のカスタマーサクセスマネージャーとして活躍。セールス→構築管理運用まで全体プロジェクト管理の豊富な経験あり。

・主にITに関するイベント集客/法人営業/開発を担当
・大手通信会社を中心にエンタープライズのIT導入を担当（B2B）

DMMで日本初の NoCodeサロン を運営
「NoCodeCamp プログラミングを使わないIT開発 」
https://lounge.dmm.com/detail/2549/

記事一覧