Flutterチュートリアル　Todoアプリを作ろう！　～環境構築～

# この記事を書こうと思った理由
　この記事を書く前はFlutterでMarkdownで書けるメモアプリを作成していました。そのアプリの制作が終わったので、ここらへんで一旦自分のFlutterの知識をアウトプットしようと思いこの記事を書きました。

## デバック環境
- Windows 10
- Android 30

## Flutter環境構築
1. FlutterSDKのダウンロード
　[FlutterSDKのダウンロードリンク](https://flutter.dev/docs/get-started/install)
ここからSDKをダウンロードしCドライブ直下などに展開してください。

2. Flutter SDKのパス通し
　SDKの展開したフォルダ・ディレクトリの名前が「flutter」になってると思います。その中の「bin」のファルダのパスを通してください。

3. Android Studioのインストール
　[Android Studioのダウンロードリンク](https://developer.android.com/studio)
ここからインストーラーをダウンロードしインストールしてください。

4. Flutter doctor
　コマンドで下のコマンドを打つ。（※パスを通さないとコマンドが通らない）

```
$ flutter doctor
```

 大体はここで「Androidライセンスが＊＃＄＊％」みたいなやつが英語で出ることがあるのでつまずきますが、大丈夫です。
そんな時は、Android StudioのSDKマネージャーを開きAndroid SDK => SDK Tools => Android SDK Command-line Tools (latest)にチェックを入れ、右下の「apply」を押してから「ok」を押します。

![スクリーンショット 2021-10-11 222833.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/e99b6b34-5e28-a8db-7258-7379ca9479bb.png)

その後、下のコマンドを打つと「Androidのライセンスを受け入れますか？」的なメッセージが英語で出るので、全部「y」を押しときます。

```
$ flutter doctor --android-licenses
```

そのあともう一度しっかり「flutter doctor」を確認します。


最後にAndroid StudioにFlutterプラグインを入れる。これが終わればアプリ開発を始めることができます。

::: note info
参考「Flutter大学」さんの動画を参考にしました。
<iframe width="560" height="315" src="https://www.youtube.com/embed/6J-KK1Ft9NY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/kpvVENfDCRc" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
:::

## 初めてのFlutterデビュー
　まず初めにAndroid Studioを開いて新しいFlutterのプロジェクトを作成します。
「Next」などを押して次に進むと、Flutter SDKのおいてある場所の登録をする画面が出てきます。
そこに環境構築で展開したflutterフォルダーのパスを入れます。
そうするとSDKのパスが登録されます。たまに「SDKがありません」などと出てきますが、パスが通ってないことや「Flutter doctor」をクリアしてないことがよくあります。
そこらへんは、気を付けてください。

## Flutterのプロジェクト
　Flutterのプロジェクトを作成するといろんなファイルが作成されていますね。
まず「lib」の中には、Flutterのプログラム本体が入っています。これからいじるのはここのプログラムです。
次に「ios」の中には、iosの設定ファイルやFlutterのプログラムをiosのプログラムに移植するためのコードが入っています。
最後に「android」の中には、iosと同じようにAndroidの設定ファイルなどが入っています。
　主によくいじるのはここら辺のフォルダにあるファイルです。

そのほかにも「build」フォルダや「dart tool」などいろんなフォルダがあります。

## Let`s run の前に
　それでは、走らせてみましょう！
とその前に、一番左上のFileのボタンを押してその中にある「Project structure」を開きます。そして、＜No SDK＞と書いてあるところをクリックしSDKを追加します。

追加前
![nosdk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/f13bc7f1-9100-2a16-f02e-99e3dbdb4baf.png)

追加後
![addsdk.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/c4c9470b-3945-dae7-7a85-593647278845.png)

そして次に、Project structureの左側にある「Modules」をクリックし、todo_appと書かれているところの上の「＋」ボタンを押してAndroidのモジュールを追加します。

![スクリーンショット 2021-10-12 125245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/ebe0cd6f-4596-7b6a-c24b-8da1d50eace4.png)

こうすることで、Android Studioについている機能でエミュレーター（PC上でスマホのOSを実行しアプリをデバックできるもの）の中のファイルを確認出る「Device File Explorer」が使えるようになります。

::: note info
ここでAndroidのモジュールを追加すると、左側に表示されているファイル・フォルダのリスト（以後エクスプローラーと呼ぶ）の表示が少なくなっていると思います。
　これはモジュールを追加したときに、このプロジェクトがAndroidのプロジェクトとして開かれている状態なので普通のFlutterのプロジェクトとして開く必要があります。下の写真のAndroidのところをProjectに変更しておきましょう。
:::
![change_mode.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/78325c19-b487-fbd5-f24f-ce8ef0dae31e.png)

次にアプリを実行する環境を作ります。
それではそのエミュレーターを作っていきましょう。

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/0ddb3bde-42cf-b8ae-0740-55e196a08dea.png)

　上の画像のボタンを押します。（AVD Manager）
そうすると、AVDのリストが出てきますが初めての場合は何もAVDが無いので作成しましょう。

AVD Managerの下の方にある「Create Virtual Device」を押します。そうするとスマホの機種を選ぶ画面が出てきます。
自分の好きな機種を選びましょう。ただしPlay Storeのところにマークがついているものを選びましょう。（Play Storが必要ならばですが。）

![AVD_selectPhone.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/8a94f47b-4f4f-1c29-0374-ebdaa97f6f3c.png)

次に進むとAndroidのシステムイメージを選ぶところに来ます。初めての人は使えるAndroidのバージョンが無いと思うので、Recommendedから好きなバージョンのAndroidをダウンロードしてから選択するようにしましょう。

![AVD_Sysimg.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/c0e64c1f-dc60-8fe7-434e-f66c0f1b027e.png)

次にAVDの名前を決めるところに来ます。わかりやすい名前を付けましょう。

![AVD_name.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/ac033a46-7105-22c9-7261-46d019dc8123.png)

最後にFinishを押すと、最初のAVDのリスト画面に一つエミュレーターができていることが分かります。

![AVD_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/6ac1deb0-2997-95cc-152e-7f273d303a8e.png)

緑のスタートボタンを押してスタートするとAndroidの既視感のある画面が出てきます。

![AVD_device.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/08025370-0837-7976-2594-8631274eea52.png)

## Let`s run !
　それでは今度こそほんとに走らせてみましょう。
この写真の左の方に、「emulator-5554(mobile)」と書いてありますが、そこがWebブラウザになっていることがあります。
しっかりとmobileが選択されていることを確認しましょう。

::: note info
FlutterはWebアプリの開発も出来ます。知らんけど．．．
しっかりmobileを選択しないと勝手にブラウザで実行されます。
:::

![as_buttons_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1409495/1093b8a0-0796-1f60-dbbb-48a08eab8bb2.png)

そしたら、スタートボタンを押しましょう！初めてのFlutterアプリが動き出します。
初めてのアプリはカウントアプリが立ち上がると思います。遊んでください。

これで環境構築は終了です。

# この記事のまとめ
 mobileの開発はわからないことがいっぱいで、さらにFlutterの環境構築もイミフな奴が多いのでここでしっかりと順番道理に行ってください。
多分成功すると思います。多分！