Flutter 開発環境を構築する
動機
ある日突然意味不明な創作意欲に満ちあふれてしまうことが、エンジニアなら一度はあるのではないでしょうか?そんなわけで iOS/Android 向けのモバイルアプリケーションを開発したくなったので、クロスプラットフォームな開発フレームワークの選定を始めました。私自身はお仕事で毎日 C# を書いているので、.NET MAUI を使うか非常に迷いました。がしかし、何となく世の中が「ふらったー、ふらったー」と言っているのをここ1, 2年くらい?観測していたのでとりあえず使ってみるかとなったわけです。
手順
基本的には Flutter の公式ドキュメントに沿って作業しました。
Flutter SDK
インストール
ダウンロード
公式サイトから下記のディレクトリにダウンロード。
$ ~/src/.
解凍
$ cd ~/src
$ unzip
WSL 上で作業していたのでしれっとunzip
使っちゃってますが、例えば PowerShell だとExpand-Archive
使えば解凍できるみたいです。
パスの更新
デスクトップのフッター小窓にenv
と入力してシステム環境変数の編集
を開く。
詳細設定
タブの環境変数(N)...
ボタンを押す。
Path
変数の値の末尾に flutter/bin
までのパス追加する。
インストール出来たか確認する。
$ where.exe flutter dart
Flutter も Dart もしっかりインストール出来てそうですね。
Android のセットアップ
Android Studio インストール
公式サイトから Android 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)をダウンロードする
インストーラーを利用して 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 デバッグモードを有効にする。
Google USB Driver をインストールする。
デバイスをコンピュータに接続する。
Windows 機が Android 端末を認識しない場合は下記を試してみてください。
私の場合はこれで PC が GooglePixel6a を認識するようになりました。
ターミナルで下記のコマンドを入力して flutter が Android デバイスを認識しているかどうかも確認してください。
$ flutter devices
Android ライセンスに同意する
ターミナルで下記のコマンドを入力して、Android ライセンスに同意してください。
$flutter doctor --android-licenses
MSC++BuildTools のインストール
下記の URL から BuildTools をインストールしてください。
flutter doctor を実行する
ターミナルで下記のコマンドを実行してください。
$ flutter doctor
問題なければ下記のように緑色になります。
IntelliJ のセットアップをする
JetBrains 信者なので、IntelliJ で開発できるように設定していきます。
IntelliJ を開いて、Settings の Plugins から Flutter をインストールしてください。
下記画像のように、New Project を選択して
Flutter 選択後に、flutterSDK までのパスを入力して Next を押してください。
Window が出てくるので、必要な項目を入力して Create してください。
実行
では、出来上がったテストプロジェクトを実行してみましょう。
緑△の実行ボタンを押す。
接続してある Android 端末上に Demo が表示されれば成功です!!
Discussion