{"componentChunkName":"component---src-templates-blog-post-js","path":"/flutter-tips/LetsStartFlutter202010/","result":{"data":{"site":{"siteMetadata":{"title":"sasaki takeru Blog"}},"markdownRemark":{"id":"0fca20dc-59b1-5b61-872f-0e2c4ced72a3","excerpt":"Flutter…","html":"<p>Flutterをやってみよう！と思って調べていくと、</p>\n<ul>\n<li>公式読め</li>\n<li>英語読め</li>\n<li>リンク先でさらにこれ読めっていわれてどんどん増える</li>\n<li>多すぎる。いつおわるんだ。</li>\n<li>これ古いんじゃないか？</li>\n<li>ねむくなる。ねむい。</li>\n<li>どこまで行ったらコード書き始めていいんだ。</li>\n</ul>\n<p>こんな感じなのでおすすめの勉強コンテンツリンク集を作りました。</p>\n<p>(以下作成中)</p>\n<h3>環境構築</h3>\n<p>最低限(iPhoneシミュレータで実行できるところまで)のセットアップをする。</p>\n<ul>\n<li>Mac</li>\n<li>VSCode</li>\n<li>iPhoneシミュレータだけ入れる。(Androidと実機はやりたくなったときにあとでやる)</li>\n<li>\n<p>Run</p>\n<ul>\n<li>flutter create my_app</li>\n<li>cd my_app</li>\n<li>flutter run</li>\n</ul>\n</li>\n<li>iPhoneシミュレータで実行する / 再起動する</li>\n<li>コードを書き換えるとHotReloadされる</li>\n</ul>\n<h3>(実技) チュートリアル(Write your first Flutter app)</h3>\n<p>写経して体験</p>\n<ul>\n<li><a href=\"https://flutter.dev/docs/get-started/codelab\">https://flutter.dev/docs/get-started/codelab</a></li>\n<li><a href=\"https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0\">https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0</a></li>\n</ul>\n<h3>(実技) Widgetを組み合わせて画面を作る</h3>\n<p>Widgetツリーを作れば画面ができる</p>\n<ul>\n<li>Building layouts\n<a href=\"https://flutter.dev/docs/development/ui/layout/tutorial\">https://flutter.dev/docs/development/ui/layout/tutorial</a></li>\n</ul>\n<h3>(理論) WidgetとWidgetツリー</h3>\n<ul>\n<li>Layouts in Flutter\n<a href=\"https://flutter.dev/docs/development/ui/layout\">https://flutter.dev/docs/development/ui/layout</a>\nいろいろなWidgetがあることを知る</li>\n<li>Introduction to widgets\n<a href=\"https://flutter.dev/docs/development/ui/widgets-intro\">https://flutter.dev/docs/development/ui/widgets-intro</a>\nStatefulWidgetとStateが出てくる</li>\n<li>\n<p>さらに詳しく</p>\n<ul>\n<li>Flutterのサンプルアプリが画面に描画されるまで\n<a href=\"https://itome.team/blog/2019/12/flutter-advent-calendar-day5/\">https://itome.team/blog/2019/12/flutter-advent-calendar-day5/</a></li>\n</ul>\n</li>\n</ul>\n<h3>(実技) setState</h3>\n<p><a href=\"https://flutter.dev/docs/development/ui/interactive\">https://flutter.dev/docs/development/ui/interactive</a></p>\n<h3>(理論)</h3>\n<ul>\n<li>\n<p>Widgetのライフサイクル</p>\n<ul>\n<li>StatelessWidget</li>\n<li>StatefulWidget</li>\n<li>(<a href=\"https://medium.com/flutter-jp/dive-into-flutter-4add38741d07\">https://medium.com/flutter-jp/dive-into-flutter-4add38741d07</a>)</li>\n</ul>\n</li>\n<li>setStateから画面が更新されるまで</li>\n<li>\n<p>Flutter の Widget ツリーの裏側で起こっていること</p>\n<ul>\n<li><a href=\"https://medium.com/flutter-jp/dive-into-flutter-4add38741d07\">https://medium.com/flutter-jp/dive-into-flutter-4add38741d07</a></li>\n</ul>\n</li>\n<li>\n<p>状態には2種類ある</p>\n<ul>\n<li><a href=\"https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app\">https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app</a></li>\n<li>Differentiate between ephemeral state and app state</li>\n</ul>\n</li>\n</ul>\n<h3>(実技) Provider</h3>\n<p><a href=\"https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple\">https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple</a></p>\n<ul>\n<li>Consumer</li>\n<li>Provider.of</li>\n</ul>\n<h3>(理論) WidgetツリーとInheritedWidgetとProvider</h3>\n<ul>\n<li>FlutterのBuildContextとInheritedWidgetを理解する\n<a href=\"https://itome.team/blog/2019/12/flutter-advent-calendar-day6/\">https://itome.team/blog/2019/12/flutter-advent-calendar-day6/</a></li>\n<li>\n<p>Providerの役割</p>\n<ul>\n<li>(setStateしてくれる??)</li>\n<li>DI</li>\n<li>\n<p>(InheritedWidget を完全に理解する <a href=\"https://medium.com/flutter-jp/inherited-widget-37495200d965\">https://medium.com/flutter-jp/inherited-widget-37495200d965</a>)</p>\n<h3>(実技) 環境設定</h3>\n</li>\n</ul>\n</li>\n<li>linter</li>\n<li>VSCodeでの便利機能</li>\n</ul>\n<!--\n-->","frontmatter":{"title":"","date":"September 30, 2020","description":null}},"previous":{"fields":{"slug":"/flutter-tips/HotReload/"},"frontmatter":{"title":""}},"next":{"fields":{"slug":"/flutter-tips/Performance/"},"frontmatter":{"title":""}}},"pageContext":{"id":"0fca20dc-59b1-5b61-872f-0e2c4ced72a3","previousPostId":"32ec91db-a240-5a44-87e9-d5582dcc314f","nextPostId":"cba4e6c9-0e67-581c-9e39-fec7a5f39f0d"}},"staticQueryHashes":["2841359383","3257411868"]}