Flutter入門講座 Lesson 2 (Udacity)

Build Native Mobile Apps with Flutter
2週間でFlutterの基礎を学べるオンライン講座です。Google I/O 2018でのFlutter Beta 3の発表に合わせてUdacityの講座も開講になりました。
https://www.udacity.com/course/build-native-mobile-apps-with-flutter--ud905

無料のコースなのでUdacityのアカウントを持っていれば上のリンクを開いて「START FREE COURSE」をクリックするだけですぐに利用開始できます。まだアカウントを持っていない方はアカウントの作成から始めてください。

この記事はLesson 2の概要です

Lesson 1はこちら
> Flutter入門講座 Lesson 1 (Udacity)
> https://qiita.com/aoinakanishi/items/b384e5a88ea4f6dc4b3d

【参考】
Flutter Beta 3の発表
https://qiita.com/aoinakanishi/items/cf8376bb1780e1c48553

# Lesson 2: Building Interactive Apps
## 1. イントロダクション

Leeson2ではアプリにインタラクティブな機能を追加します。
* マテリアルデザインでUIをカスタマイズする方法
* テキスト入力＆ジェスチャー
* レスポンシブデザイン（異なるスクリーンサイズへの対応）
* アセットからデータを読む方法
* API経由でデータを取得する方法

このレッスンでもユニットコンバーターアプリを使いますが終了すると簡単に独自アプリを作れるようになります。


## 2. マテリアルデザイン

<img width="871" alt="Screen Shot 0030-05-11 at 18.48.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/ea05e599-b8de-0bd4-a83e-82736f2d4792.png">

<img width="863" alt="Screen Shot 0030-05-11 at 18.48.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/2a4a8812-62db-2b63-51b3-9c3b83c4e1f8.png">

Flutterでは使用目的に応じたたくさんのパーツを用意しています

## 3. プラットフォームとテーマ

下記のようにプラットフォームに合わせた出し分けを簡単にすることが出来る

<img width="863" alt="Screen Shot 0030-05-11 at 18.51.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/a0000142-d235-f9a1-9b4e-9bf79a2f4caa.png">

<img width="867" alt="Screen Shot 0030-05-11 at 18.51.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/eab6fa2f-7e41-a3a2-b33d-580942e83867.png">

<img width="851" alt="Screen Shot 0030-05-11 at 18.52.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/ebbc49db-413e-9df7-120c-ad27b642b66e.png">

## 4. クイズ: プラットフォームとテーマ

マテリアルデザインやWidgetに関する簡単な選択形式のクイズ

## 5. 色

色の変更の仕方を教えてくれる

## 6. クイズ: 色指定の書き方

カラー指定の書き方が正しいかどうかのクイズ

参考
https://docs.flutter.io/flutter/material/Colors-class.html

## 7. ColorSwatches

例えば、同じレイアウトだけと画面ごとに色味を変えたい時とかに使いやすい「色見本セット」がColorSwatchesで、パーツごとに色を指定しなくても画面毎orパーツ毎にColorSwatchesを指定するだけで一括で色を変更できる便利なやつ

<img width="873" alt="Screen Shot 0030-05-11 at 19.18.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/e8da1561-b43e-7905-b85d-17b6549660c6.png">

<img width="861" alt="Screen Shot 0030-05-11 at 19.18.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/f524ce00-9453-b780-fa32-59e0615e0fa0.png">

<img width="876" alt="Screen Shot 0030-05-11 at 19.19.11.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/f15b5eaa-04d7-3a69-0648-d459eab6148e.png">


## 8. テキスト入力

ユーザーからのテキスト入力を受け取ったり、入力値にバリデーションかけたり、色々出来るという説明

<img width="874" alt="Screen Shot 0030-05-11 at 19.21.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/2e9d8039-5711-0f9f-0c47-d96c01674a7b.png">

<img width="869" alt="Screen Shot 0030-05-11 at 19.21.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/9473a045-5a1a-527b-fb14-49b3cf8549fb.png">

<img width="865" alt="Screen Shot 0030-05-11 at 19.22.29.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/57d329b0-5b79-d944-ed02-a5b4f07932e4.png">


## 9. クイズ: ユニットコンバーターでユーザー入力を受け付ける

ユーザーから受け取った値を使ったアプリを作ってみる課題

コードベース
https://github.com/flutter/udacity-course/tree/master/course/06_input/task_06_input

## 10. ジェスチャー

タップ、ドラッグ、スクロールなどのユーザージェスチャー操作の受け取り方などなど、GestureDetectorで囲むだけで簡単に追加できる

<img width="856" alt="Screen Shot 0030-05-11 at 19.28.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/acfae48c-5859-eff8-8088-6514a76f6cd0.png">


## 11. クイズ: Code the Backdrop

Backdropウィジェットを使ってみる課題
https://github.com/flutter/udacity-course/tree/master/course/07_backdrop/task_07_backdrop

## 12. レスポンシブデザイン

スマホの縦向き横向き、画面サイズを判定してレイアウトを変える方法

<img width="837" alt="Screen Shot 0030-05-11 at 19.37.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/448ffff4-22d5-3984-bbff-1fc5ed133a3b.png">

## 13. クイズ: 横向き画面対応

レスポンシブデザインを追加する課題
https://github.com/flutter/udacity-course/tree/master/course/08_responsive/task_08_responsive

## 14. パッケージ, プラグイン, Pubspec.yaml

パッケージ・・・アプリ間で簡単にシェアできるライブラリ（FlutterとDartパッケージの療法を使用可能）

<img width="870" alt="Screen Shot 0030-05-11 at 19.39.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/1bf9152b-3c97-748e-0866-c66d68d4cd70.png">

<img width="866" alt="Screen Shot 0030-05-11 at 19.41.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/f1248aa6-c05f-ab4b-bbdc-4aa71e49b782.png">

pubspec.yamlの書き方と書き換えたあとのパッケージの更新手順を紹介

> flutter packages get

いろんな便利なパッケージがあるので実装を始める前に検索することをおすすめします

## 15. クイズ: パッケージの判定

設問とパッケージ名を一致させるクイズ

## 16. ファイルアセット

AssetBundle, rootBundle, DefaultAssetBundleの使い方、jsonファイルを読み込んでパースする手順を解説

<img width="901" alt="Screen Shot 0030-05-11 at 20.53.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/8c2f45fb-9ef3-43ee-f1bd-b8045c8cf6a4.png">


## 17. クイズ: ユニットコンバーターに実際の値を追加

Assetからjsonファイルを読み込んでユニットコンバーターの値に適用する課題

## 18. 画像とアイコンアセット

アイコンアセットたくさんあるという話と、その読み込み方、画像の拡縮方法等を説明

<img width="883" alt="Screen Shot 0030-05-11 at 20.57.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/104874ac-4649-a2eb-2e6a-9842de34fbef.png">

アイコン一覧
https://docs.flutter.io/flutter/material/Icons-class.html

## 19. フォントアセット

アセットにフォントを配置して設定する手順の解説。

<img width="907" alt="Screen Shot 0030-05-11 at 21.18.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/d9e90a6f-4471-fbaa-272e-196356de94b7.png">

## 20. クイズ: カスタムアイコンとフォントを追加

カスタムアイコンとフォントを追加してアプリをカスタマイズする課題

https://github.com/flutter/udacity-course/tree/master/course/10_icons_fonts/task_10_icons_fonts

## 21. アセットが無い? APIを使おう!

HTTPリクエストでAPIから実行結果を受け取ったり画像の取得を出来ます。非同期処理も簡単に出来る

<img width="867" alt="Screen Shot 0030-05-11 at 23.26.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/73488692-f2c5-02c2-b69b-41c5cb50a6c8.png">

Google APIs
https://pub.dartlang.org/packages/googleapis
Async and Futures
https://www.dartlang.org/tutorials/language/futures

## 22. クイズ: 為替変換APIを追加する

為替変換APIを使用してアプリを実装する課題
https://github.com/flutter/udacity-course/tree/master/course/11_api/task_11_api

## 23. エラーハンドリング

エラーハンドリングについて解説
* インターネット接続が切れた
* 為替サーバーがダウンしている
* 為替サーバーに認証が必要
* APIの入力値に問題あり

<img width="912" alt="Screen Shot 0030-05-11 at 23.31.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/129712/7856bf59-3ccc-5f75-eada-0b9d5d05b4d5.png">

## 24. クイズ: エラーハンドリングを追加

エラー発生時にエラーということを伝えるUIを実装する課題

https://github.com/flutter/udacity-course/tree/master/course/12_error/task_12_error

## 25. まとめ

ここまででFlutterの基礎を学びました。ステートフルなユニットコンバーターアプリを作り、API経由でリアルタイムの値を取得することが出来、スムーズなナビゲーション、レスポンシブデザイン。マテリアルコンポーネントを使った既存の素材をアプリの作り方を学びました。アイコンや色などカスタマイズ出来ることも多くあります。

これで基本的なアプリケーションの開発はすることが出来ますが、この他にアニメーションの実装、サードパーティAPIの利用。使いやすいデザインテーマの作成、ローカリゼーションなど出来ることはまだまだたくさんあります。

この講座を楽しんで頂けたのであれば幸いです。

## 26. Flutterリソース
Documentation: https://docs.flutter.io/
Github: https://github.com/flutter/flutter
StackOverflow: https://stackoverflow.com/questions/tagged/flutter
Gitter: https://gitter.im/flutter/flutter
Effective Dart Guide: https://www.dartlang.org/guides/language/effective-dart
Dart Tips: https://www.dartlang.org/resources/dart-tips
Flutter FAQ: https://flutter.io/faq/
Flutter Rendering: https://www.youtube.com/watch?v=UUfXWzp0-DU
Flutter Engine: https://github.com/flutter/engine/wiki
Hot Reload: https://flutter.io/hot-reload/
Flutter Inspector: https://dart-lang.github.io/observatory/
Dart Style Guide: https://www.dartlang.org/guides/language/effective-dart/style
Dart Observatory: https://dart-lang.github.io/observatory/
Flutter Widgets: https://flutter.io/widgets/
Flutter Gallery App Code: https://github.com/flutter/flutter/tree/master/examples/flutter_gallery
Flutter Gallery Android App: https://play.google.com/store/apps/details?id=io.flutter.gallery
Flutter Layout: https://flutter.io/tutorials/layout/
Material: https://material.io
Icons: https://thenounproject.com
Images: https://unsplash.com
Fonts: https://fonts.google.com
Google APIs: https://pub.dartlang.org/packages/googleapis
Async and Futures: https://www.dartlang.org/tutorials/language/futures
Testing: https://flutter.io/testing/