KC Blog

Flutterとは？

5 min read
CrossPlatform#flutter

Flutterとは？

  • Flutter は Google が開発した クロスプラットフォーム UI フレームワークで、Android、iOS、Web、Windows、macOS、Linux アプリケーションを構築するために使用されます。

🛠 環境のインストール

0. (macOSのみ) homebrewを使ってインストールできます。まだない場合は、以下のコマンドでhomebrewをインストールします：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

そしてhomebrewを使ってfvmをインストールします

brew tap leoafarias/fvm
brew install fvm

他のプラットフォームでもfvmをインストールできます 興味がある方は直接ドキュメントを確認してください

1. 公式サイトからFlutter SDKをダウンロードするか、前のステップで紹介したfvmを使ってインストールします

a. (mac/windows)上のリンクから、公式提供のバージョンをダウンロード

flutter

b. またはfvmを使ってダウンロード

fvm install stable  # 最新の安定版をインストール

そしてデフォルトのFlutterバージョンをglobalに設定します

fvm global stable

2. 環境変数にFlutterを設定する

(windows)環境変数に以下のパスを設定します（手動ダウンロードの場合は、対応するbinパスに置き換えます）

$HOME/fvm/default/bin

(macos)はターミナル設定で設定します、 例えば一般的な.zshrcの場合：

open ~/.zshrc

そして.zshrcに以下を追加します

export PATH=$PATH:"$HOME/fvm/default/bin"

3. flutter doctorを使って現在の環境に何が不足しているかを確認し、必要なものをインストールします

  • android、macos、iosをビルドする場合は、Android StudioとXcodeをダウンロードする必要があります

  • すべてインストールしていても、Android ToolやiOS CocoapPdsのインストールが不完全でエラーが発生する可能性があります

    flutter

  • 私の場合、3つの問題に遭遇しました

    • cmdline-toolsが見つからない

      flutter

      • Android toolのsdkManagerを使ってインストールします。sdkManagerのパスがわかっているか環境変数に設定されている場合は、直接コマンドでcmdline-toolsをインストールします

        $ANDROID_SDK_ROOT/tools/bin/sdkmanager --install "cmdline-tools;latest"

      • ここでJavaバージョンの互換性問題が発生する可能性があります。発生した場合はローカルのJavaバージョンを切り替えます。私の場合はJavaを8に戻すと正常になりました

        flutter

    • CocoaPodsの互換性がない：

      flutter
      • sudo gem install cocoapodsコマンドを使って最新版をインストールできます

    • Androidライセンスに同意していない：

      flutter

      以下のコマンドで同意できます

       flutter doctor --android-licenses

  • 再度flutter doctorを実行して成功したかどうかを確認します。成功すればFlutterの開発またはコンパイルが可能になります

    flutter

ターゲットデバイスで直接実行する

  • Flutterプロジェクトのルートディレクトリに移動します

    flutter

  • 直接実行すると、不足しているリソースやツールがダウンロードされ、その後実行したいターゲットプラットフォームを選択するよう求められます

    flutter run
    flutter

macOS用のdmgファイルをビルドする

  • Flutterプロジェクトのルートディレクトリに移動します

    flutter

  • macOS向けのコンパイルが有効になっていることを確認します

    flutter config --enable-macos-desktop

  • 特定のプラットフォーム向けにビルドします。以下の例はmacOS向けです

    flutter build macos
    • ビルド完了後、xxx.appが生成されます
flutter

  • 上記で生成されたxxx.appはまだアプリケーションにすぎません。.dmgが必要な場合は、さらにパッケージ化する必要があります

    • プラグインcreate-dmgを使用する必要があるので、npmでインストールします 
      npm install -g create-dmg
    • 先ほどビルドしたxxx.appをパッケージ化します：
      • --dmg-title：ディスク上のインストールパッケージの名前を設定できます
flutter 
```
create-dmg build/macos/Build/Products/Release/xxx.app --dmg-title="アプリケーション名" --overwrite
```

IDEを使用してプロジェクトを実行する (Cursor/vscode)