Build Native Mobile Apps With Flutter（Flutter でネイテイブモバイルアプリを構築する）
UDACITY の Flutter 無料学習コース 「Flutter でネイティブモバイルアプリを構築する」を学んだ際の覚書です。
LESSON 1 The Flutter Framework
Flutter 開発環境の準備から行います。
全24回の講義の内、5回のプログラム演習があります。演習では、単位変換アプリの各機能を徐々に構築して行きます。
演習用のプログラムは、githubで公開(リンク切れ https://github.com/flutter/udacity-course.git)されています。演習前のソースコードと模範解答のソースコードが、それぞれコミットされていますので、自分でプログラムを下記、正解と答え合わせする形で進めます。
プログラム演習項目
10. Flutter Widget を探索する
Android Studioをセットアップしたことを確認します。
Flutterプラグインがインストールされていることを確認します。
13. 独自のカテゴリ Widget のコーディング
既存のFlutterウィジェットを使用して、カスタムカテゴリウィジェットを作成します。
ウィジェットを好みに合わせてカスタマイズします。
15. 単位変換 AppBar とカテゴリールートのコーディング
アプリのホーム画面を作成します。
カテゴリのリストビューを作成します。
19. 単位変換のコードナビゲーション
単位変換画面を作成します。現在、この画面には、いくつかの模擬ユニットのみが表示されています。
カテゴリをタップすると、カテゴリ固有のルートに移動します。このルートでは、単位変換画面に移動します。
22. Widget を Stateful にする
CategoryRoute と ConverterRoute を StatefulWidgets にします。視覚的には何も変わっていません。
LESSON 2 Building Interactive Apps
LESSON 1 に引き続き、単位変換アプリの機能を実装して行きます。
全26回の講義の内、7回のプログラム演習があります。
プログラム演習項目
9. 単位変換に対話機能を追加する
ユーザーが金額をある単位から別の単位に変換できるように、ユーザー入力を追加します。
11. 背景のコーディング
背景ウィジェットを使用して、ナビゲーションをよりスムーズにします。
13. ランドスケープビューのコーディング
RenderFlex例外を削除します。
アプリが縦長モードと横長モードの両方で、またサイズの異なるデバイスで使用できることを確認します。
17. 単位変換に実際の単位を追加する
JSONファイルアセットによって提供される実際の単位変換を使用します。
20. カスタムアイコンとフォントを追加する
カスタムアイコンとフォントを追加して、アプリをパーソナライズします。
22. Flutter Currency Converter APIを追加する
APIによって提供されるリアルタイムの単位変換を組み込みます。
24. エラー処理を追加する
APIにアクセスできない場合にエラーUIを表示します。
リンク集（Flutter Resources）
| リンク | 内容 |
|---|---|
| Documentation: https://firebase.google.com/docs/hosting/ | Flutter SDK の公式ドキュメント |
| Github: https://github.com/flutter/flutter | Flutter のソースコード |
| StackOverflow: https://stackoverflow.com/questions/tagged/flutter | Flutter の Q&A |
| Gitter: https://gitter.im/flutter/flutter | Flutter コミュニティ |
| Effective Dart Guide: https://www.dartlang.org/guides/language/effective-dart | Dart 開発ガイド |
| Dart Tips: https://www.dartlang.org/resources/dart-tips | Dart の使い方集 |
| Flutter FAQ: https://flutter.io/faq/ | Flutter FAQ |
| Flutter Rendering: https://www.youtube.com/watch?v=UUfXWzp0-DU | Google Tech Talk, May 5th, 2016, Flutter’s Rendering Pipeline |
| Flutter Engine: https://github.com/flutter/engine/wiki | Flutter Engine ソースコード |
| Hot Reload: https://flutter.io/hot-reload/ | ホットリロードの解説 |
| Flutter Inspector: https://flutter.dev/docs/development/tools/devtools/inspector | Dart アプリのプロファイル方法 |
| Dart Style Guide: https://www.dartlang.org/guides/language/effective-dart/style | Dart プログラムのスタイルガイド |
| Flutter Widgets: https://flutter.io/widgets/ | Widgets カタログ |
| Flutter Gallery Android App: https://play.google.com/store/apps/details?id=io.flutter.demo.gallery (2024/1/15 リンク切れ) | Flutter Gallery Android アプリ |
| Flutter Layout: https://flutter.io/tutorials/layout/ | Flutter のレイアウト解説 |
| Material: https://material.io | マテリアルデザイン 学習教材 |
| Icons: https://thenounproject.com | Flutter アイコン集 |
| Images: https://unsplash.com | 画像集 |
| Fonts: https://fonts.google.com | Google フォント集 |
| Google APIs: https://pub.dartlang.org/packages/googleapis | Google API ドキュメント |
| Async and Futures: https://www.dartlang.org/tutorials/language/futures | Dart Asynchronous programming: futures, async, await 解説 |
| Testing: https://flutter.io/testing/ | Flutter テスト解説 |