FlutterKaigi 2023のカンファレンスアプリコードを読んで勉強する
はじめに
Flutterの勉強の一貫として、FlutterKaigi 2023のカンファレンスアプリのコードを読んでみました。
他にもカンファレンスアプリを公開しているカンファレンスとしては DroidKaigi などがあり、毎年最新のトレンドなどのキャッチアップのために読んで勉強させてもらっています。
Flutter については、現時点で常にメイン開発を行っているわけではないため、よい機会だと思い読んでみることにしました。
すべてのコードを読んでいくというよりは、個人的に気になっている内容、知らない内容についてピックアップしています。
注意事項としては、この記事はあくまで個人の発信記事であり、「FlutterKaigi公式、運営とは無関係」であることご理解ください。
また、記載している内容は、個人の見解も含まれており、誤りなどがある可能性があります。
(もし誤りなど見つけた場合はコメントいただければ幸いです)
リポジトリ
FlutterKaigiのリポジトリは、Web/モバイルアプリで分かれています。
Webのリポジトリ
モバイルアプリのリポジトリ
今回深掘りはしませんが、Figmaのプロジェクトも公開してくれており、デザイン面でも勉強になります。
コード管理
カンファレンスアプリは、fvmを使ってFlutterのコードのバージョン管理をしています。
チャンネルは「beta channel」を使っているようです。
(個人で作るときは、常に最新のstable channelを使ってました)
モバイルアプリのコード
状態管理
この辺はもはやデファクトに近いのかもしれませんが、状態管理はriverpodを使っています。
Riverpodはv2でアノテーションによるコード生成がされています。
ルーティング
ルーティングには、 go_router が使われています。
このあたり、個人的に迷うところが多く、普段は標準のNavigatorを使うことがほとんどです。
routerの定義はここでされています。
part 'branch/router_app_contributors.dart';
part 'branch/router_app_home.dart';
part 'branch/router_app_licenses.dart';
part 'branch/router_app_sessions.dart';
part 'branch/router_app_settings.dart';
part 'branch/router_app_sponsors.dart';
part 'branch/router_app_venue.dart';
part 'branch/router_app_favorites.dart';
個人的に勉強になったのは、各ルーティングファイルは、partで別ファイル分割している点です。
普段は、Freezedなどコード生成時に盲目的に使っていた、partですがこういう使い方もあるのかと興味深かったです。
importではなくpartを使うのは何か理由があるのかまでは読み取れなかったですが、partを使うことで、同じファイル(同じスコープ)として管理したいという意図なのかなと察しました。
タブ
その他
- freezed
- firebase
- permission_handler
- etc
あたりが使われています。
テーマ
Material Design3が採用されています。
Themeの管理もiverpodで書かれており、GoogleFontでフォントの設定の上書きもここで記載されています。
終わりに
今まで、使ったことがないライブラリ、Widgetなどが知れて、大変に勉強になりました。
カンファレンス運営の皆さんの協力で作成されたアプリは、ノウハウが多く含まれているため非常に貴重なものだと思いますし、カンファレンスの運営ももちろんですが、コードの公開に感謝します。
機会があれば、自分でもカンファレンスアプリの作成に協力できたらと思います。
Discussion