A Complete Guide to the Flutter SDK & Flutter Framework for building native iOS and Android apps
Flutter & Dart - The Complete Guide [2023 Edition]
-
チュートリアルや写経でも『The Art of Readable Code』の考えを反映する
- 講師による変数の命名にも改善余地を見出す
- 逆に疑問を感じた書き方に対し、なぜ講師がそうしているのかを考える
- 「良いコード」とは誰が見てもわかりやすいコード
- 変数名や関数名、コメントの書き方、インデントや改行の入れ方を工夫する
- コメントに関して現状は「自身の理解度、知識定着度」優先だが、開発現場想定では「他人(或いは半年後の自分)にとっての理解しやすさ」を優先する
-
とにかく丁寧に学習モード
- 学習速度や成果物作成進度は更に落ちるが、英語の学習(hearing, reading)を兼ね英語音声＋英語字幕で視聴する
- 英語の音声と字幕の聴覚・視覚情報を入れながら同時に脳内で日本語翻訳しない
- 英語の語順通り前から順に理解していく。未知の単語だけ調べる
- 単語を調べても意味が通らない場合のみ、慣用句(だいたい2~5ワード)或いは最大1文節を翻訳する
- 学習速度や成果物作成進度は更に落ちるが、英語の学習(hearing, reading)を兼ね英語音声＋英語字幕で視聴する
-
ひたすらスピード！速さは正義！モード
- (GitHub Copilotの提案を最大限活用し)爆速でコードを書く
- おそらく実務で要求されるのはこっちがメイン
- 限られた時間内で一定以上の成果を上げる為にはマスト
-
上記2つのモードをええ塩梅で切り替える器用さと判断力
- 日々の訓練あるのみ
- 完璧じゃなくても先週・先月・四半期前・去年よりはできるようになる
- "Don't think. feel！ It's like a finger pointing away to the moon. Don't concentrate on the finger, or you will miss all the heavenly glory." by 青3
main contains:
- environment building on Macbook Pro(Flutter1 -> Flutter3)
- Emulator setup (Android - Android Studio)
- Emulator setup (iOS - Xcode - CocoaPods)
- create a new project (first_app)
- run the app on emulator (Mainly Android 13)
- run the app on emulator (iOS 17.0)
- Dart Basics
- Flutter Basics
- Stateless Widgets
- Stateful Widgets
- Use initState()
- Separation of Data Model & UI
- Using Third-Party Packages
- Custom Fonts & Adding Icons
- Passing Callback Functions Around
- Mapping Lists to Widgets
- List>Map< type is shared among widgets
- Accessing Map values & Using type casting
- Using the Spread Operator
- Combination of columns and rows, wrapped in Expanded
- Filtering & Analyzing Lists
- Making content scrollable
- Debugging apps & Using debug mode
- Working with the Flutter DevTools
- Open DevTools in Web Browser
- Using the Flutter Widget Inspector
- Logging
- Network
- Performance (Need to run in profile mode)
- Debugger
- Other Analysis Tools(Pages)
- Open DevTools in Web Browser
- Running the app on a physical devices
- 以前(Flutter Ver.1で)Android, iPhone実機どっちもやった
- On actual Android device
- On actual iOS device
- 手持ちのiPhone Xrにて実機テスト
- プロジェクトごとにホームディレクトリにて
flutter build iosを実行 - XCode15.0.1からの実機テスト成功
- VSCodeからの実機テスト成功(こちらを優先使用)
- プロジェクトごとにホームディレクトリにて
- 手持ちのiPhone Xrにて実機テスト
- Using third package:UUID (generate unique id)
- Views
- List
- & Chart
- Implementation of Modal Overlays
- スワイプ(削除)機能の実装
- スナックバーの実装(スワイプ削除時のアンドゥ機能)
- Using Flutter Themes
- !NOT Responsi"ble"
- Flutter3はMacOS, Windows, Linux, Webブラウザも全対応だが、基本モバイルアプリ版で想定
- デバイスの向きに合わせない(特定方向に固定する)方法
- ユーザーの使用環境に応じてUIを最適化する
- デバイスの向き(縦 portrait mode・横 landscape mode)を検出
- ランドスケープモードではチャートを左、リストを右に表示する
- デバイスのサイズ(スマホ・タブレット・PC)
- ポートレートモードでも十分な幅があればチャートは左に表示
- Building Adaptive Widgets
- デバイスのOS(Android・iOS・Web)
Flutterの内部構造を理解する(TodoAppはむしろ題材)
- 開発者が直接意識するのはWidget Treeのみ
- 記述したコード→メモリ最適化→差分の比較→最終的にUI描画
- 三つのツリー構造
- Widget Tree
- Element Tree
- Render Tree
- main(runApp), build, setStateの流れを舞台裏も含め理解する
- Understanding the "key" property
- Mutating Values in Memory
- Make sense of var, final & const
- Using GridView
- Page navigation with tabs, side drawers, and stack-based navigation
- Adding beautiful animations & page transitions
- Handling and validating user input
- Connecting to backend servers by sending HTTP requests
- Using native device features like the camera
- Adding Google Maps
- Image upload
- Firebase & Firestore
- User authentication
- Push notifications - manual approach and automated
- State management solutions
- Not using StatefulWidget
- Creating original apps!
- Design
- Management
- And much more
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent