#dartlang_jp のFlutterハンズオンで再度Flutterを触ってみた
この前の日曜日にFlutterのハンズオンに参加してきました。
- 講師
- ntaooさん 読み方は特に決めてないそうですが、「えぬたおさん」でいいとのこと。
- 資料
dart自体から実際のFlutterアプリまで、かなり盛りだくさんな内容でした。
以前に一度公式のtutorialはこなしていたのですが、プラスαで学べる事が多かったのでまとめておきます。
講義
Dart
FlutterからDartを知ったのですが、Dart自体はもともとWeb用の言語だったそうです。2004年頃からWeb以外もターゲットにした汎用プログラミング言語としての道を歩み始めたとのこと。
また、開発時はJIT, リリース時はAOTコンパイルを実行する点、言語レベルで非同期処理を実装している点などが特徴みたいです。
全体的な文法はJavaとJSにそっくりです。言語自体は意図的に面白くなくしており、簡単に習得できるように設計されています。
Flutter
Flutter自体は前回も触れましたが、復習もかねて。
- 特徴
- クロスプラットフォームが可能なフレームワーク
- HotReloadによる開発の高速化
- staticなものを更新しない限りは差分を見てreloadしてくれる
- Reactiveなフレームワーク
- Reactの影響を受けている
- 状態をstateで管理し、
setState()
メソッドに反応して差分描画を行う
- Widget
- pluginによるデバイスのネイティブ機能との通信が可能
- 公式repo: https://github.com/flutter/plugins
- 自作も可能
- 開発環境サポートが充実
- 構造
- coreとなるEngine部分はC++で書かれている
- documentもしっかりある
- パッケージ管理システム
- Pub package manager
- https://pub.dartlang.org/
- ユニバーサルに使えるコアパッケージと各プラットフォーム向けに使えるパッケージがある
参照
- 公式サイト: https://flutter.io/
- サンプル集: https://github.com/flutter/flutter/tree/master/examples
- awesomeなリソースをまとめたリポジトリ: https://github.com/Solido/awesome-flutter
- 公式Twitter: https://twitter.com/flutterio?lang=en
ハンズオン
作ったもの
hacker news(https://news.ycombinator.com/)のニュースリーダーです。実際に外部APIを叩いています。
ニュースをタップすると、WebViewが開いてページを表示できます。
また、ニュースをお気に入りに登録できます。お気に入りリストも見ることが出来ます。
さらに、Pull(Swipe?)-To-Rrefreshも実装。ネイティブをやっていく自信がなくなってきますね。
ゆっくり調べながらやっていたら当日終わらなくて、後日改めてやり直したコードがこちら。コメント多めです。
学び
ほんとに何から何までWidgetであること
特にDividerなんて顕著ですが、marginから何から全部がWidgetとして扱われます。HTML書いている時にpaddingにするかmarginにするか悩むことが多かったのですが、Flutterだとその辺何も考えずに決められそうでいい感じです。
ネイティブのUIの充実
アイコンとPullToRefreshで実感しました。今回はボタンなどは使用していないためあんまりMaterial感を体験できていないのですが、ネイティブで書くより互換性を気にせずもりもり書けるのはちょっと爽快感があります。 ちなみに、AndroidのminSdkVersion
はデフォルトで16に設定されていました。環境によって違うのでしょうか。
また、アイコンですが、Icons
クラス配下に大量に用意されています。以下のサイトに一覧があるのですが、数えてみたら 985個もありました。笑う。
つらかったところ
書いていくうちに、インデントとカッコの対応が崩れた瞬間の絶望感。。他の言語よりも崩れたときの復帰がしんどい印象でした。Android StudioのDartAnalysisを使えばかなりわかりやすくなりますが、これがなかったらと思うと……恐ろしいですね。
正直初めは何やってるのか全く分かりませんでしたが、2回目をやり直したらだいぶ目が慣れてきました。 marginからdividerから何までWidgetであるということを忘れなければ大丈夫だと思います。
また、やっぱりネイティブと比べてしまうと不安定なところはあります。例えば、ListViewを勢い良くスクロールすると……たまに落ちたします。この辺のキャパシティというか、何も考えずに書いてもある程度いい感じにやってくれるのは、もしかするとネイティブの方なのかなぁ、などと。
lintについて
ハンズオンでは参考程度くらいでしか触れられていないのですが、Flutter(Dart)のlintについてです。
デフォルトでは、override時のアノテーション(@override
)は添えていなくてもエラーが出ないようになっています。ただ、慣れていないうちにタイポ等もろもろつらかったので、試しに追加してみました。手順は以下の通りです。
- projectのrootに
analysis_options.dart
を作成する。- これ、もとは
.analysis_options
だったみたいなのですが、変更加えるそうなので前者がおすすめだそうです。
- これ、もとは
- 中身をこんな感じに書く。
analyzer: strong-mode: true errors: todo: ignore exclude: - flutter/** - lib/api/*.dart linter: rules: - avoid_empty_else - cancel_subscriptions - close_sinks - annotate_overrides
以上です。簡単ですが、忘れず設定しておきたいです。
詳しくは、以下のリンクを参照してください。
感想
Flutter公式のtutorialにプラスした部分もあり、かなり実用的なハンズオンでした。このアプリ普通に使えますね……。そして、何故か忘れがちですがこれがAndroidとiOS両方で動いているというの、改めて恐ろしいです。
ただ、やっぱりそろそろファイル1枚に書いていくスタイルが厳しくなってくる分量だと思うので、まずはこれを分割していくところが次のステップでしょうか。
また、今後はチャットアプリなど外部のAPIにPOSTしていくようなものも触ってみたいです。次は話題のFirebaseですかね……!
講師のntaooさん、主催の方々、ありがとうございました!
追記
講師のntaooさんよりコメントいただきました!
コーディングの際に、プラグインのおかげで強力なalt+enter
の補完が使えるそうです。詳しくは以下のリンクとこの記事のコメント欄を参照してください。