Flutterのはじめかた（学び方）です。
Google Codelabsが学習に最適なコンテンツではありますが，2020年4月時点日本語版でflutterのコースは存在しないため英語版で頑張るしかない！
英語が読めなくてもChromeであれば超簡単に翻訳できるので＜こちら＞をご確認ください。
0-1. 各種ドキュメント
まずは公式ドキュメントの所在です。
今後ガイドやチュートリアルに従い学習を進め行きますが、サンプルに出てくるクラスや関数について、公式ドキュメントで簡単に調べておくと理解が深まり習熟スピードも上がるのでお勧めです。
- FlutterのAPIDOC (https://api.flutter.dev/)
- Flutterの画面部品のライブラリ (https://api.flutter.dev/flutter/material/material-library.html)
0-2. 学習に取り組むにあたり
Flutterはとにかく『Widget! Widget! Widget!』そして『Package』です。
多数存在するWidget（部品）とPackageを理解し、それらを組み合わせながらアプリケーションを構築します。WidgetやPackageに関しては以下を参照してください。
- Widgetのカタログ (https://flutter.dev/docs/development/ui/widgets)
- WidgetのYoutubeチャンネル※字幕あり (https://www.youtube.com/playlist?list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG)
- Packageのサイト (https://pub.dev/)
- FlutterのCookbook/事例集 (https://flutter.dev/docs/cookbook)
1. 開発環境の構築・簡単なプログラムの作成
Flutterの開発環境の準備と簡単なプログラムの作成を以下のガイド・コースに従い学習します。
-
Flutter Siteの「Get Started」(1-3)
https://flutter.dev/docs/get-started/install
1から3までを実施する。（4からはCodelabsの内容となるため） -
Codelabsの「Write your first Flutter app, part 1」
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0 -
Codelabsの「Write Your First Flutter App, part 2」
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#0
2. 画面レイアウトおよび画面部品の配置・カスタマイズ
画面レイアウトおよび画面部品の配置・カスタマイズについて以下のコースに従い学習します。
-
Codelabsの「MDC-101 Flutter: Material Components (MDC) Basics (Flutter)」
画面部品の使い方・カスタマイズ方法を101-104の4つのコースで学ぶことが出来ます。
https://codelabs.developers.google.com/codelabs/mdc-101-flutter/#0 -
Codelabsの「MDC-102 Flutter: Material Structure and Layout (Flutter)」
https://codelabs.developers.google.com/codelabs/mdc-102-flutter/#0 -
Codelabsの「MDC-103 Flutter: Material Theming with Color, Shape, Elevation, and Type (Flutter)」
https://codelabs.developers.google.com/codelabs/mdc-103-flutter/index.html#0 -
Codelabsの「MDC-104 Flutter: Material Advanced Components (Flutter)」
必須のコースではありません。
見た目についてこだわったカスタマイズを行いたい場合に本コースを実施してください。
https://codelabs.developers.google.com/codelabs/mdc-104-flutter/index.html#0 -
Codelabsの「Building Beautiful UIs with Flutter」
チャットツールを作りながらUI開発を学ぶコースです。
101-103を行っていれば、必須のコースではありませんが、LINEのようなチャットツールの作り方を学びたい場合に参考になります。
https://codelabs.developers.google.com/codelabs/flutter/index.html#0
3. BLoCパターンについて学ぶ
Codelabsで学んだことをもとにアプリ開発を進めていくと、「1つのプログラムが大きく複雑になり、中規模以上のアプリ開発には向かないフレームワークなのでは」という不安を感じます。
ここで、現時点でデファクトスタンダードになりつつある設計パターン「BLoC」パターンについて学びます。
・ BLoCパターンの概要
ネット上の記事でも一番わかりやすい記事でした。
https://note.com/yamarkz/n/n7f9106e53179
リリース方法
ここまで作ったアプリをiPhone, Androidにリリースしてみます。