割引！
このクーポンは有効期限切れあるいは無効となっていますが、定価でのコースのご購入は可能です。
📢
【重要なお知らせ】みんプロ式プログラミング講座販売終了のお知らせ
AIの進展によるプログラミング学習環境の変化および当社の事業方針変更により、みんプロ式の全講座は 2026年4月末をもって新規販売を終了いたします。
詳細はこちらのアナウンスページをご覧ください。
詳細はこちらのアナウンスページをご覧ください。
新規販売終了
2026年4月末
今最も注目のアプリ開発ツール「Flutter」のより高度な機能を習得する中級編第４弾！
TODOアプリを作りながら
FlutterでWebアプリ（PWA）を作成・配信する方法
画面サイズに応じて見た目を最適化する「レスポンシブ」の基礎
使用デバイスに応じて機能面を最適化する「アダプティブ」の基礎
これまで完全スルーパスしてきた「Key」の使い方など
より実践的なアプリを作るためのスキルが習得できる脱初心者プログラム！
（30日間全額返金保証付き）
カリキュラム
【本編・第１章】オープニング
Available in
日
日
登録後
-
スタート001: 【重要・必ずご一読願います】この講座のスライド解説資料と受講に際してのご留意事項について
-
スタート001-2: 【重要】ご質問頂く際のご留意事項（必ずご一読願います）
-
プレビュー002: オープニング（本講座で作るアプリと習得できるスキルのご紹介「TODOアプリ」＋講座内容にご満足頂けなかった場合の返金方法について）） (12:51)
-
プレビュー002-2: 【重要】Flutter3.16以降「Material3」が標準仕様になったことに伴う留意点 (2:53)
-
スタート003: ＜資料＞今回作るアプリの設計図（TODOアプリ）
-
プレビュー004: 今回作るアプリ（TODOアプリ）の設計図を書こう (6:31)
【本編・第２章】リソースの設定と設計の仕組みの構築をしよう
Available in
日
日
登録後
-
プレビュー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対応とレスポンシブデザインの基礎を身につけよう
Available in
日
日
登録後
-
スタート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を使ってサイドメニュー画面の実装をしよう
Available in
日
日
登録後
【本編・第６章】新しいタスクを追加する処理を実装しよう
Available in
日
日
登録後
-
スタート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」とは一体何者なのか？
Available in
日
日
登録後
【本編・第８章】TextFormFieldを使った入力チェックの実装をしよう
Available in
日
日
登録後
-
スタート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)
【本編・第９章】タスクの一覧を表示する処理を実装しよう
Available in
日
日
登録後
-
スタート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章】タスクの完了・削除処理の実装をしよう
Available in
日
日
登録後
-
プレビュー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章】タスク編集画面の実装をしよう
Available in
日
日
登録後
-
スタート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の実装①）
Available in
日
日
登録後
-
スタート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の実装②）
Available in
日
日
登録後
-
スタート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の実装③）
Available in
日
日
登録後
【本編・第15章】画面遷移管理パッケージ「go_router」の使い方（①：基本的な解説とサンプルアプリの説明）
Available in
日
日
登録後
【本編・第16章】「go_router」の使い方（②：サンプルアプリを使った基本的な実装方法）
Available in
日
日
登録後
-
プレビュー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」の使い方（③：画面遷移時のアニメーションのカスタマイズ）
Available in
日
日
登録後
-
スタート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表記方法の変更方法）
Available in
日
日
登録後
【本編・第19章】「go_router」の使い方（⑤：「ShellRoute」の使い方（画面の一部を画面全体とは別に遷移管理させる方法））
Available in
日
日
登録後
-
プレビュー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も別の遷移管理ができる方法））
Available in
日
日
登録後
-
スタート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」化しよう）
Available in
日
日
登録後
-
スタート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章】エンディング
Available in
日
日
登録後
【補足セクション①】Webアプリの配信（deploy）方法（①：GitHub Pages）
Available in
日
日
登録後
-
スタート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）
Available in
日
日
登録後
-
スタート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」について
Available in
日
日
登録後
-
スタート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)
📢
【重要なお知らせ】みんプロ式プログラミング講座販売終了のお知らせ
AIの進展によるプログラミング学習環境の変化および当社の事業方針変更により、みんプロ式の全講座は 2026年4月末をもって新規販売を終了いたします。
詳細はこちらのアナウンスページをご覧ください。
詳細はこちらのアナウンスページをご覧ください。
新規販売終了
2026年4月末