概要
FlutterはDart言語で書かれた1つのコードからiOSとAndroid、両OSにアプリをビルドすることができる、アプリケーションフレームワークです。（※ Webアプリも作れるらしい）
ちょっと気になったので、練習用にGitHubリポジトリを検索できるアプリを作成してみました。
今回の記事は、そのアプリの紹介と、それを制作するまでに参照した情報の共有記事となります。
作ったアプリ
機能
- githubレポジトリ検索
- リポジトリのweb表示
- お気に入り追加
- お気に入り一覧表示
開発環境
- flutter : 1.17.3
- Dart : 2.8.4
- OS : Windows 10 / MacOS Catalina
- IDE : Android Studio / Visual Studio Code
最初はiOSシミュレータを利用するためにMacで開発していましたが、Windows環境はマルチモニタを使えるようにしてたので、最終的にWindowsで開発を進めました。
また、IDEは最初AndroidStudioを使ってたんですが、GoogleI/OやGoogleDevelopersのFlutter講演等を見てると、皆さんVSCodeを使っていたので、感化されて最終的にVSCodeで進めていきました。
この辺、自身の状態に合わせて柔軟に環境を調整できるところはすごく良いですね。
GitHubのリンク
flutter_first_demo
https://github.com/becky3/flutter_first_demo
参考にしたアプリ
Flutterを使った同じ題材のアプリを作られている方がいらっしゃったので、
以下記事を参考にさせていただきました。
【Flutter】BLoCパターンでアプリを作成してみた。~カウンターアプリ、githubリポジトリ検索アプリ~
https://qiita.com/tetsukick/items/2b23885e5b91afff9536
【Flutter】GitHubリポジトリを検索するサンプルアプリ作った
https://qiita.com/rkowase/items/56f6606b7e101d939e10
Flutter入門として参考にした記事
【入門】はじめての Flutter
https://qiita.com/nskydiving/items/4fcf0dbad923d50601f9
タイトルの通り、入門記事です。 セットアップから、サンプルコードのビルドまで端的にまとめられていて非常に参考になりました。
Flutter 全部俺 Advent Calendar 2019
itome さんによる、全部一人で書かれたというFlutterのAdvent Calendarです。
記事内に、何日後の記事に詳しく書くみたいな書き方をされてるので、
かなり計画的に記事を書かれていたのだと思います。
まず、お一人で毎日この分量を書かれた事がすごいですが、Flutterについての記事からDart入門、レイアウト構造、アニメーション、テスト、Blocを用いた設計など、幅広い内容に言及されていて、この記事を一通り読むとかなり理解が進むのではないかと思います。
基礎から学ぶFlutter
石井幸次 さんの著書です。
こちらもFlutterのかなり幅広い内容を取り扱われています。
特に、widgetの種類が豊富に取り扱われている部分は、俯瞰に役立ちました。
InheritedWidget を完全に理解する
mono さんも多くの記事をアップしてくださっています。
Flutterはツリー状に構成されるwidgetが特徴的ですが、その参照方法の一つとして
InheritedWidgetについて、詳しく書かれた記事です。
最初このあたりの使い方がよくわからなかったのですが、実際コードを書いていくうちに少しずつ理解ができました。
Google I/O 動画
Google I/Oでのライブコーディング動画です。
実際にコードを書いているところを見ると、具体的にイメージが湧くのですごく参考になりました。
例えば、widgetの部分については、ネストが深くなりがちなので、手作業で書いているとカッコが分けわからない状態になったりして、かなり苦しい思いをしました。
そのあたりについて、ライブコーディングでは、IDEの機能でwidgetの上位層に新たなwidgetを挿入をしたり、位置を入れ替えたりしてたので、こういうふうに書いていくのかと、すごく参考になりました。
Build reactive mobile apps with Flutter (Google I/O '18)
https://youtu.be/RS36gBEp8OI
Pragmatic State Management in Flutter (Google I/O'19)
https://youtu.be/d_m5csmrf7I
海外技術記事を見るときに役立つツール
と、英語動画を２つ参照しましたが、自分はほぼ英語ができません。
なので、 Language Learning with Youtube と言う、英語動画の字幕を翻訳して表示してくれるChrome拡張を使いながら視聴しました。
これを使えば今後、海外講演情報へかなりリーチできそうです。
以下、ツールの紹介記事です。
YouTubeでの英語学習がはかどるGoogle Chrome拡張機能【今日のライフハックツール】
https://www.lifehacker.jp/2020/06/lht_learning-language-with-youtube.html
あとがき
Flutterを触ってみて、Widget周りの書き方については、きちんと学ばないとネストがすごい事になって、すぐにメンテナンスできないコードになりそうといった印象を持ちました。
ただし、BLoCアーキテクチャやProviderを使ってのパターンの情報も多く共有されているので、今後はその辺を重点的に見ていこうと思います。