Flutter勉強記録1日目～インストールからサンプルコードを走らせるまで～

# はじめに
**本記事ですること、目的**

- Flutterの勉強記録＆備忘録
- 今日は、[公式のドキュメント](https://flutter.dev/docs)を進めていく
- ドキュメントの翻訳をするわけではない
- 勉強記録みたいなものが少なかったので、誰かの役に立てばいいな

# 経緯
興味ない方は飛ばしてください。

諸事情でスマートフォンアプリ開発を行わないといけなくなりました。
以前、Kotlinを勉強してAndroid Studioでアプリを作っていたのですが、Kotlinの記事の体感半分程度がJava分かる前提で書かれており、Java初心者の自分にはなかなかに辛かった。
かと言って、非Appleユーザの自分が、iOS開発をするの辛いなんて目に見えている。そもそも動かす実機無いし。

そこで思いついたのが、クロスプラットフォーム開発。

> クロスプラットフォームとは、iOS、Android、Windows、macOSなど異なるプラットフォーム上で、同じ仕様のアプリケーションを動かせるプログラムのことです。

参考：https://it-trend.jp/development_tools/article/32-0027

クロスプラットフォーム開発の種類としては、**Flutter**、**React Native**、**Unity**なんかがあるそうで。そのあたりの違いをまとめている記事が[こちら](https://qiita.com/nskydiving/items/c13c949cc17c6f980a67)ですね。

んで、FlutterとReact Native、似ているしどっちがいいのかなぁ。以前JavaScriptしていたからReact Nativeがいいかなぁとか思いながら色々調べていると、どうもFlutterの方がReact Nativeよりサポートが手厚いというような話を聞きました。あと速いとか。

JSはしていたけど、Reactはしていなかったから、どちらを選んだとしても学習コストはかかるということもあり、Flutterを選んだはいいものの、さて、どうやって勉強したものかと色々探していると、どうも公式ドキュメントが分かりやすくていいらしい。

そんなこんなで、公式ドキュメントを見ながら勉強することになりました。

# 1. インストール
インストール方法は、[こちら](https://qiita.com/smiler5617/items/fbfee798b641f0352176)とかの方が詳しいかも。インストール方法に関しては、ググれば色々出てきます。

自分の環境：Windows10

Flutterは[こちら](https://flutter.dev/docs/get-started/install)からインストールする。自分はWindowsなので、[ここ](https://flutter.dev/docs/get-started/install/windows)から。


自分の場合の流れを軽く説明すると、

1.　[公式ページ](https://flutter.dev/docs/get-started/install/windows#get-the-flutter-sdk)からzipを手に入れる。
2.　解凍する
3.　解凍したやつを、**C直下やC:\Program Files\のようなアクセス権が厳しい所以外の場所**に置く。自分の場合は、公式ドキュメントに例として載っていた`C:\Users\<your-user-name>\Documents`に置いた。
4.　PATHを通す。ちゃんとパスが通ったかは、コマンドプロンプトから`where flutter dart`を実行して以下のような答えが返って来るかで確認できる。
自分の場合は、`C:\path-to-dart-sdk\bin\dart.exe`が返ってきていないのに記事執筆時点で気付いた。まぁ使えているし、いっか。必要なのかどうかよく分からない。

```
  where flutter dart
  C:\path-to-flutter-sdk\bin\flutter
  C:\path-to-flutter-sdk\bin\flutter.bat
  C:\path-to-dart-sdk\bin\dart.exe        :: this should go after `C:\path-to-flutter-sdk\bin\` commands
  C:\path-to-flutter-sdk\bin\dart
  C:\path-to-flutter-sdk\bin\dart.bat
```
5.　Android Studioをインストールする
6.　`flutter doctor`コマンドを実行する
7.　幾つか項目があるうち、「ライセンスの状態が不明やで」という部分だけエラーになった。

```
✗ Android license status unknown.
   Run `flutter doctor --android-licenses` to accept the SDK licenses.
   See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
```
8.　エラーに載っている`flutter doctor --android-licenses`を実行する。
9.　JavaのExceptionエラーが出てくる。
10.　[こちら](https://zenn.dev/captain_blue/articles/flutter-android-licenses-classnotfound)の記事を参考に解決

以上でインストールは終わり。

# 2. エディタの準備
少しだけAndroid Studioを使ってみたのですが、色々ありすぎて逆に分かりにくかった。という理由から、慣れ親しんでいるVisual Studio Codeを採用。

これも[公式ドキュメント](https://flutter.dev/docs/get-started/editor?tab=vscode)を参考にセットアップしていました。

こちらも調べれば結構な数出てきたので、軽く流れだけを書きます。

1. [VSCode](https://code.visualstudio.com/)をインストールする。
1. VSCodeにFlutterの拡張機能をインストールする。拡張機能のインストール方法は[ここ](https://jp.infragistics.com/products/indigo-design/help/codegen/installing-vs-code-extension)が分かりやすいかな？　拡張機能の検索窓に「Flutter」と入力して、一番上に出てきたものを入れる。Dartも自動で一緒に入る。

# 3. 試しに一個プロジェクトを作る
これも[公式ドキュメント](https://flutter.dev/docs/get-started/test-drive?tab=vscode)を参考にしました。

1. View > Command Paletteを押すと、検索窓みたいなのが出てくるので、そこに`flutter`と入力すると、**Flutter: New Application Project**が出てくる。それをクリック。
1. プロジェクトを作るための好きなフォルダを選ぶ。
1. 好きなアプリ名を入れる。自分は公式ドキュメントに倣って`myapp`にした。
1. `main.dart`というものが生成されるまで待つ。そこそこ時間かかった。

# 4. アプリを走らせる
自分の場合は実機を使いました。仮想環境重いんじゃ。
ただ仮想環境、実機が無くてもChromeやEdgeといったブラウザで走らせることもできるみたい。軽くテストするくらいなら、これでもいいかも。
実機の場合の流れを軽く書いていく。

1.　VSCode右下のところ（スクショでは「701SO」ってなっているところ）を自分が好きな環境に変える。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528682/474aead6-4309-74b3-c3a2-14bb0c42e2fa.jpeg)
2.　実機を使うなら、実機側のデバッグ用の設定をする。これに関しては、[別の記事を書いているので、こちら](https://qiita.com/ikeguma_Na/items/224433ecaec78b4f8548)を見て欲しい。
3.　セットが終わったら、右上にある三角形と歯車が組み合わされたマークを押して走らせる。サンプルを走らせるだけなので、デバッグあっても無くてもどちらでもいいんだろうけど、`Start Debugging`を押した。そこそこ時間がかかる。
![キャプチャ.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/528682/983429ed-b023-3066-01b6-2c49857a19ad.jpeg)
4.　すると、実機に、タイトルが`Flutter Demo Home Page`、真ん中に数字と`You have pushed the button this many times:`と書かれたアプリが表示される。
右下に「＋」マークのボタンがあり、それを押すと、真ん中の数字が大きくなっていく。

サンプルコードの解説に関しては、他にしてくださっている方がいらっしゃるので、そちらの紹介だけにとどめます。というか、私もよく分かっていないので解説できない。
[Flutter でサンプルプログラムを理解する](https://qiita.com/kurararara/items/73deac522ad9fea36abc)
[Flutter未経験者に初期サンプルコードの説明をしてみた](https://qiita.com/naoaki_kaito/items/ed77ee085ad61f951784)

# 5. ホットリロードを体験する
熱いリロードと書いて、保存したら即座に反映されることを意味するらしい。多分。

1. `lib/main.dart`を開く
1. 文章の一部分を変えてみる。例えば、

```Dart
Text(
  'You have pushed the button this many times:',
),
```
という部分を探し出し、`pushed`を`clicked`に変えるなどして、Ctrl+Sで保存すると、ｼｭﾝって実機の文字が変わる。


# 一日目終わり
とりあえず、ざっくりとFlutterの使い方が分かったのと、早めに制作に取り掛からないといけないので、次からは作りたいものに近い、良い感じのサンプルソースコードを見つけてその理解をしてみようと思います。
んで、困った時にドキュメントに帰る方式で行こうと思います。

諸事情により、作りたいものをめちゃくちゃ詳しく言うことはできませんが、作りたいものがはっきりと特定できないレベルの基礎的な勉強過程をQiitaに載せていくつもりです。

載せられなくなるレベルに到達するまでお付き合いいただければ幸いです。

公式ドキュメントのチュートリアルの続きは、三日目の方です。諸事情により順番が前後した形になりました。

二日目→[Flutter勉強記録2日目～カメラを使って景色を見るだけのアプリを作ってみる～](https://qiita.com/ikeguma_Na/items/7f4543bb4d5159fd2c28)
三日目→[Flutter勉強記録3日目～公式ドキュメントのチュートリアル～](https://qiita.com/ikeguma_Na/items/ef2cda7644d2e35b10e9)