自動再生
オートコンプリート
１つ前のレクチャー
このレクチャーを完了し次に進む
Flutter中級編１【質問対応有り版】
【本編・第１章】オープニング
001: 【重要・必ずご一読願います】この講座のスライド解説資料と受講に際してのご留意事項について
001-2: 【重要】ご質問頂く際のご留意事項（必ずご一読願います）
002: オープニング（本講座で作るアプリと習得できるスキルのご紹介「ニュースフィードアプリ」＋講座内容にご満足頂けなかった場合の返金方法について）） (6:32)
003: 【解説】現在のAndroid Studio最新版と講義動画の見え方の違いについて (5:40)
004: ＜資料＞今回作るアプリの設計図（ニュースフィード）
005: 【重要】本講座で使用するWeb通信パッケージを「Chopper」から「http」に変更したことに伴う講義動画閲覧上の注意点 (3:22)
006: 今回作るアプリ（ニュースフィード）の設計図を書こう (8:12)
【本編・第２章】アプリアイコン・ランチャースクリーン・カスタムフォントを設定しよう
007: Android Studioで今回作るアプリのプロジェクトを作ろう (5:16)
008: 「Android Asset Studio」を使ってアプリアイコン用のPNG画像を作成しよう (3:58)
008-2: アプリアイコン用の画像使用上の注意点（角丸画像はiOSで表示した際に不具合が出る） (3:41)
009: 「flutter_launcher_icons」パッケージを使ってアプリアイコンを作ろう（アプリアイコンの作り方４ステップ） (13:14)
010: 【解説】Androidのアダプティブアイコン（Adaptive Icon）とは (5:29)
011: ランチャースクリーンを作ろう（ランチャースクリーンの作り方３ステップ） (9:22)
011-2：【解説】VectorDrawableとは（ベクター画像とビットマップ（ラスタ画像）の違い） (2:36)
012: 「Google Fonts」からアプリで使うカスタムフォントを取得しよう (2:57)
013: カスタムフォントの設定をしよう (2:06)
014: アプリ全体に共通する部分（アプリのルート部分）を実装しよう (6:53)
【本編・第３章】画面の大枠とBottomNavigationの設定をしよう
015: HomeScreenとそれに属する３画面（Page）の外枠を実装しよう (7:58)
016: 「BottomNavigationBar（画面下部のナビゲーションメニュー）」の設定をしよう (10:38)
017: 【解説】マテリアルデザインにおける３種類のナビゲーション（Literal navigation） (5:59)
【本編・第４章】設計（Architecture）と状態管理（State Management）の基礎知識を身につけよう
018: 【解説】アプリの「設計」とは何か（なぜ「設計」が必要なのか） (5:33)
019: 【解説】アプリの「設計」の２大原則とは (3:32)
020: 【解説】設計パターン「MVVM（Model-View-ViewModel）」とは (8:54)
021: 【解説】FlutterにおけるViewModelの仕組み（ChangeNotifierとChangeNotifierProvider） (8:00)
021-2: 【解説】ViewModelの仕組みにおけるnotifyListenersメソッドはいつ発動させればいいのか (2:43)
022: 【解説】Google先生推奨の状態管理パッケージ「provider」とは (3:46)
023: 【解説】どういう時に状態管理を考える必要があるのか（Ephemeral StateとApp State） (2:50)
024: 【解説】Googleはなぜproviderを推奨しているのか（BLoCからproviderへ） (5:38)
025: 【解説】「provider」パッケージの背景にある「InheritedWidget」とは (6:22)
026: 【解説】「provider」パッケージの根幹にある「Provider」クラスとは (13:44)
027: 【解説】provider4.1.0から使えるようになった「Context.read / watch」について (5:13)
028：【解説】「Context.read / watch」使用上の２つの注意点（import文とジェネリクス忘れに注意） (3:38)
029: 【解説】「Consumer」と「Provider.of（context.watch）」の違いとは (9:14)
030: 【解説】「設計」に関するコーディングの指針 (5:58)
【本編・第５章】ニュース一覧画面（NewsListPage）を実装しよう
031: 【解説】より実践的な画面（UI）の構築方法（画面全体とパーツでWidgetクラスを分ける） (4:45)
032: 【解説】パーツWidgetの抽出をクラスで行う場合とメソッドで行う場合では何が違うのか (4:16)
033: 画面全体のレイアウトを作ろう（Column/Padding/Expanded/SizedBox/CircularProgressIndicator） (5:14)
034: 検索バーをカスタムウィジェットで作ろう（Card/TextField/InputDecoration） (8:15)
034-2：【解説】なぜTextFieldはStatelessWidgetの中で使っても入力した文字を更新表示してくれるのか (6:50)
034-3: 【解説】TextEditingControllerを独自に設定する場合はStatefulWidgetにする必要あり (5:15)
035: 「ValueChanged」を使って検索バーで入力した文字を呼び出し元のWidgetに通知させよう (4:40)
036: カテゴリー情報を格納するListを作ろう (3:35)
037: カテゴリー選択ボタン群をカスタムウィジェットで作ろう（Wrap/ChoiceChip） (5:12)
037-2：【解説】List.generateとListView.builderは何が違うのか (2:40)
038: 「ValueChanged」を使って選択したカテゴリーを呼び出し元のWidgetに通知させよう (5:19)
【本編・第６章】ニュース一覧の取得処理を外注しよう①（ViewModel・Repositoryの設定）
039: 「enum(列挙型)」を使って検索タイプを設定しよう（SearchType） (2:30)
040: NewsListViewModelクラスを作成しよう（ChangeNotifier） (3:38)
041: ViewModelの監視元をアプリのルートに登録しよう（ChangeNotifierProvider） (3:27)
042: ニュース一覧の取得処理をViewからViewModelに外注しよう (6:48)
043: データの取得処理のビジネスロジック部分を担うRepository（Model）クラスを作ろう (1:34)
044: ニュース一覧の取得処理をViewModelからRepositoryに外注しよう (6:59)
【本編・第７章】ニュース一覧の取得処理を外注しよう②（ApiServiceの設定：HTTP通信処理[http]）
045: 【解説】Web通信（HTTP通信）の仕組みと「REST」とは (7:15)
046: 【解説】Web通信（HTTP通信）パッケージ「http」とは (6:59)
047: 【解説】Web通信（HTTP通信）パッケージ「http」の使い方５ステップ (8:54)
048: 「NewsApi」に開発者登録をしてAPIキーを取得しよう (1:31)
049: 「http」を使うために必要なパッケージをインストールしよう（httpの使い方５ステップ①） (2:31)
050: Android Studioマニフェストファイルでインターネット接続するためのパーミッションを設定しよう（httpの使い方５ステップ②） (1:12)
051: 【解説】Androidの「パーミッション（Permission）」とは (4:55)
052: 「json_serializable」を使うためのパッケージ群のインストールをしよう（httpの使い方５ステップ④-1） (3:26)
053: 「json_serializable」を使ってレスポンスを格納するデータクラスを作成しよう（httpの使い方５ステップ④-2） (9:30)
054: 【解説】JsonからDartクラスへの変換の仕組み（json_serializable）の解説 (5:01)
054-2：【解説】「factory」コンストラクタ（メソッド）とは何か (4:03)
055: 「http.get()」を使ってデータ取得処理（ネットワークリクエスト処理）を実装しよう（httpの使い方５ステップ③） (10:17)
056: 【解説】「Uri」とは（「Url」との違い） (5:06)
057: HTTPレスポンスをDartのモデルクラスに変換させて結果を返そう（httpの使い方５ステップ：⑤） (3:34)
058: 【解説】Httpレスポンスのステータスコードとは (3:19)
【本編・第８章】Webから取得した結果でニュース一覧画面(NewsListPage)を更新しよう
059: ニュース一覧画面起動時に取得処理を行う実装をしよう (6:35)
059-2: 【解説】「setState() or markNeedsBuild called during build」エラーを回避する２つの方法（Futureで逃がす・WidgetsBinding.instance.addPostFrameCallback） (6:59)
060: 「Consumer」を使ってWebからニュースが取得できているかを確認しよう（ListView・ListTile） (5:11)
060-2: 【解説】Consumerのコード解説（なぜbuilder属性の第２引数はViewModelのインスタンスを指すのか） (3:37)
061: ニュース記事タイルをカスタムウィジェットで作ろう（Card/InkWell等） (7:13)
062: 「cached_network_image」を使ってキャッシュメモリを使ったニュース記事画像表示ウィジェットを作ろう (14:22)
063: マテリアルデザイン標準の「TextTheme」を拡張して記事表示部分のウィジェットを作ろう(TextStyle.copyWith) (9:42)
063-2：【＋α】CircularProgressIndicatorをカスタマイズしよう (1:48)
【本編・第９章】ヘッドライン記事の取得処理を実装しよう（ViewModel・Repositoryに外注）
064: 画面全体のレイアウトを作ろう (3:05)
065: HeadLineViewModelクラスを作成しよう（ChangeNotifier） (1:40)
066: 「MultiProvider」を使ってViewModelの監視元をアプリのルートに登録しよう（ChangeNotifierProvider） (4:32)
067: ヘッドラインの取得処理をViewからViewModel・Repositoryに外注しよう (6:15)
【本編・第10章】Webから取得した結果でヘッドライン画面(HeadLinePage)を更新しよう
068: 「PageView.builder」を使って取得したヘッドライン記事を表示する処理を実装しよう (7:21)
069: ＜資料＞次のレクチャーで使うプロジェクト（page_view_sample）
070: 【解説】「PageView」とは（PageView.builderの使い方4ステップ） (4:14)
071: ＜資料＞「PageTransformer」のDartファイル
072: PageTransformerを使ってスムーズなページ移動を実装しよう (6:28)
073: 【解説】「Opacity」とは (3:08)
074: 【解説】「PageTransformer」のDartファイルの解説 (8:54)
075: ヘッドライン記事表示部分をカスタムウィジェットで作ろう（Card/Stack/InkWell/Positioned） (10:45)
076: 【解説】「Positioned」とは (3:04)
077: 「LinearGradient」を使ってヘッドライン記事のサムネイル画像に線形グラデーションをつけよう (4:39)
078: 「Transform」を使ってスワイプ時にテキストのスムーズな遷移を実現させよう (7:49)
079: ＜資料＞次のレクチャーで使うプロジェクト（transform_sample）
080: 【解説】「Transform」と「Matrix4」とは (8:56)
【本編・第11章】選択した記事のWebページ（WebPageView）を開こう
081: Webページ画面の大枠と選択した記事をクリックするとWebページ画面に遷移する処理を実装しよう (3:48)
082: 「webview_flutter」を使って選択した記事のWebページを表示する処理を実装しよう (4:40)
【本編・第12章】Webから取得した結果を一旦データベースに保存しよう（NewsDatabaseの設定：DBライブラリ[Drift（旧Moor）]）
083: 【解説】なぜWebから取得したデータを一旦DBに格納するのか (6:44)
084: データベースライブラリ「Drift（旧：Moor）」を使うための依存関係を設定しよう（Driftの使い方9ステップ①） (3:17)
085: コード生成用ファイルとテーブルクラスの設定をしよう（Driftの使い方9ステップ②③） (4:45)
086: データベースクラスの設定をしてDrift用のコードを生成しよう（Driftの使い方9ステップ④⑤） (2:17)
087: データベースの生成メソッドを作成しスキーマバージョンを設定しよう（Driftの使い方9ステップ⑥） (4:19)
087-2: 【エラー対応】コード生成すると「InconsistentAnalysisException」が大量に発生して失敗する場合の対処法 (4:24)
088: クエリメソッドを格納するためのDao（Database Access Object）の設定をしよう (4:30)
089: Dao内にデータベースの操作メソッド（クエリメソッド）を作成しよう（Driftの使い方9ステップ⑦：Daoの利用） (5:14)
090: データベースクラスのインスタンスを設定しよう（Driftの使い方9ステップ⑧） (6:42)
091: Webから取得したデータを一旦DBに保存する処理を実装しよう（Moorの使い方9ステップ⑨） (3:10)
092: Dartの拡張メソッドを使ってDBのテーブルクラスとモデルクラスとの型変換処理を実装しよう (7:10)
092-2：【解説】forEach関数とは（繰り返し処理） (2:21)
093: WebからDBに保存したデータを取得する処理を実装しよう (4:53)
【本編・第13章】このアプリについて画面（AboutUsPage）を実装しよう
094: 「AnimatedContainer」を使って文字が飛び出すアニメーション処理を実装しよう (7:02)
095: 【解説】「AnimatedContainer」とは (4:58)
096: 「auto_size_text」を使ってよりスムーズな文字飛び出しアニメーションを実現させよう (7:12)
【本編・第14章】providerパッケージを使ってDependency Injection（依存性の注入）を実装しよう
098: 【解説】Dependency Injection（依存性の注入：DI）とは (7:08)
099: 【解説】「ProxyProvider」とは（Providerと何が違うのか） (5:48)
100: 「ProxyProvider」を使ってDIを実装しよう（①：Repository部分） (6:52)
101: 「ChangeNotifierProvider」を使ってDIを実装しよう（②：ViewModel部分） (8:02)
102: ＜資料＞今回作ったアプリの完成プロジェクト
【本編・第15章】エンディング
103: エンディングメッセージ (5:23)
104: 受講生特典のご案内（講座割引クーポン）
【補足セクション①】ChangeNotifierProxyProviderを使ってModel層の変更をViewModelに自動通知させよう
201: 【解説】Model層の変更をViewModelに自動通知させる方法 (4:05)
202: 【解説】「ChangeNotifierProxyProvider」とは（Model層の変更をViewModelに通知する役割を担う） (5:46)
203: データのロード状況を管理するためのenum（列挙型）クラスを作ろう (1:47)
204: [Repositoryの修正①]ChangeNotifier化してプロパティを修正しよう (1:48)
205: [Repositoryの修正②]データ取得処理部分の修正をしよう (3:43)
206: Provider（監視元）の修正をしよう (6:13)
207: 【解説】ChangeNotifierProxyProviderのupdate属性で「.」を使うとエラーになるのなぜか？（「..」の謎解き） (5:13)
208: ViewModelの修正を修正しよう（Repositoryの更新を受信） (3:24)
209: Viewの修正をしよう (2:41)
210: ＜資料＞補足セクション部分も実装した今回のアプリのプロジェクト
【補足セクション②】Chopperパッケージを使った場合のWeb通信のやり方（httpパッケージとの比較）
301: なぜ「Chopperパッケージ」を使ったやり方を本編から補足セクションに移動させたのか (2:16)
302: 【解説】Web通信（HTTP通信）パッケージ「Chopper」とは (11:12)
303: 【解説】Web通信（HTTP通信）パッケージ「Chopper」の使い方10ステップ (11:21)
304: （再掲）「NewsApi」に開発者登録をしてAPIキーを取得しよう (1:30)
305: 「Chopper」を使うために必要なパッケージをインストールしよう（Chopperの使い方10ステップ①） (4:22)
306: コード生成用ファイルとWebサーバーをやり取りを行うAPIクライアントを生成するための抽象クラスを作ろう（Chopperの使い方10ステップ②③） (5:12)
307: HTTPリクエストを定義したクエリメソッドを作ろう（Chopperの使い方10ステップ④） (7:22)
308: 「build_runner」を使ってChopper用のコードを生成しよう（Chopperの使い方10ステップ⑤） (1:45)
309: APIクライアントを取得するファクトリーメソッドを作成しよう（Chopperの使い方10ステップ⑥） (4:07)
310: （再掲）「json_serializable」を使ってレスポンスを格納するデータクラスを作成しよう（Chopperの使い方10ステップ⑦） (8:20)
311: ニュース一覧の取得処理をRepositoryからApiクライアントに外注しよう（Chopperの使い方10ステップ⑧） (5:40)
312: 例外処理を使ってHTTPレスポンスに応じた処理を実装しよう（Chopperの使い方10ステップ⑨） (5:24)
313: ＜資料＞「Chopper」パッケージを使った場合のサンプルプロジェクト
【補足セクション③】サンプルプロジェクトを使ったProviderパッケージにおける読み取り方法のまとめ
＜資料＞このセクションで使うプロジェクト
【解説】「provider」パッケージにおける読み取り方法のまとめ (8:35)
【重要】providerのバージョン5.0.0以降はcontext.readがbuildメソッド内でも使えるようになりました (3:04)
①：「context.watch(=Provider.of(listen: true))」と「context.select」の違い (4:51)
②：「Consumer」と「Selector」の違い (4:10)
【補足セクション⑤】「Null Safety（Null安全）」について（バージョン2.12.0以降のDartは空っぽ（null）が大キライに）
「Null Safety（Null安全）」とは (5:49)
安全呼び出し（Safe Call）と「！」演算子 (6:56)
空っぽ（null）と空文字（””）の違い (2:02)
「Null Safety」は現時点では強制適用ではない（自分の使っているパッケージが全てNull Safety対応していないとそもそも適用できない） (4:08)
【補足セクション⑧】データベースパッケージ「Moor」の「Drift」への名称変更に伴う移行方法
MoorからDriftへの移行方法（①：コマンドラインによる自動移行） (4:54)
MoorからDriftへの移行方法（②：手動での移行） (3:20)
204: [Repositoryの修正①]ChangeNotifier化してプロパティを修正しよう
このレクチャーはご覧になれません。
既に登録済の場合は
ログインが必要になります。
.
コースに登録する