Flutterを使い始めたのでやっていったことを書き記していきたいと思います。
FlutterはiOSとAndroidとついでにWEBアプリを作れる優れた開発ツールで、言語はDartです。
まだまだ新しい言語であるため、検索してもでてこなかったり、用語が難しすぎたり、英語サイトばっかりでてきたりでVisual Basicを使っていたときよりも調べにくいし、言語の難易度も高いです。
さらにWindowsで記しているサイトとMacで記しているサイトがあるのでWindowsを使う人はMacで説明されたサイトを見ると困惑してしまいます。
WindowsではiOS用のエミュレーターやコンパイルができないのでしょうがないです。
ちなみAndroid Studio
Android Studioのインストール
Androidを開発するためのツールである「Android Studio」をインストールしていきます
Download Android Studioってところをクリックして
![Android Stdioインストール](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_1.jpg)
同意のチェックボックスをつけて
Download Android Studio Dolphin … のボタンをクリックするとダウンロードが始まる、もしくは保存先のディレクトリ選択画面になりインストーラーをダウンロードできます。
![Android Studioインストール](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_2.jpg)
ダウンロードしたファイルをダブルクリック等で起動していきます
![ダウンロード](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_3.jpg)
ひたすらNEXTしてインストール。ディレクトリとショートカットはお好みで
![NEXT](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_4.jpg)
さらにNextからのFinish
![NEXT](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_5.jpg)
![Finish](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_6.jpg)
![OK](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_7.jpg)
![Next](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_9.jpg)
![NEXT](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_10.jpg)
![NEXT](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_11.jpg)
![NEXT](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_12.jpg)
![FINISH](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_13.jpg)
![FINISH](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_14.jpg)
これでAndroid Studioのインストール完了です。(まだまだ続くよ)
![Android Studio](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_15.jpg)
Flutter SDKをインストール
Flutterはわかりますが、SDKは何ぞやと思ったのでちょっとだけ説明するとプログラムやAPIなどをパッケージ化してくっつけるみたいなイメージっぽいです。
Flutter SDKのダウンロードサイトに移動します。
今回はWindowsですのでWindowsの箇所をクリックします。
![Flutter SDK](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_16.jpg)
するとFlutterのZipファイルをダウンロードできますのでzipファイルを選択しダウンロードします。
![Flutter SDK](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_17.jpg)
C:\srcのフォルダを作成しダウンロードしたzipを解答します。
(※筆者のPCのCドラの容量がないためDドラにしています)
![](https://www.kocoro.info/wp-content/uploads/2022/11/flutterins_18.jpg)
環境変数を設定
環境変数を設定する必要があります。
この環境設定って何に使うの?と思うのでお答えします。
コマンドプロンプトでコマンドを入力するために使用していきます。大抵のFlutterのサイトではコマンドプロンプトではなくターミナルを使用して説明しているため、WIndowsユーザーは困惑してしまうかもしれません。
基本的にターミナルで入力するコマンドのドルマーク「$」を抜いて入力することでコマンドプロンプトで実行可能になります。
まずはタスクバーの検索でenvと入力し「システム環境変数の編集」を選択します。
![env](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_20.jpg)
![環境変数](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_21.jpg)
ユーザーの環境変数の「新規」を選択します。
![環境変数](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_22.jpg)
変数名を「FLUTTER_PATH」 変数値を「C:/src/flutter」とします。(※筆者は容量の関係上Dドライブに設定しています)
![FLUTTER_PATH](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_23.jpg)
続いてPathを選択して「編集」→「新規」を選択し「%FLUTTER_PATH%\bin」を追加します。
![PATH](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_24.jpg)
確認としてコマンドプロンプトを起動し(Windowsキー+R の入力画面でcmdと入力すれば早いです)
「flutter doctor」と入力して正常にコマンドを受け付けられたら、入力した環境変数が正しいです。
![コマンドプロンプト](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_25.jpg)
Android StudioのFlutterのプラグインを設定
先ほどインストールしたAndroid Studioを起動します。
Pluginsを選択し、「flutter」と検索。そしてインストールへ
![プラグイン](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_26.jpg)
![](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_27.jpg)
![インストール](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_28.jpg)
Restart IDEのボタンを押し、再起動をかけます。
![再起動](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_29.jpg)
コマンドラインツールをインストール
Android StudioのMore ActionのSDK Managerをインストールします。
![SDK MAnager](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_30.jpg)
設定画面が起動するので、SDK Toolsのタブの「Android SDK Command-line Tools」にチェックを入れOKを押します。
![SDK](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_31.jpg)
![SDK](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_32.jpg)
![完了](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_33.jpg)
コマンドプロンプトを開き(cmdと検索)下記コマンドを実行します。
flutter doctor --android-licenses
するとy/nの入力を求められるのでyを入力します。
何度も求めらるので全部yを入力しましょう
All SDK package licenses acceptedのメッセージがでたら完了です。
Visual Studioのインストール
Visual StadioはWindos用のアプリをVBなどで開発するためのツールですが、Windows用のアプリ開発するために必要になってきます。
Visual Studioダウンロードサイトでコミュニティ版をインストールします。
Flutterの開発ではVisual Studioそのものを使用わけではないのでコミュニティ版で問題ありません。
![Visual Studio](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_34.jpg)
VisualStudioSetup.exeを起動します。
![](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_35.jpg)
ワークロード C++によるデスクトップ開発にチェックを入れインストール
![](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_36-1024x519.jpg)
![](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_37.jpg)
Visual Studioの起動を選択します
![](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_38.jpg)
MicroSoftアカウントがあればサインイン、なければ「今はスキップする」を選択。サインインが面倒であれば「今はスキップする」でOK
![](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_39.jpg)
好きなテーマを選択し、Visual Studioの開始
![](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_40.jpg)
下記画面がでたら閉じて問題ありません。
![](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_41.jpg)
最終チェック
コマンドプロンプトを開き(cmdと検索)下記コマンドを実行します。
flutter doctor
下記のように緑チェックのみで赤チェックがなければFlutterの開発環境の作成完了です。
おつかれさまでした!
![完了](https://www.kocoro.info/wp-content/uploads/2022/12/flutterins_42.jpg)
最後に
WindowsにFlutterをインストールしましたが、残念ながらMacOSじゃないとiPhoneアプリの開発はできないようです。
次回はFlutterの初歩の初歩を解説していきたいと思います。
マニュアルが全部英語で苦戦したことを日本語でできるだけわかりやすく書いていこうとおもいます。
![](https://www10.a8.net/0.gif?a8mat=3HKR5F+8DUU0Y+4UAG+614CX)