おじさんがFlutterで0から開発していく #1 Windows環境構築（デモアプリを起動まで）

環境構築

はじめに

Windowsのみしか持っていないため、Windowsでの環境構築になります。

PC構成

・OS　Windows11 Home
・CPU　AMD　Ryzen7 7800X3D
・メモリ　32GB
・SSD　2TB

pcを自作したときにプログラミングにRyzen(しかもゲーム用の)CPUでいいかな？と思いながら自作しましたが、半年使用して困ったことはありません。

では環境構築

ドキュメントは以下を参考にし進めます。

ここにこう書かれていました。

ここに書かれた手順通りにやれよとやらなきゃエラーが起こってもしらないよと。
だとしたらわかりづれーよ。上に手順もってこいよ。

Gitのインストールが書かれていますが、おそらく開発では使いません。
後からでも問題ないかとおもうので早速読み飛ばしました。

IDEのインストール

FlutterチームではVSCodeでの開発をおすすめしているようです。

がAndroidStadioがすでにPCに入っているのでそちらアップデートして先に進みます。
※無知で後でちょっと焦ります。

Flutter SDKのインストール

VSCodeとその他の方法が書かれています。
今回AndroidStadioを使用したいので以下を選択します。

ダウンロードしたzipを任意の場所に展開

powershellを使い以下のコマンドを実行

Expand-Archive -Path "【ダウンロードされた場所のファイルパス】\flutter_windows_3.22.2-stable.zip" -DestinationPath "【展開先のファイルパス】\fluttersrc"

公式ではdevになってましたが,fluttersrcにしました。

Pathを更新する

後続の処理でPowerShellを使いFlutterコマンドを実行するために、FlutterをPATH環境変数に追加します。

環境変数の追加方法

1. システム環境変数の設定を開く:

   • Windowsの検索バーに「環境変数」と入力し、「システム環境変数の編集」を選択します。

2. 環境変数の編集:

   • 「システムプロパティ」ウィンドウが開いたら、右下の「環境変数」ボタンをクリックします。

3. PATH変数の編集:

   • 「システム環境変数」セクションの中から「Path」を探し、選択して「編集」ボタンをクリックします。

4. 新しいパスを追加:

   • 「新規」ボタンをクリックし、Flutter SDKのパス（例：【展開先のファイルパス】\fluttersrc\bin）を入力します。
   • 入力したら「OK」をクリックして、すべてのウィンドウを閉じます。

5. PowerShellを再起動:

   • 環境変数を更新するために、現在開いているPowerShellウィンドウを閉じて再起動します。

Flutter doctorを実行する

Flutterのコンポーネントが入っている正常にインストールされているか検証します。

PowerShellで以下を実行

PS C:\> flutter doctor

結果がこちら

1. Android toolchain - develop for Android devices (Android SDK version 34.0.0):
   →　Android開発では必須の設定です。AndoroidStadioを使用しますので後ほど
2. Visual Studio
   →　使いませんし、入れていないので無視
3. Android Studio (version 2022.3)
   →　 ？？？？なんで

ここがよくなかったです

原因は古いバージョンのAndroidStadioを削除せずに、アップデートしたことが原因でした。
※古いバージョンと新しいバージョンの共存をしたままでやりたい、後述の問題が解決できる場合は無視していいかと思いますが、私はショートカットからAndroidStadioが起動できなくったため、一度AndroidStadioをアンインストールし、入れなおしました。

Android toolchain

公式ドキュメント

これらのツールがはいっていなければいけないようです。
Andoroid Stadioの初期インストール時にはAndroid SDK Command-line Toolsが有効になっていないので先ほど「！」がついています。

• Android SDK Platform, API 34.0.5
• Android SDK Command-line Tools
• Android SDK Build-Tools
• Android SDK Platform-Tools
• Android Emulator

1. プロジェクト選択画面から「その他のアクション」-「SDK Manager」を選択
   
2. 「言語＆フレームワーク」-「Android SDK」-「SDK Tools」タブを開き、「Android SDK Command-line tool」を選択し、適用
   
3. flutter doctor --android-licensesをPowerShellで実行

flutter doctor --android-licenses

何かの利用規約に同意させられますので気になる人は内容を読んで「y」を入力

3. 完了

AndoroidStadioの設定

Flutterプラグインを入れる

1. プロジェクト選択画面　から「プラグイン」-「Flutter」を選択

デモアプリを起動

公式

1. Flutterプロジェクトを作成
   

2. Flutter SDKを設定
   　（例：`【展開先のファイルパス】\fluttersrc\flutter）

3. プロジェクト名と対応プラットフォームを選択
   　

4. 実行するデバイスを選択し、再生ボタンを押す
   

5. 起動
   

画面全体

おわりに

すでにAndoroid Stadioをインストールしていたこともあり、色々と手順がぬけているかと思いますが、他の方の記事を参考にしてください。
これでようやくスタートラインに立つ前のベットから起き上がった状態になりました。
まだ概要しか知らないので、ディレクトリ構造がめちゃくちゃ謎です。

以降は最初のところFlutterの構造をなんとなく知る→Todoアプリを作るで進めていこうかと思います。