android studio+vscode で flutter 触ってみた - すぐ影響されるブログ

話題のflutterを触ってみました。

この記事では私が実際に環境構築からTODOアプリを作るまでに参考にした情報や感想をまとめています。

widowsパソコンでflutter触ってみたいな～という方の参考になれば幸いです。

先に言ってしまうと、flutterは学習コストが低く、成長を楽しめるフレームワークだなぁと感じました。

環境構築
TODOアプリを作る
- 神教材 Flutter Beginners Hands-on
- ハマったところ
  - IconDataがなんぼのもんじゃい
  - コードを戻してもエラーが消えない…？
flutter 触ってみた感想

環境構築

作業環境

作業環境は以下のとおりです。

エディタはVSCodeを使っています。

使い慣れてるからというだけで選びましたが、拡張機能でコードの補完とかしてくれるので全然ありだと思います。

flutter と android studio の導入

flutter の入手から Android studio でエミュレータを起動するまでの手順は以下の記事がスクショいっぱいでわかりやすかったです。

www.ccs1981.jp

ちなみに、android studioでエミュレータを起動するときに毎回こんな感じのよくわからんポップアップが出ます。

Unable to locate adbですって。

何を言ってるのかまったくわからん。

今回のように軽くflutterを触るだけなら問題なかったので無視しました。

詳しい人いたら教えてください。

VSCode に flutter 拡張機能を追加

VSCodeについては既にインストール済みだったので、flutterの拡張機能を追加するだけで済みました。

実際にVSCodeでアプリを動かす方法は以下の記事とか参考になると思います。

kawazu-nedoko.com

ただし、あらかじめAndroid Studioでエミュレータを起動しておく必要があります。

Android studio でエミュレータを起動 → VSCodeで作ったアプリをエミュレータ内に起動という流れです。

TODOアプリを作る

神教材 Flutter Beginners Hands-on

こちらの資料に従ってTODOアプリを作ってみました。

zenn.dev

特に序盤の説明が丁寧で勉強になります！って感じです。

タイトル通り入門者向けで、ほとんど追加の調査なしで最後までいけました。

情報がほぼ完結しているという点で個人的にはとても完成度の高い１冊でした。感謝。

ハマったところ

IconDataがなんぼのもんじゃい

Hands-on 4 をやっている最中にこんなエラーが出ました。

A value of type 'IconData?' can't be assigned to a variable of type 'IconData'.
Try changing the type of the variable, or casting the right-hand type to 'IconData'.

偉大なる先人様が解決方法を見つけていました。感謝。

ameblo.jp

Hands-on を最初から順に進めている場合、IconData という文字列をプロジェクト内の全ファイルで検索すると3か所ヒットすると思います。

それらすべてを IconData? にすればこのエラーは消えます。

ちなみにVSCodeでは、サイドバーの虫眼鏡からプロジェクト内の全ファイルに対して文字列を検索ができます。

コードを戻してもエラーが消えない…？

これも hands-on 4 をやっている最中に遭遇したエラーです。

 _TypeError (type 'List<String>' is not a subtype of type 'List<Todo>' of 'function result'

このエラーが出たときは、どこか書き間違えたかなぁと変更したコードを元通りにしたのですが、戻した後もエラーだけが残ったので焦りました。

結論言うと、VSCode のデバッグモードを終了→もう1回デバッグモードを起動でこのエラーは消えました。

「ホットリロードとかいうやつで変更は即座に反映されるんだよなぁ！？」とデバッグモードでアプリを起動しっぱなしのままコードをガリガリ書き換えていたのが原因でした。

flutterのホットリロードは書いたコードが即座に画面に反映されるのでライブ感がありますが、裏側の処理だとバグっちゃうこともあるみたいですね。

エラーが出たあとにコードを戻したのにエラー残った…という一連の流れはずっとデバッグモードを起動していたから起きた現象っぽいです。

flutter 触ってみた感想

パッケージの追加が楽

flutterではパッケージは pubspec.yaml で管理しているみたいです。

欲しいパッケージをここに追記するだけで自動でインストールしてくれます。便利～。

紹介したhands-on資料でもパッケージを追加する箇所があるのでご自身で体感して欲しいところ。

ホットリロードは便利だけど

flutterのホットリロードは便利な機能だと思いますが、万能というわけではなさそうです。

ハマったところの話にも書きましたが、思考停止でホットリロードをオンにし続けるとエラーが消えねぇ！となったときに焦ります。

デバッグモードの再起動、大事です。

諸行無常の flutter

この記事を書いている時点で、flutterはまだ4才くらいの若いフレームワークです。

既にかなりの人気があるみたいなので、これからもどんどん進化していくように思います。

だからこそ、もし今後もflutterを触っていくなら最新情報を追いかけ続ける必要がありそうです。

若いフレームワークなだけあって更新頻度が高いし、まだまだ定まっていない部分もあると思うので、破壊的変更もあるでしょう。

仕事でflutterを使っている友人によると、日本語のflutter本はまだまだ貧弱で、情報が古くコードを書いてもそのまま動かないこともよくあるそうです。

ぼくが今回勉強させてもらったhands-on資料も、作者さんが更新しなければそう遠くない未来に動かないやんけ！状態になるかもしれません。

とはいえ、触り始める分には補完機能などのおかげでとっかかりやすく、ライブ感のある開発ができる点で楽しいフレームワークだと思いました。

flutterの今後に期待ですね。

おわり。