虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

定番のFlutterの学習方法についてまとめる

定番のFlutterの学習方法についてまとめる

FlutterはWidgetの組み方などいろいろ癖のあると思っていて最初だけ少しハードルが高いかなと思います。

ですので、今回は定番のFlutterの学習方法についてまとめてみます。

とりあえずcodelab

とりあえずはじめるには本家のcodelabをやることが多いと思います Google製ということもあり、開発環境構築からしっかり書かれています。

https://codelabs.developers.google.com/codelabs/flutter/#0

CodeLabをやりきるとこんなレイアウトが組めます。

iOS

Viewを真似たり、自分で考えて作ってみる

次にFlutterでViewを本格的に作っていきましょう サーバーサイドとの連携より先にWidget操作に慣れましょう

Codelabには他にもいろいろなチュートリアルが用意されています。 全部やってみるのもいいし、ちゃんと勉強できたら途中でやめてもいいかもしれません。

https://flutter.io/codelabs/

noteでチューリアルを作成しましたのでこちらもどうぞ

https://note.mu/shogoyamada/n/n0d29a5b16e8c

他にも色んなViewのチュートリアルも作成したのでこちらもどうぞ

https://note.mu/shogoyamada/n/n912c7ba1ddf4

https://note.mu/shogoyamada/n/ne01d2eaf40f9

  • FlutterでFirebase ML を使った、文字起こしをやってみる

https://note.mu/shogoyamada/n/n4130f99c787e

FirebaseとFlutterを連携してみる

最近のトレンドとしてFirebaseとモバイルの連携は結構多いパターンだと思います。 ですのでこの手順は一回はやって置いた方がいいと思います。

Firebaseとの連携についてもCodelabが用意されています。

https://codelabs.developers.google.com/codelabs/flutter-firebase/#0

開発環境構築からしっかりかかれているのでとても良いと思います。

自分の過去にFirebaseとFlutterの記事を書いたのでこちらもどうぞ

  • FlutterとFirebaseの接続について

https://shogogeek.com/posts/flutter%E3%81%A8firebase%E3%81%AE%E6%8E%A5%E7%B6%9A/

  • Flutter × Firebaseで爆速でチャットアプリを作る

https://note.mu/shogoyamada/n/na2a66b1bdc3d

アーキテクチャについて学ぶ

アーキテクチャについて学ぶにはとりあえずFlutterで有名な BLocパターン からやっていきましょう。 BLoCパターンについてはYoutube動画とブログがGoogleの中の人から用意されています。

https://www.youtube.com/watch?v=RS36gBEp8OI&t=1693s

  • ブログ

https://medium.com/flutter-io/build-reactive-mobile-apps-in-flutter-companion-article-13950959e381

最後に

ここまで今自分が思いつく定番の学習方法です。 ここから先は個人でアプリ作ってみたり、プラグイン書き始めたりがいいかなと思います。

他に何か思い浮かんだら随時記事を更新します。