定番のFlutterの学習方法についてまとめる
定番のFlutterの学習方法についてまとめる
FlutterはWidgetの組み方などいろいろ癖のあると思っていて最初だけ少しハードルが高いかなと思います。
ですので、今回は定番のFlutterの学習方法についてまとめてみます。
とりあえずcodelab
とりあえずはじめるには本家のcodelabをやることが多いと思います Google製ということもあり、開発環境構築からしっかり書かれています。
https://codelabs.developers.google.com/codelabs/flutter/#0
CodeLabをやりきるとこんなレイアウトが組めます。
Viewを真似たり、自分で考えて作ってみる
次にFlutterでViewを本格的に作っていきましょう サーバーサイドとの連携より先にWidget操作に慣れましょう
Codelabには他にもいろいろなチュートリアルが用意されています。 全部やってみるのもいいし、ちゃんと勉強できたら途中でやめてもいいかもしれません。
noteでチューリアルを作成しましたのでこちらもどうぞ
https://note.mu/shogoyamada/n/n0d29a5b16e8c
他にも色んなViewのチュートリアルも作成したのでこちらもどうぞ
- よくあるマテリアルデザインをFlutterで簡単に実装してみる
https://note.mu/shogoyamada/n/n912c7ba1ddf4
- マテリアルデザインの縮むヘッダーをFlutterで爆速で実装する
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
最後に
ここまで今自分が思いつく定番の学習方法です。 ここから先は個人でアプリ作ってみたり、プラグイン書き始めたりがいいかなと思います。
他に何か思い浮かんだら随時記事を更新します。