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

はじめに

本記事ですること、目的

• Flutterの勉強記録＆備忘録
• 今日は、公式のドキュメントを進めていく
• ドキュメントの翻訳をするわけではない
• 勉強記録みたいなものが少なかったので、誰かの役に立てばいいな

経緯

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

諸事情でスマートフォンアプリ開発を行わないといけなくなりました。
以前、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なんかがあるそうで。そのあたりの違いをまとめている記事がこちらですね。

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

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

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

1. インストール

インストール方法は、こちらとかの方が詳しいかも。インストール方法に関しては、ググれば色々出てきます。

自分の環境：Windows10

Flutterはこちらからインストールする。自分はWindowsなので、ここから。

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

1.　公式ページから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.　こちらの記事を参考に解決

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

2. エディタの準備

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

これも公式ドキュメントを参考にセットアップしていました。

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

1. VSCodeをインストールする。
2. VSCodeにFlutterの拡張機能をインストールする。拡張機能のインストール方法はここが分かりやすいかな？　拡張機能の検索窓に「Flutter」と入力して、一番上に出てきたものを入れる。Dartも自動で一緒に入る。

3. 試しに一個プロジェクトを作る

これも公式ドキュメントを参考にしました。

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

4. アプリを走らせる

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

1.　VSCode右下のところ（スクショでは「701SO」ってなっているところ）を自分が好きな環境に変える。

2.　実機を使うなら、実機側のデバッグ用の設定をする。これに関しては、別の記事を書いているので、こちらを見て欲しい。
3.　セットが終わったら、右上にある三角形と歯車が組み合わされたマークを押して走らせる。サンプルを走らせるだけなので、デバッグあっても無くてもどちらでもいいんだろうけど、Start Debuggingを押した。そこそこ時間がかかる。

4.　すると、実機に、タイトルがFlutter Demo Home Page、真ん中に数字とYou have pushed the button this many times:と書かれたアプリが表示される。
右下に「＋」マークのボタンがあり、それを押すと、真ん中の数字が大きくなっていく。

サンプルコードの解説に関しては、他にしてくださっている方がいらっしゃるので、そちらの紹介だけにとどめます。というか、私もよく分かっていないので解説できない。
Flutter でサンプルプログラムを理解する
Flutter未経験者に初期サンプルコードの説明をしてみた

5. ホットリロードを体験する

熱いリロードと書いて、保存したら即座に反映されることを意味するらしい。多分。

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

Text(
  'You have pushed the button this many times:',
),

という部分を探し出し、pushedをclickedに変えるなどして、Ctrl+Sで保存すると、ｼｭﾝって実機の文字が変わる。

一日目終わり

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

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

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

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

二日目→Flutter勉強記録2日目～カメラを使って景色を見るだけのアプリを作ってみる～
三日目→Flutter勉強記録3日目～公式ドキュメントのチュートリアル～