Flutter をゼロから学び始めたいなと思い、学習することになりました。  

理由は、暇だから，サーバーサイドはある程度力ついたなと感じたから，ゆくゆく金になりそうだから、になります。  

しばらく Flutter 勉強記のようになると思います。

今回は環境構築編。

### Flutter とは

Dart という言語のフレームワークです。主にスマホアプリ向け。  

本来ならば、iOS には Swift、Android には Kotlin(Java) といった言語を使ってアプリを作らなければならないのですが、Flutter を使えば、両方の OS 用アプリを作ることができます。  

似たようなものとして React Native が有名どころでしょうか。  

React Native と比較したい場合、「Flutter VS React Native」とググって見ると良いです。  

ググるとなんとなーく Flutter が優秀に見えてきます。  

では環境構築していこうと思いますが、注意点として、Windows ユーザーは iOS 用のビルドをすることができません。  

Mac ユーザーは、iOS と Android 両方に向けたビルドが可能になっています。  

私は Windows ユーザーなので、以降 Windows 想定で書いています。あしからず。  

### インストール

[https://flutter.dev/docs/get-started/install](https://flutter.dev/docs/get-started/install)  

こちらから対象の OS(今回は Windows)を選択して、SDK の zip をダウンロード。  

Cドライブ直下や、`C:\src` のようなディレクトリ上で解凍すると良いようです。  
`C:\Program Files` とかはやめてくれ、と書いてありますので、今回はCドライブ直下に解凍します。  

#### 環境変数設定

いわゆるパスを通します。  

Windows の検索欄に、env といれると設定画面が出てきます。  

[![path.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/path.png?alt=media&token=d7bd2d58-6ead-4d71-82a1-3ed69585d3b8)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/path.png?alt=media&token=d7bd2d58-6ead-4d71-82a1-3ed69585d3b8)  

環境変数をクリック -> ユーザー環境変数の一覧より、Path をクリックし、編集します。  

[![env.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/env.png?alt=media&token=02acd43a-a5e7-4f94-a395-72b3141b0154)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/env.png?alt=media&token=02acd43a-a5e7-4f94-a395-72b3141b0154)  

新規 -> `C:\flutter\bin` を入力して、保存。  

Windows PowerShell を開いて、試しに以下のコマンドを打ってみます。  

```
flutter doctor
```

それっぽい画面が出てきたら成功です。  

[![flutter_doctor.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/flutter_doctor.png?alt=media&token=53694308-2bea-4a43-ad5e-79b8900c2d4f)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/flutter_doctor.png?alt=media&token=53694308-2bea-4a43-ad5e-79b8900c2d4f)  

#### Android Studio インストール

[https://developer.android.com/studio](https://developer.android.com/studio)  
こちらから Android Studio をダウンロード、インストールをします。  
特に設定をカスタムすることもないと思います。  

Android Studio を起動して、歯車アイコンより、Plugin を選択します。  

Flutter と検索窓に入力し、Flutter をインストールします。  

[![plugin.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/plugin.png?alt=media&token=0a28b803-1525-4331-9fe7-e746876a9803)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/plugin.png?alt=media&token=0a28b803-1525-4331-9fe7-e746876a9803)  

Android Studio を再起動します。  

### 試しに作ってみる

プラグインが無事にインストールされていたら、起動画面に、`Start a new Flutter project`というのが追加されていると思います。  

[![new_flutter_project.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/new_flutter_project.png?alt=media&token=2b22462d-d182-4030-93a4-016fc5a9e447)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/new_flutter_project.png?alt=media&token=2b22462d-d182-4030-93a4-016fc5a9e447)  

`Start a new Flutter project`をクリックしてプロジェクトを作成していきます。  
基本的にNext押しとけば良いですが、一箇所、Flutter の Path を選択する項目があるので、ご自身の環境に合わせて変更してください。  

今回は`C:\flutter`ですね。  

[![new_flutter_select_path.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/new_flutter_select_path.png?alt=media&token=0f6d7850-045b-4733-acdf-e08476433e07)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/new_flutter_select_path.png?alt=media&token=0f6d7850-045b-4733-acdf-e08476433e07)  

残りの項目はお好みで、変えても良いし変えなくても良いです。  

Finish を押すとアプリが作成されます。  

試しにエミュレータ(シミュレータ？)を起動してみましょう。  

起動方法は、仮想デバイスを選択して、起動ボタン、です。  

[![boot.png](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/boot.png?alt=media&token=80807246-69e6-48e7-b86a-3e1e2f616b38)](https://firebasestorage.googleapis.com/v0/b/test-blog-a5123.appspot.com/o/boot.png?alt=media&token=80807246-69e6-48e7-b86a-3e1e2f616b38)  

無事起動できたら、今日はここまでにしましょう。お疲れさまでした。

Flutter 環境構築してみた