Flutterをやってみよう！と思って調べていくと、

• 公式読め
• 英語読め
• リンク先でさらにこれ読めっていわれてどんどん増える
• 多すぎる。いつおわるんだ。
• これ古いんじゃないか？
• ねむくなる。ねむい。
• どこまで行ったらコード書き始めていいんだ。

こんな感じなのでおすすめの勉強コンテンツリンク集を作りました。

(以下作成中)

環境構築

最低限(iPhoneシミュレータで実行できるところまで)のセットアップをする。

• Mac
• VSCode
• iPhoneシミュレータだけ入れる。(Androidと実機はやりたくなったときにあとでやる)

• Run

  • flutter create my_app
  • cd my_app
  • flutter run
• iPhoneシミュレータで実行する / 再起動する
• コードを書き換えるとHotReloadされる

(実技) チュートリアル(Write your first Flutter app)

写経して体験

• https://flutter.dev/docs/get-started/codelab
• https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0

(実技) Widgetを組み合わせて画面を作る

Widgetツリーを作れば画面ができる

• Building layouts https://flutter.dev/docs/development/ui/layout/tutorial

(理論) WidgetとWidgetツリー

• Layouts in Flutter https://flutter.dev/docs/development/ui/layout いろいろなWidgetがあることを知る
• Introduction to widgets https://flutter.dev/docs/development/ui/widgets-intro StatefulWidgetとStateが出てくる

• さらに詳しく

  • Flutterのサンプルアプリが画面に描画されるまで https://itome.team/blog/2019/12/flutter-advent-calendar-day5/

(実技) setState

https://flutter.dev/docs/development/ui/interactive

(理論)

• Widgetのライフサイクル

  • StatelessWidget
  • StatefulWidget
  • (https://medium.com/flutter-jp/dive-into-flutter-4add38741d07)
• setStateから画面が更新されるまで

• Flutter の Widget ツリーの裏側で起こっていること

  • https://medium.com/flutter-jp/dive-into-flutter-4add38741d07

• 状態には2種類ある

  • https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app
  • Differentiate between ephemeral state and app state

(実技) Provider

https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple

• Consumer
• Provider.of

(理論) WidgetツリーとInheritedWidgetとProvider

• FlutterのBuildContextとInheritedWidgetを理解する https://itome.team/blog/2019/12/flutter-advent-calendar-day6/

• Providerの役割

  • (setStateしてくれる??)
  • DI

  • (InheritedWidget を完全に理解する https://medium.com/flutter-jp/inherited-widget-37495200d965)

    (実技) 環境設定

• linter
• VSCodeでの便利機能