Build Native Mobile Apps With Flutter(Flutter でネイテイブモバイルアプリを構築する)

1月 15, 2024

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/flutterFlutter のソースコード
StackOverflow: https://stackoverflow.com/questions/tagged/flutterFlutter の Q&A
Gitter: https://gitter.im/flutter/flutterFlutter コミュニティ
Effective Dart Guide: https://www.dartlang.org/guides/language/effective-dartDart 開発ガイド
Dart Tips: https://www.dartlang.org/resources/dart-tipsDart の使い方集
Flutter FAQ: https://flutter.io/faq/Flutter FAQ
Flutter Rendering: https://www.youtube.com/watch?v=UUfXWzp0-DUGoogle Tech Talk, May 5th, 2016, Flutter’s Rendering Pipeline
Flutter Engine: https://github.com/flutter/engine/wikiFlutter Engine ソースコード
Hot Reload: https://flutter.io/hot-reload/ホットリロードの解説
Flutter Inspector: https://flutter.dev/docs/development/tools/devtools/inspectorDart アプリのプロファイル方法
Dart Style Guide: https://www.dartlang.org/guides/language/effective-dart/styleDart プログラムのスタイルガイド
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.comFlutter アイコン集
Images: https://unsplash.com画像集
Fonts: https://fonts.google.comGoogle フォント集
Google APIs: https://pub.dartlang.org/packages/googleapisGoogle API ドキュメント
Async and Futures: https://www.dartlang.org/tutorials/language/futuresDart Asynchronous programming: futures, async, await 解説
Testing: https://flutter.io/testing/Flutter テスト解説

プログラム開発

Posted by iwadjp