1. Flutterとは何か
1.1. Flutter Showcase
1.2. Flutter Gallery
1.3. Googleが作った次世代UIフレームワーク！
1.3.1. Material Design をもっと展開させたい
1.3.2. Androidでは成功したけど、iOSとかPCはどうする？
1.3.3. ついでにWebアプリにも
1.3.4. いまの技術じゃできないよ😭
1.3.5. UIフレームワークを再発明
1.4. クロスプラットフォーム！
1.4.1. 対応プラットフォーム
1.4.1.1. モバイル
1.4.1.2. Web
1.4.1.2.1. Webは仕組みが違うので、Flutter Webと呼ばれてる
1.4.1.3. PC (ベータ版)
1.4.1.4. 組み込み (ベータ版)
1.4.2. プラットフォームに依存しない仕組み
1.4.2.1. 画面に直接描画
1.4.2.1.1. Skia Graphics Engine
1.4.2.2. ネイティブそっくりのコンポーネントを搭載
1.4.2.2.1. ボタン
1.4.2.2.2. テキスト
1.4.2.2.3. テキストフィールド
1.4.2.2.4. …
1.4.2.3. 各OS標準コンポーネントが不要になる
1.4.2.4. ついでにブラウザギャップも吸収する
1.5. オープンソース！無料！
2. Flutterの特徴
2.1. Flutter.Dev
2.2. DartPad
2.3. モダンなUIフレームワーク！
2.3.1. デザインシステム
2.3.1.1. テンプレートと仕組みが用意されている
2.3.1.2. Material
2.3.1.2.1. Compornent
2.3.1.2.2. Icon
2.3.1.2.3. Theme
2.3.1.3. Cupertino
2.3.1.4. Icon
2.3.2. レスポンシブ&アダプティブ
2.3.2.1. 基本的には Material Design がうまくやってくれる
2.3.2.2. プラットフォーム判定
2.3.2.3. デバイス判定
2.3.2.4. ブラウザ判定
2.3.2.5. 画面サイズ取得
2.3.2.6. セーフエリア取得
2.4. モダンな開発フレームワーク！
2.4.1. Pub.dev
2.4.1.1. Unityのアセットストア的なやつ
2.4.1.2. GitHubでソース公開されてる
2.4.1.3. フォークしてカスタマイズ可能
2.4.2. 宣言的UI
2.4.2.1. 命令的UI
2.4.2.1.1. 従来のやり方
2.4.2.1.2. イベントリスナーでデータ(状態)を受け取る
2.4.2.1.3. イベント毎に命令して、UIを変更する
2.4.2.1.4. 命令の順番がズレるとバグが起きる
2.4.2.1.5. フロントエンドだと非同期処理が多くて破綻する…
2.4.2.1.6. そうだ！状態とUIをセットで考えよう！
2.4.2.1.7. 宣言的UI誕生！！
2.4.2.2. それってどういうもの？
2.4.2.2.1. チャットアプリの宣言的UI
2.4.2.2.2. user=null → ログイン画面を表示
2.4.2.2.3. user='たかし' → ホーム画面を表示
2.4.2.2.4. room='ほにゃらら' → ほにゃららルーム画面を表示
2.4.2.2.5. ...
2.4.3. オブジェクト指向言語 Dart
2.4.3.1. Java / C#ライク
2.4.3.2. JavaScriptの複雑さを取り除いた
2.4.3.3. 学習コストはほぼゼロ
2.4.3.4. スタイリングもロジックもDartで
2.4.4. ホットリロード
2.4.4.1. 再生中にコードを変更できる
2.4.4.2. トライ&エラーしやすい
2.4.5. 非同期処理が楽
2.4.5.1. UIをロックしない
2.4.5.2. 非同期を宣言しておけば、後は良きにしてくれる
2.4.5.2.1. Future
2.4.5.3. バックエンドのプッシュも宣言しておけば、後は良きに
2.4.5.3.1. Stream
2.5. ネイティブのパフォーマンス！
2.5.1. ネイティブアプリと比較して…
2.5.2. ARMマシンコードに変換される = ネイティブパフォーマンス。らしい
2.5.3. 体感は 50%くらいのパフォーマンス
2.5.3.1. 最適化の余地はある
2.5.4. Flutter Web はちょっと遅いかも
2.5.5. 爆速じゃないけど、メリットを考えると十分
2.6. インストール&セットアップが簡単
2.6.1. Flutter SDK
2.6.2. Android Studio
2.6.3. VS code
2.6.4. flutter doctor でSDK診断してくれる
2.6.5. SDKのバージョン指定できる
2.7. クラウドが手軽！
2.7.1. バックエンドを気にしなくていい
2.7.2. GCP、Firebase
2.7.3. どちらもGoogle
2.7.4. 標準搭載レベルの手厚いサポート
2.7.5. 最近、AWS AmplifyもFlutterに対応
2.8. 新しく追加されたFlutter Web
2.8.1. 2021年3月のFlutter2.0リリース版に統合
2.8.2. HTML/JSで書き出される
2.8.3. SPA（Single Page Application）を作れる
2.8.4. PWA（Progressive Web Apps）を作れる
2.8.5. Webassembly + Skia で直接 Canvas に描画
2.8.6. DOMを直接操作する方法もある
2.8.7. Firebase Hosting で簡単にサイトを公開できる
3. Flutterを始めよう！！
3.1. オンライン教材
3.2. Get Started
3.3. Udemy with the Google Flutter team
3.4. AnimatedBuilder (Flutter Widget of the Week)
3.5. ユーザーグループ
3.6. Flutter Japan User Group
3.7. ブログ
3.8. Monoさん Flutterの効率良い学び方
4. Flutter最新トレンド
4.1. さようならNullエラー Null Safety
4.2. 状態管理の決定版 Riverpod
4.3. 画面遷移も宣言的に Navigator 2.0
5. Flutterのココがスゴイ！
5.1. Flutter Memoアプリ
5.2. Flutter Drawアプリ
5.3. モバイルやWeb技術を知らなくても作れる
5.3.1. HTML/JSを書かなくて良い
5.3.2. ターミナルコマンドを叩かなくて良い
5.3.3. 実行ボタンでアプリやブラウザが起動
5.3.4. ネット記事の鮮度が高い
5.4. Material Designさん、懐が広い
5.4.1. 自由度が高い
5.4.2. Materialっぽさを無くしてもOK
5.4.3. カスタマイズしてもレイアウトが崩れにくい
5.4.4. レイアウト次第でカッコよくもダサくもなる
5.4.5. オープンソースなので、コードを書き換えてOK
5.5. Widgetの概念がわかりやすい
5.5.1. 表示オブジェクトクラスの基底
5.5.2. FlashでいうMovieClip的なもの
5.5.3. ゼロベースで機能やスタイルを追加できる
5.5.4. 入れ子にしても重くならない
5.6. やりたいことに集中できる
5.6.1. DartはUnityを使った人なら馴染みやすい
5.6.2. Dartで完結していて、とても素直
5.6.3. クロスプラットフォームでハマるところが少ない
5.7. 再利用性が高い
5.7.1. 再利用しやすい設計思想
5.7.2. 欲しいコンポーネントはだいたい探せばある
5.7.3. 組み合わるだけで、アプリのプロトタイプになる
5.8. クラウドの便利さを実感できる
5.8.1. FlutterよりもFirebaseがスゴい説
5.8.2. ユーザー認証やデータベース導入が楽
5.8.3. バックエンドを外注している気分
5.8.4. ネットワークなしでも便利
5.8.5. ローカルにキャッシュしてくれる
6. Flutterのココがいまいち…
6.1. 宣言的UIに慣れるまで時間がかかる
6.2. 日本語の情報が少ない
6.3. ビジュアルエディターがない
6.3.1. FlutterStudioとか
6.3.2. XD Flutterプラグインとか
6.4. 独自デザイン、独自コンポーネントは面倒くさい
6.5. アニメーションさせにくい
6.5.1. Tweenはできる
6.5.2. シーケンスやモーションパスみたいなのは難しい
6.6. Webフロントエンドとしてはまだまだ弱い
6.6.1. 読み込みから表示までに時間がかかる (2MB)
6.6.2. Unityとかに比べたら圧倒的に早い
6.6.3. テキストまわりの処理があやしい
6.6.4. モバイルの作法から外れるので独自実装になりがち
6.6.5. バックエンドとの相性が不明
6.7. アップデートのキャッチアップが大変
6.7.1. 2021年3月 Flutter2.0 リリース
6.7.2. 2021年5月 Flutter2.2 リリース