日本Androidの会浜松支部 第108回ミーティングでFlutter勉強会やるのでWindows10にFlutterの開発環境を整えた話

はじめに

日本Androidの会浜松支部 第108回ミーティング
でFlutter入門が開催されるので、Flutterの環境を整える。
こういったハンズオン系のイベントの場合、あらかじめ環境を用意しておくと、セットアップだけで終わってしまって、本来イベントで学ぶべきことを学ばないで終わってしまうというもったいない事態に陥ることが少ないです。
(これホント大事！）
環境構築で分からない場合は、事前に知ってる人に質問しましょう！

このドキュメントは前提として、開発経験があって、環境変数の設定とかできる人向け。
(初心者向けじゃないです)

あらかじめ、Androidの開発環境は整っています。
Android Studioの環境構築は他の人の記事を探してください。

やったこと

やったことは以下のこと

• Flutterのダウンロード(公式サイトからダウンロード)
• Flutterのbinディレクトリを環境変数 PATHへの追加
• <インストールディレクトリ>\binを追加してね。例えば、C:\flutterにインストールしたら C:\flutter\binを追加する。
• 環境変数の設定方法がわからない人は@ITのWindows 10でPath環境変数を設定／編集するを参考にして下さい。
• Android StudioにFlutterプラグインを追加
• flutter doctorでライセンスの確認
• Android StudioでFlutterプロジェクトを作って試す

GitとPowershellが必要なように公式サイトに書いてあるけど、なくても大丈夫そう。

Android Studioはあらかじめインストールして、エミュレータの起動までやっておくといい。
これやっとかないと、イベント中にイメージのダウンロードが発生して時間を無駄にする。
あと、Hyper-Vを無効にしたいとといわれたことがあったけど、Hyper-Vがあってもエミュレータを起動出来たので、今はHyper-Vが有効な状態でも問題なさそう(検証不十分)

flutter doctorを実行すると、問題のある個所が[!]で表示されるので、それをつぶしていく。
以下、実行例
1番目はライセンス確認みたい。(これが必須かどうかわからない)
2番目はAndroid StudioにFlutterプラグインがなくて[!]がついている
3番目はVSCodeなので今回は無視
4番目はデバイスがつながってないよって言っていると思われる。(これは無視していい)

C:\Users\dev-t>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.4, on Microsoft Windows [Version 10.0.18362.900], locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[!] Android Studio (version 3.6)
    X Flutter plugin not installed; this adds Flutter specific functionality.
    X Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code, 64-bit edition (version 1.40.2)
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

・・・なんか、特に躓くことなくできちゃったｗ

Android Studioでプロジェクトを作るときにSDKを指定できるので、もしかして、パスを通さなくてもAndroid Studioのターミナルならパスと押さなくてもコマンド打てるのか！？とおもって、パスをからflutterのパスを外してターミナルでコマンド打ってみた

C:\data\dev\Android\flutter_app>flutter doctor
'flutter' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

・・・パスは必ず設定しましょうｗ

初めてのプロジェクトの作成と実行

File→New→New Flutter Projectでプロジェクトの作成が可能。

プロジェクトはFlutter Applicationを選んでください。

実行したい場合はエミュレータか実機が必要になります。
実機で実行したほうが快適に動作すると思います。

※この場合、実機の方で開発者向けオプションを表示させ、ONにする必要があります。さらにデバッグを行う為にはUSBデバッグを有効にしてください。開発者向けオプションはシステム→端末情報→ソフトウェア情報の順に遷移。その後、ビルド番号を連続タップすると開発者モードを有効にできます。

作成したプロジェクトをそのまま実行すれば端末で実行できるともいます。

開催当日

Google Codelabsの資料でのハンズオン

• Flutterアプリ開発 Part1 Write your first Flutter app, part 1
• Flutterアプリ開発 Part2 Write your first Flutter app, part 2

ハマりどころ

• サンプルコードをコピーすると、今はconstがいらなくてハマる(Step3あたり)
• Compiler message:
  lib/main.dart:18:23: Error: Not a constant expression.
  child: Text(wordPair.asPascalCase),とでたらconstを消してみて！
• packages getって書いてあるけどPub getしかない

個人的に気にしておきたいポイント

プロジェクトを作成するとき

• Use androidx.* artifactsにチェック
• include Kotlin ~ include Swift~にチェック
• これをチェックしないと、AndroidはJava、iOSはObjective-Cになる
• 

当日あった質問とか

適当にQAを抽出

Q.GoogleDocsの資料内のdemo_appの表示が現れました。青丸の＋をタップしたら、数字が増えるので、成功でしょうか？

はい、そうです

Q.プロジェクトをビルドし、Android or エミュレータへアプリをインストールする。ここの準備だけがまだできておりません。やり方など何か参考資料ありますでしょうか？

Androidまたはエミュレータへのインストールは、実行時に行われます。ツールバーに再生ボタンのようなものあると思いますので、それをクリックしていただくとAndroidまたはエミュレータにインストールされ、実行されます。

Q.エミュレータはAVD Managerからですかね…？

はい、そうです。

Q.flutter dockerはうまく動かせなかったのですが、androidStudioでビルドは完了、エミュレーターでDemoページは稼働しているのですが問題ないでしょうか？

はい、問題ないです。

Q.対応APIとかバージョン指定ありますか？

• minSDKが16(4.1)以上なら大丈夫です。
• ネイティブで対応するバージョンで指定してください。
• API30だけで用意していたら、API28がないとダメと怒られた記憶があります。

Q.New Flutter Project ... ですかね

そうです

Q.コンソールにRunning Gradle task 'assembleDebug'...の表示・・これはビルド中ですか？（時間がかかるという？）

時間がかかります

Q.一度作ったプロジェクトに対して、チェックを付け直す方法はありますか？新規作成しないとダメでしょうか？

できるのか不明

Q.Compiler message:lib/main.dart:18:23: Error: Not a constant expression.child: Text(wordPair.asPascalCase),

今回のハマリポイント

body: const Center(
  child: const Text('Hello World'),
),

↑bodyとchildのconstを外すと通る(昔はconstが必要だった)

Q.Host Restart Errorとでました

接続が切れている可能性があります。リビルド or 雷マーククリック or 再度アプリ転送で試してください。

Q.「Packages get」のボタンがエディター表示されていないときは、どうしますか？pubspec.yamlの編集のところです。

エディタ右上のPub getクリックして実行

Q.フォントサイズを変更した場合、Hot Reloadが効かないようですが、これは仕様でしょうか？一度アプリを止めて、再実行すると反映されます。

TextStyleのフォントサイズの変更はHot Reloadで反映されないようです。

Q.englis_words.darts のimportに失敗します。dependencies　には記載してるのですが・・・。External libにはenglish_words はあります。

Pub getを再度実行してください。
Pub getしてもダメな場合は、サンプルのコードをコピペするか、書き直したり、ビルドしなおすといいかも。

それでもダメな場合は File→Invalidate Caches / Restart...を試す