140: 各画面遷移の管理単位（Navigator）毎のGlobalKeyと「ShellRoute」の設定をしよう

Flutter中級編４【質問対応有り版】

【本編・第１章】オープニング

001: 【重要・必ずご一読願います】この講座のスライド解説資料と受講に際してのご留意事項について
001-2: 【重要】ご質問頂く際のご留意事項（必ずご一読願います）
002: オープニング（本講座で作るアプリと習得できるスキルのご紹介「TODOアプリ」＋講座内容にご満足頂けなかった場合の返金方法について）） (12:51)
002-2: 【重要】Flutter3.16以降「Material3」が標準仕様になったことに伴う留意点 (2:53)
003: ＜資料＞今回作るアプリの設計図（TODOアプリ）
004: 今回作るアプリ（TODOアプリ）の設計図を書こう (6:31)

【本編・第２章】リソースの設定と設計の仕組みの構築をしよう

005: Android Studioで今回作るアプリのプロジェクトを作ろう (4:20)
006: 【解説】プロジェクト作成画面で「web」を選択し忘れた場合の対処法（既存のプロジェクトをweb対応させる方法） (1:28)
007: ＜資料＞今回のアプリで使うデータ用のDartファイル
008: 今回のアプリで使うデータ用のDartファイルをプロジェクトに追加しよう (4:41)
009: アプリ全体に共通する部分とホーム画面を構成する３画面（Page）のDartファイルを作成しよう (4:54)
010: 【解説】UIに関する設定項目を一元管理する考え方「Single source of truth of styling」とは (3:10)
011: 画面スタイル管理用のDartファイルを作成し３画面の背景色を設定しよう (4:59)
012: 設計の仕組みを構築しよう（①：ViewModel層・Model層のクラスファイル作成） (3:19)
013: 【解説】なぜ「みんプロ式」の講座では設計に「provider」パッケージを使っているのか (3:10)
014: 設計の仕組みを構築しよう（②：DIの仕組みの設定） (4:28)

【本編・第３章】FlutterのWeb対応とレスポンシブデザインの基礎を身につけよう

015: 【解説】FlutterのWeb対応について（スマホアプリからWebアプリ・PWAへ） (8:27)
015-2: 【解説】Flutter Webのオフラインデバッグの方法（2022年2月時点ではまたデフォルトでオフラインデバッグ対応ができていない） (7:30)
016: 【解説】なぜFlutterはなぜWeb「サイト」作成に適していないのか (5:50)
016-2: 【解説】Flutter Webの描画（レンダリング）の仕組み（２つの仕組みと他のプラットフォームとの違い） (13:24)
017: 【解説】レスポンシブ（responsive）とアダプティブ（adaptive）の違いとは (7:46)
018: 画面サイズを特定するための閾値（ブレークポイント）を設定しよう (5:21)
019: 【解説】レスポンシブデザインを実現する「LayoutBuilder」とは (5:22)
020: 「LayoutBuilder」を使ってホーム画面をレスポンシブなデザインにしよう (6:11)

【本編・第４章】Drawerを使ってサイドメニュー画面の実装をしよう

021: [一覧画面]AppBarとFloatingActionButtonの設定をしよう (6:32)
022: 【解説】Drawerの使い方４ステップ (4:36)
023: [一覧画面]画面サイズが「大」以外の場合にDrawerからサイドメニューを開く処理を実装しよう (2:43)
024: [サイドメニュー]中身（ヘッダー・メニュー群）の実装をしよう (4:52)
025: [サイドメニュー]画面サイズが「大」以外の場合にDrawerを動的に閉じる処理を実装しよう (3:55)

【本編・第５章】アプリのライセンス表記を実装しよう

026: 【解説】アプリのライセンス表記方法３パターン (8:36)
027: アプリのライセンス表記を実装しよう（パターン①：AboutListTileコンストラクタ） (4:38)
028: アプリのライセンス表記を実装しよう（パターン②：showAboutDialogメソッド） (3:08)
029: アプリのライセンス表記を実装しよう（パターン③：showLicensePageメソッド） (3:38)

【本編・第６章】新しいタスクを追加する処理を実装しよう

030: [タスク追加画面]大枠を実装しよう (7:23)
031: [一覧画面・サイドメニュー]タスク追加画面を呼び出す処理を実装しよう (6:14)
032: [一覧画面・サイドメニュー]「SizedBox」を使ってタスク追加画面のダイアログの大きさを調整しよう (3:48)
033: [タスク内容部分]タイトル入力欄を実装しよう (5:37)
034: [タスク内容部分]「重要」チェックボックス欄を実装しよう (5:53)
035: [タスク内容部分]期日設定欄を実装しよう (2:52)
036: [タスク内容部分]DatePickerを使ってタスクの完了期日を選択する部分を実装しよう (5:16)
037: [タスク内容部分]「flutter_localizations」を使ってDatePickerを日本語化させよう (3:47)
038: [タスク内容部分]期日の表示フォーマットを日本式（yyyy/mm/dd）に変換しよう (3:48)
039: [タスク内容部分]「Chip」と「DateTime.comparedTo」メソッドを使って期限超過タスクを明示させる処理を実装しよう (4:08)
040: [タスク内容部分]タスクの詳細入力欄の実装をしよう (5:50)

【本編・第７章】これまでスルーパスしてきた「Key」とは一体何者なのか？

041: 【解説】これまでスルーパスしてきた「Key」とは一体何なのか？ (8:04)
042: 【解説】なぜ「key」が必要になるときがあるのか (14:17)
043: 【解説】Flutterの描画の仕組みは本当はどうなっているのか（Flutterのアーキテクチャ） (9:59)
044: 【解説】２種類の「Key」（「GlobalKey」と「LocalKey」）の違いとは (7:00)

【本編・第８章】TextFormFieldを使った入力チェックの実装をしよう

045: 【解説】「TextFormField」を使った入力チェックの方法３ステップ (8:52)
046: [タスク内容部分]「Form」を作成して「GlobalKey」を設定しよう（入力チェック①） (2:13)
047: [タスク内容部分]「TextFormField」を追加して入力チェックロジックを実装しよう（入力チェック②） (3:54)
048: [タスク追加画面]入力完了アイコン押下時に入力チェックを行う処理を実装しよう（入力チェック③） (7:33)
049: [タスク追加画面]新しいタスクの追加処理を設計の仕組みを使って外注しよう (4:42)
050: [タスク追加画面]「List.reduce」メソッドを使ってタスクのidの最大値を取得しよう (3:48)
051: 【解説】List.reduceメソッドで最大値を取得する方法の解説 (6:16)
052: [タスク追加画面]新しいタスクをリストに追加しよう (2:35)
053: 【解説】SnackBar（アプリ下部に表示させるアクション付きメッセージ）の使い方３ステップ (4:56)
054: SnackBarを表示させるためのトップレベル関数を実装しよう (5:47)
055: 画面サイズが「中」以上の場合は「SnackBar」の代わりに「BottomSheet」を使うようにしよう (8:06)

【本編・第９章】タスクの一覧を表示する処理を実装しよう

056: [一覧画面]画面起動時にタスクリストを取得する処理を設計の仕組みを使って外注しよう (4:49)
057: 「List.sort」メソッドを使ってタスクリストを日付順に並べ替えよう (3:46)
058-1: 【解説】List.sortメソッドの解説（①：Dartはどのソートアルゴリズムを使っているのか） (5:30)
058-2: 【解説】List.sortメソッドの解説（②：実際にどのような挙動でソートされているのか） (6:16)
059: [一覧画面]「Consumer」を使って取得したタスクリストを表示する処理を実装しよう (4:36)
060: [一覧画面]ListTileのカスタムウィジェット化と期日表記を日本式に修正しよう (3:10)
061: [一覧画面]「DateTime.comparedTo」メソッドを使って期限超過タスクの背景を赤くしよう (5:28)
062: [一覧画面]「重要」なタスクはタイトルの前にその旨を表示させる実装をしよう (5:17)
063: [一覧画面]「重要」なタスクが上に来るように並べ替える処理を設計の仕組みを使って外注しよう (2:50)
064: 「List.sort」メソッドを使って「重要」なタスクを上に来るように並べ替えよう（Listをbool型のフィールドでソートする方法） (3:32)
065: 【解説】bool型でListをソートする際には一体何が起こっているのか？ (4:47)
065-2: 【+α】重要でないタスク部分の日付が降順になってしまっている事象への対処法①（sortメソッドで複数のソート条件を使う場合） (6:19)
065-3: 【+α】重要でないタスク部分の日付が降順になってしまっている事象への対処法②（sortメソッドを使わない簡略法） (5:10)
066: タスクを表示するパーツのオーバーフロー問題を解消しよう (2:34)

【本編・第10章】タスクの完了・削除処理の実装をしよう

067: [一覧画面]タスク完了処理を行うためのRadioボタンを設置しよう (4:40)
068: [一覧画面]タスク完了処理を設計の仕組みを使って外注しよう (2:48)
069: タスク完了処理を実装しよう (3:47)
070: 「List.indexWhere」を使って更新するタスクを特定させよう（なぜ「List.indexOf」ではうまくいかなかったのか） (4:45)
071: 「List.where」を使って完了済みタスクを除外する処理を実装しよう (4:06)
072: [一覧画面]タスク完了処理終了後にSnackBarを表示しよう (1:56)
073: SnackBar（とBottomSheet）にUndo処理を追加しよう (8:27)
074: [一覧画面]SnackBarの「元に戻す」アクションから完了のUndo処理を実装しよう (5:14)
075: 【解説】なぜUndo処理がうまくいかなかったのか（Dartは原則「参照渡し」の話） (4:27)
076: Undo処理がうまくいくように更新前のタスクリストを保持する処理を実装しよう (3:39)
077: [サイドメニュー]「完了済タスクを含む」Switch切り替え処理を実装しよう (4:12)
078: [一覧画面]「List.removeAt」を使ってタスクを長押しすると削除する処理を実装しよう (5:51)

【本編・第11章】タスク編集画面の実装をしよう

079: [一覧画面]タスクをタップすると編集画面を開く処理を実装しよう (8:18)
080: [詳細画面]「Selector」と「Tuple」を使って画面の大枠を実装しよう (8:11)
081: [詳細画面]詳細画面を閉じる処理を実装しよう (4:56)
082: [タスク内容部分]タスクの詳細を表示させる実装をしよう (5:32)
083: 【解説】なぜ画面サイズが「中」以上の場合にタスクの詳細が表示できなかったのか (5:16)
084: [タスク内容部分]「GlobalKey」を使って画面サイズが「中」以上でもタスクの詳細が表示できるように修正しよう (6:58)
085: [詳細画面]編集したタスクを更新する処理を実装しよう (5:01)
086: [詳細画面]タスク編集後にリストを更新してSnackBarを表示させる処理を実装しよう (2:50)
087: [詳細画面]表示されたタスクを削除する処理を実装しよう (4:18)
088: 画面サイズ「中」以上でUndo処理をした際に詳細画面の表示を元に戻す実装をしよう (3:27)
089: [詳細画面]「FloatingActionButton.extended」を使ってタスクの完了⇔未完了処理を実装しよう (4:53)
090: [詳細画面]「FloatingActionButton」の背景を透明にする方法 (5:00)

【本編・第12章】Webあるいはデスクトップの場合はタスクをホバーするとメニューが表示されるようにしよう（Adaptiveの実装①）

091: 【解説】「MouseRegion（マウスの動きをトラックできるWidget）」とは (6:10)
092: [一覧画面]Web用のPopUpMenuButtonを設置しよう (5:12)
093: [一覧画面]「MouseRegion」を使ってマウスのホバー状況に応じてPopUpMenuButtonの表示・非表示の切り替えをしよう (4:10)
094: 【解説】なぜPopUpMenuButton#onSelectedは呼ばれなかったのか (3:00)
095: マウスがExitしてもPopUpMenuButtonのクリック処理が発動されるように修正しよう (4:09)
095-2: 【解説】Material3（Flutter3.16以降）ではListTile#trailingにサイズ指定が必要 (3:38)
096: 【解説】「kIsWeb」プロパティとPlatformクラスを組み合わせたデバイスの特定方法 (5:49)
097: [一覧画面]Webあるいはデスクトップの場合にPopUpMenuButtonが表示されるようにしよう (4:46)

【本編・第13章】スマホ・タブレットの場合はタスクをスワイプするとメニューが表示されるようにしよう（Adaptiveの実装②）

098: 【解説】「flutter_slidable」の使い方（①：スワイプしたらメニューを表示させる方法） (6:51)
099: [一覧画面]Webあるいはデスクトップ以外の場合にSlidableを使えるように処理の場合分けをしよう (4:00)
100: [一覧画面]スワイプしたらメニューを表示させる実装をしよう（dismissal属性以外のSlidableの実装） (6:29)
101: [一覧画面]「IconSlideAction」の色を設定しよう (2:45)
102: 【解説】「flutter_slidable」の使い方（②：最後までスワイプしたら要素を削除する方法：Swipe to dismiss） (2:58)
103: [一覧画面]最後までスワイプしたらタスクを削除する処理を実装しよう（「Swipe to dismiss（dismissal属性）」の実装） (3:33)
104: 【解説】なぜ「Swipe to dismiss（dismissal属性）」をする際は「key」がないとエラーになるのか (4:02)
104-2: 【補足：該当者のみ】「flutter_slidable」バージョン0.6から1.0への移行ガイド (6:46)

【本編・第14章】デスクトップでWebアプリを動かす場合にTabキーの遷移順を設定しよう（Adaptiveの実装③）

105: 【解説】Tabキー押下時のフォーカス遷移を管理する方法（Controlling traversal order） (6:30)
106: [タスク内容部分]Widgetツリー順にフォーカス遷移する実装をしよう（WidgetOrderTraversalPolicy） (1:55)
107: [詳細画面]指定順にフォーカス遷移する実装をしよう（OrderedTraversalPolicy） (5:09)

【本編・第15章】画面遷移管理パッケージ「go_router」の使い方（①：基本的な解説とサンプルアプリの説明）

108: ＜資料＞今回の講座で使うプロジェクト（スターター）
109: 今回のサンプルアプリを動かしてみよう (6:57)
110: 【解説】画面遷移管理パッケージ「go_router」とは (10:18)
111: 【解説】「Navigator」と「Router」の違いとは (7:41)
112: 【解説】「go_router」パッケージの使い方２パターン（「宣言的な」使い方と「命令的な」使い方） (6:25)

【本編・第16章】「go_router」の使い方（②：サンプルアプリを使った基本的な実装方法）

113: 「go_router」パッケージをインストールして画面遷移の家系図の設定をしよう（GoRouterインスタンスの設定） (8:25)
114: アプリ起動時に画面遷移の家系図を設定しよう（MaterailAppRouter） (2:12)
115: NormalScreenを開く処理（Navigator.push）を「context.go」に置き換えよう（①：値渡しが不要な場合） (4:45)
116: 【解説】子画面への遷移は「go」よりも「goNamed」の方がいいかもしれない (3:16)
117: 「context.go」を「context.goNamed」に置き換えよう (2:09)
118: NormalScreenを閉じる処理（Navigator.pop）を「context.goNamed」に置き換えよう (1:41)
119: 【解説】Webの場合は「replace」でもブラウザの閲覧履歴には残る (4:02)
120: 【解説】次の画面に値を渡す方法３パターン (12:43)
121: 【解説】URLパラメータとは (4:57)
122: WillPopScreenを開く処理を「context.goNamed」に置き換えよう（②-1：Pathパラメータで値渡し） (2:47)
122-2: WillPopScreenを開く処理を「context.goNamed」に置き換えよう（②-2：Queryパラメータで値渡し） (1:53)
122-3: WillPopScreenを開く処理を「context.goNamed」に置き換えよう（②-3：extraパラメータで値渡し） (2:15)
123: 【解説】「go_router」パッケージ使用上の２つの注意点（showDialogとWillPopScope） (7:44)
124: 【解説】「『page-backed』Route」と「『pageless』Route」の違い (5:24)
125: URLを付与できるようにダイアログをカスタムウィジェット化して画面遷移の家系図に組み込もう (4:44)
126: 【解説】なぜ「go_router」ではダイアログの表示がうまくいかなかったのか（「PageRoute」と「PopUpRoute」/「Route」と「Page」） (11:34)
127: 「go_router」でダイアログをうまく表示させるためのDialogPageクラスを作って家系図に組み込もう (5:16)

【本編・第17章】「go_router」の使い方（③：画面遷移時のアニメーションのカスタマイズ）

129: 【解説】画面遷移時のアニメーションをカスタマイズする方法（CustomTransitionPageとNoTransitionPage） (2:12)
130: 「CustomTransitionPage」を使って画面遷移時のアニメーションをカスタマイズしよう（FadeTransitionで） (5:19)
131: 【解説】画面遷移アニメーションの例（①：Fade（Curvesの説明含）） (1:47)
132: 【解説】画面遷移アニメーションの例（②：Slide（OffsetとTweenアニメーションの説明含）） (4:30)
133: 【解説】画面遷移アニメーションの例（③：Scale） (3:17)
134: 【解説】画面遷移アニメーションの例（④：Rotation） (2:59)

【本編・第18章】「go_router」の使い方（④：URL表記方法の変更方法）

135: 【解説】URLのパス付与方法２パターン（Path Strategy） (4:18)
136: 【解説】「flutter_web_plugins」を使うやり方はなぜダメなのか (4:14)
137: 「url_strategy」を使ってURLの表記を「パス方式（PathUrlStrategy）」に変更しよう (3:06)

【本編・第19章】「go_router」の使い方（⑤：「ShellRoute」の使い方（画面の一部を画面全体とは別に遷移管理させる方法））

138: 【解説】画面の一部（Shell）を画面全体とは別に遷移管理させるための「ShellRoute」の使い方 (8:04)
139: 画面遷移の家系図にBottomNavigationBarで遷移する各Page群も加えよう (8:22)
140: 各画面遷移の管理単位（Navigator）毎のGlobalKeyと「ShellRoute」の設定をしよう (5:23)
141: "body”部分だけ独立して遷移管理できるようにHomeScreenを修正しよう（①：childをbodyに渡す） (2:15)
142: "body”部分だけ独立して遷移管理できるようにHomeScreenを修正しよう（②：BottomNaviタップ時の処理） (8:43)
143: 遷移時に画面全体をカバーしたい場合は「parentNavigatorKey」を設定しよう (3:20)
144: アニメーションを付与させたくない画面遷移に「NoTransitionPage」を設定しよう (3:24)

【本編・第20章】「go_router」の使い方（⑥：「StatefulShellRoute」の使い方（ShellRoute内のサブRouteも別の遷移管理ができる方法））

145: 【解説】ShellRoute内のサブRouteも別の遷移管理ができる「StatefulShellRoute」の使い方 (9:19)
146: 【解説】「IndexedStack」ウィジェットとは (3:40)
147: 「ShellRoute」を「StatefulShellRoute.indexedStack」に置き換えよう (5:01)
148: HomeScreenのBottomNavigationBar部分の変更をしよう（currentIndex / onTap） (6:27)
149: 今開いているタブと同じタブをタップした際にそのタブのinitialLocationを表示できるようにしよう (4:25)

【本編・第21章】「go_router」の使い方（⑥：今回の課題アプリ（TODOアプリ）を「go_router」化しよう）

150: 「go_router」パッケージをインストールして画面遷移の家系図の設定をしよう（画面サイズ小の場合） (5:22)
151: 画面の開閉処理（Navigator.push/pop）を「context.goNamed」に置き換えよう（画面サイズ小の場合） (4:28)
152: DialogPageクラスを作って画面遷移の家系図に組み込もう（画面サイズ中以上の場合） (5:31)
153: ダイアログの開く処理を「showDialog」から「context.goNamed」に置き換えよう (2:08)
154: ライセンス表記画面（AboutDialog）を「go_router」化しよう (4:02)
155: 「url_strategy」を使ってURLの表記を「パス方式（PathUrlStrategy）」に変更しよう (3:15)
156: ＜資料＞今回のアプリの完成プロジェクト（TODOアプリ）

【本編・第22章】エンディング

157: エンディングメッセージ (5:59)
158: 受講生特典（講座割引クーポン）

【補足セクション①】Webアプリの配信（deploy）方法（①：GitHub Pages）

F101: 【解説】「GitHub Page」を使ってWebアプリを配信（deploy）する方法 (5:34)
F102: 【未済の方のみ】Gitのインストール方法（Windowsのみ） (1:56)
F103: 【未済の方のみ】Githubのアカウント開設方法 (3:47)
F104: 【解説】GitとGitHubを使ったバージョン管理の基本的な仕組み (6:45)
F105: プロジェクト内にGitレポジトリを作成しよう (2:53)
F106: GitHub上に新規レポジトリを作成しよう (2:21)
F107: ＜資料＞次のレクチャーで使用するGitコマンド
F108: 作成したGitHubレポジトリにWebアプリのリリースビルドをアップロードしよう（commitとpush） (5:12)
F109: WebアプリがGitHub Pageにホスティングできているか確認しよう (2:09)
F110: WebアプリのアップデートをGithub Pageに反映させよう (2:48)
F111: 【+α】「username.github.io」以外の名前でGitHubレポジトリを作成する場合の注意点 (4:35)

【補足セクション②】Webアプリの配信（deploy）方法（②：Firebase Hosting）

F201: 【解説】「Firebase Hosting」を使ってWebアプリを配信（deploy）する方法 (3:57)
F202: 【未済の方のみ】Firebaseのアカウント開設方法 (3:08)
F203: Node.jsをインストールしよう（npmコマンドラインツールのインストール） (1:36)
F204: npmから「Firebase CLI（Firebaseのコマンドラインツール）」をインストールして、ログインしてみよう (2:12)
F205: Firebaseコンソールからプロジェクトを作成しよう (1:14)
F206: 「Firebase CLI」を使って作成したFirebaseプロジェクトを初期化しよう (3:48)
F207: Webアプリのリリースビルドを作成してFirebaseにアップロードしよう (1:11)
F208: WebアプリがFirebaseにホスティングできているか確認しよう (2:08)

【補足セクション③】Flutter2.5から標準装備されたコード解析パッケージ「flutter_lints」について

F301: 【解説】Flutter2.5から標準装備されたコード解析パッケージ「flutter_lints」とは何か（Linterの仕組み） (4:04)
F302: 「analysys_options.yaml」ファイルから不要な解析ルールの除外の仕方 (2:06)
F303: 「const」がつけられる箇所に「const」をつけよう（prefer_const_constructors） (2:08)
F304: 【解説】なぜ定数名に大文字を使わない方がよいのか(「PREFER using lowerCamelCase for constant names」の理由） (5:07)
F305: 【解説】なぜ「Container」を回避したほうがよいのか (1:08)
F306: 【解説】なぜforEach関数を「関数リテラル（literal）」と一緒に使うとLinterチェックに引っかかるのか (4:31)

140: 各画面遷移の管理単位（Navigator）毎のGlobalKeyと「ShellRoute」の設定をしよう

このレクチャーはご覧になれません。

既に登録済の場合はログインが必要になります。.

コースに登録する