🐶

Flutter 開発環境を構築する

2023/06/27に公開

動機

ある日突然意味不明な創作意欲に満ちあふれてしまうことが、エンジニアなら一度はあるのではないでしょうか?そんなわけで iOS/Android 向けのモバイルアプリケーションを開発したくなったので、クロスプラットフォームな開発フレームワークの選定を始めました。私自身はお仕事で毎日 C# を書いているので、.NET MAUI を使うか非常に迷いました。がしかし、何となく世の中が「ふらったー、ふらったー」と言っているのをここ1, 2年くらい?観測していたのでとりあえず使ってみるかとなったわけです。

手順

基本的には Flutter の公式ドキュメントに沿って作業しました。
https://docs.flutter.dev/get-started/install/windows

Flutter SDK

インストール

ダウンロード

公式サイトから下記のディレクトリにダウンロード。

$ ~/src/.
解凍
$ cd ~/src
$ unzip 

WSL 上で作業していたのでしれっとunzip使っちゃってますが、例えば PowerShell だとExpand-Archive使えば解凍できるみたいです。
https://learn.microsoft.com/ja-jp/powershell/module/microsoft.powershell.archive/expand-archive?view=powershell-7.3

パスの更新

デスクトップのフッター小窓にenvと入力してシステム環境変数の編集を開く。

詳細設定タブの環境変数(N)...ボタンを押す。

Path変数の値の末尾に flutter/bin までのパス追加する。

インストール出来たか確認する。

$ where.exe flutter dart


Flutter も Dart もしっかりインストール出来てそうですね。

Android のセットアップ

Android Studio インストール

公式サイトから Android Studio のインストーラーをダウンロードしてインストールをする。
https://developer.android.com/studio

JDK のインストール

Android Studio を起動しようとすると下記のようなエラーが出ました。

No JVM installation found. Please install a 64-bit JDK.
If you already have a JDK installed, define a JAVA_HOME variable in Computer
> System Properties > System Settings > Environment Variables.

公式サイトからJDK 20のインストーラー(x64 Installer)をダウンロードする
https://www.oracle.com/java/technologies/downloads/#jdk20-windows

インストーラーを利用して JDK をインストールする。

JAVA_HOME の設定

先ほど flutterSDK にパスを通した時と同じように、
デスクトップのフッター小窓にenvと入力してシステム環境変数の編集を開く。

詳細設定タブの環境変数(N)...ボタンを押す。

JAVA_HOMEを追加して JDK までのパスを設定する。

これを設定することで Android Studio を開くことが出来るようになります。

Android SDK Command-line Tools をインストール

Android Studio を開くとMore Actionsというプルダウンがあるので開いてSDK Managerを押す。
そして、Android SDK Command-line Toolsというモジュールをインストールする。

Android デバイスのセットアップ

下記 URL を参考にして、
Android 端末の USB デバッグモードを有効にする。
https://developer.android.com/studio/debug/dev-options?hl=ja

Google USB Driver をインストールする。
https://developer.android.com/studio/run/win-usb?hl=ja

デバイスをコンピュータに接続する。
Windows 機が Android 端末を認識しない場合は下記を試してみてください。
https://support.google.com/pixelphone/thread/113153553/pcとのusb接続ができません?hl=ja

私の場合はこれで PC が GooglePixel6a を認識するようになりました。

ターミナルで下記のコマンドを入力して flutter が Android デバイスを認識しているかどうかも確認してください。

$ flutter devices

Android ライセンスに同意する

ターミナルで下記のコマンドを入力して、Android ライセンスに同意してください。

$flutter doctor --android-licenses

MSC++BuildTools のインストール

下記の URL から BuildTools をインストールしてください。
https://visualstudio.microsoft.com/ja/visual-cpp-build-tools/

flutter doctor を実行する

ターミナルで下記のコマンドを実行してください。

$ flutter doctor

問題なければ下記のように緑色になります。

IntelliJ のセットアップをする

JetBrains 信者なので、IntelliJ で開発できるように設定していきます。
IntelliJ を開いて、Settings の Plugins から Flutter をインストールしてください。

下記画像のように、New Project を選択して

Flutter 選択後に、flutterSDK までのパスを入力して Next を押してください。

Window が出てくるので、必要な項目を入力して Create してください。

実行

では、出来上がったテストプロジェクトを実行してみましょう。
緑△の実行ボタンを押す。

接続してある Android 端末上に Demo が表示されれば成功です!!

Discussion