自動再生
オートコンプリート
1つ前のレクチャー
このレクチャーを完了し次に進む
「go_router」を使ったFlutterにおける高度な画面遷移管理入門【質問対応無し版】
【序章】オープニング
001: 【重要・必ずご一読願います】この講座のスライド解説資料と受講に際してのご留意事項・返金対応等について
002: <資料>今回の講座で使うプロジェクト(スターター)
003: オープニング+今回のサンプルプロジェクトの説明 (8:09)
【第1章】画面遷移管理パッケージ「go_router」の基本的な解説
005: 【解説】画面遷移管理パッケージ「go_router」とは (10:18)
006: 【解説】「Navigator」と「Router」の違いとは (7:41)
007: 【解説】「go_router」パッケージの使い方2パターン(「宣言的な」使い方と「命令的な」使い方) (6:25)
【第2章】「go_router」を使った画面遷移の基本的な実装方法
008: 「go_router」パッケージをインストールして画面遷移の家系図の設定をしよう(GoRouterインスタンスの設定) (8:25)
009: アプリ起動時に画面遷移の家系図を設定しよう(MaterailAppRouter) (2:12)
010: NormalScreenを開く処理(Navigator.push)を「context.go」に置き換えよう(①:値渡しが不要な場合) (4:45)
011: 【解説】子画面への遷移は「go」よりも「goNamed」の方がいいかもしれない (3:16)
012: 「context.go」を「context.goNamed」に置き換えよう (2:09)
013: NormalScreenを閉じる処理(Navigator.pop)を「context.goNamed」に置き換えよう (1:41)
014: 【解説】Webの場合は「replace」でもブラウザの閲覧履歴には残る (4:02)
015: 【解説】次の画面に値を渡す方法3パターン (12:43)
016: 【解説】URLパラメータとは (4:57)
017: WillPopScreenを開く処理を「context.goNamed」に置き換えよう(②-1:Pathパラメータで値渡し) (2:47)
018: WillPopScreenを開く処理を「context.goNamed」に置き換えよう(②-2:Queryパラメータで値渡し) (1:53)
019: WillPopScreenを開く処理を「context.goNamed」に置き換えよう(②-3:extraパラメータで値渡し) (2:15)
020: 【解説】「go_router」パッケージ使用上の2つの注意点(showDialogとWillPopScope) (7:44)
021: 【解説】「『page-backed』Route」と「『pageless』Route」の違い (5:24)
022: URLを付与できるようにダイアログをカスタムウィジェット化して画面遷移の家系図に組み込もう (4:44)
023: 【解説】なぜ「go_router」ではダイアログの表示がうまくいかなかったのか(「PageRoute」と「PopUpRoute」/「Route」と「Page」) (11:34)
024: 「go_router」でダイアログをうまく表示させるためのDialogPageクラスを作って家系図に組み込もう (5:16)
【第3章】画面遷移時のアニメーションのカスタマイズ方法
025: 【解説】画面遷移時のアニメーションをカスタマイズする方法(CustomTransitionPageとNoTransitionPage) (2:12)
026: 「CustomTransitionPage」を使って画面遷移時のアニメーションをカスタマイズしよう(FadeTransitionで) (5:19)
027: 【解説】画面遷移アニメーションの例(①:Fade(Curvesの説明含)) (1:47)
028: 【解説】画面遷移アニメーションの例(②:Slide(OffsetとTweenアニメーションの説明含)) (4:30)
029: 【解説】画面遷移アニメーションの例(③:Scale) (3:17)
030: 【解説】画面遷移アニメーションの例(④:Rotation) (2:59)
【第4章】URL表記方法の変更方法
031: 【解説】URLのパス付与方法2パターン(Path Strategy) (4:18)
032: 【解説】「flutter_web_plugins」を使うやり方はなぜダメなのか (4:14)
033: 「url_strategy」を使ってURLの表記を「パス方式(PathUrlStrategy)」に変更しよう (3:06)
【第5章】「ShellRoute」の使い方(画面の一部を画面全体とは別に遷移管理させる方法)
034: 【解説】画面の一部(Shell)を画面全体とは別に遷移管理させるための「ShellRoute」の使い方 (8:04)
035: 画面遷移の家系図にBottomNavigationBarで遷移する各Page群も加えよう (8:22)
036: 各画面遷移の管理単位(Navigator)毎のGlobalKeyと「ShellRoute」の設定をしよう (5:23)
037: "body”部分だけ独立して遷移管理できるようにHomeScreenを修正しよう(①:childをbodyに渡す) (2:15)
038: "body”部分だけ独立して遷移管理できるようにHomeScreenを修正しよう(②:BottomNaviタップ時の処理) (8:43)
039: 遷移時に画面全体をカバーしたい場合は「parentNavigatorKey」を設定しよう (3:20)
040: アニメーションを付与させたくない画面遷移に「NoTransitionPage」を設定しよう (3:24)
【第6章】「StatefulShellRoute」の使い方(ShellRoute内のサブRouteも別の遷移管理ができる方法)
041: 【解説】ShellRoute内のサブRouteも別の遷移管理ができる「StatefulShellRoute」の使い方 (9:19)
042: 【解説】「IndexedStack」ウィジェットとは (3:40)
043: 「ShellRoute」を「StatefulShellRoute.indexedStack」に置き換えよう (5:01)
044: HomeScreenのBottomNavigationBar部分の変更をしよう(currentIndex / onTap) (6:27)
045: 今開いているタブと同じタブをタップした際にそのタブのinitialLocationを表示できるようにしよう (4:25)
【終章】エンディング
046: エンディングメッセージ (3:29)
Teach online with
035: 画面遷移の家系図にBottomNavigationBarで遷移する各Page群も加えよう
このレクチャーはご覧になれません。
既に登録済の場合は
ログインが必要になります。
.
コースに登録する