自動再生
オートコンプリート
HTML5
Flash
Player
スピード
１つ前のレクチャー
このレクチャーを完了し次に進む
Flutter中級編１【質問対応有り版】
【本編・第１章】オープニング
001: ＜資料＞この講座のスライド解説資料
002: オープニング（本講座で作るアプリと習得できるスキルのご紹介「ニュースフィードアプリ」） (6:34)
003: ＜資料＞今回作るアプリの設計図（ニュースフィード）
004: 今回作るアプリ（ニュースフィード）の設計図を書こう (6:22)
【本編・第２章】アプリアイコン・ランチャースクリーン・カスタムフォントを設定しよう
005: Android Studioで今回作るアプリのプロジェクトを作ろう (3:15)
006: 「Image Asset Studio」を使ってアプリアイコン用のPNG画像を作成しよう (4:25)
007: 「flutter_launcher_icons」パッケージを使ってアプリアイコンを作ろう（アプリアイコンの作り方４ステップ） (8:29)
008: 【解説】Androidのアダプティブアイコン（Adaptive Icon）とは (5:29)
009: ランチャースクリーンを作ろう（ランチャースクリーンの作り方３ステップ） (5:48)
010: 「Google Fonts」からアプリで使うカスタムフォントを取得しよう (2:57)
011: カスタムフォントの設定をしよう (2:06)
012: アプリ全体に共通する部分（アプリのルート部分）を実装しよう (5:34)
【本編・第３章】画面の大枠とBottomNavigationの設定をしよう
013: HomeScreenとそれに属する３画面（Page）の外枠を実装しよう (7:58)
014: 「BottomNavigationBar（画面下部のナビゲーションメニュー）」の設定をしよう (8:43)
015: 【解説】マテリアルデザインにおける３種類のナビゲーション（Literal navigation） (5:59)
【本編・第４章】設計（Architecture）と状態管理（State Management）の基礎知識を身につけよう
016: 【解説】アプリの「設計」とは何か（なぜ「設計」が必要なのか） (5:33)
017: 【解説】アプリの「設計」の２大原則とは (3:32)
018: 【解説】設計パターン「MVVM（Model-View-ViewModel）」とは (8:54)
019: 【解説】FlutterにおけるViewModelの仕組み（ChangeNotifierとChangeNotifierProvider） (6:03)
020: 【解説】Google先生推奨の状態管理パッケージ「provider」とは (3:46)
021：【解説】どういう時に状態管理を考える必要があるのか（「Ephemeral State」と「App State」） (2:50)
022: 【解説】Googleはなぜproviderを推奨しているのか（BLoCからproviderへ） (5:38)
023: 【解説】「provider」パッケージの背景にある「InheritedWidget」とは (6:22)
024: 【解説】「provider」パッケージの根幹にある「Provider」クラスとは (8:38)
（補足）provider4.1.0から使えるようになった「Context.read / watch」と「Provider.of」は全く同じ (2:59)
025: 【解説】「Consumer」と「Provider.of」の違いとは (5:23)
026: 【解説】「設計」に関するコーディングの指針 (5:58)
【本編・第５章】ニュース一覧画面（NewsListPage）を実装しよう
027: 【解説】より実践的な画面（UI）の構築方法（画面全体とパーツでWidgetクラスを分ける） (4:45)
028: 【解説】パーツWidgetの抽出をクラスで行う場合とメソッドで行う場合では何が違うのか (4:16)
029: 画面全体のレイアウトを作ろう（Column/Padding/Expanded/SizedBox/CircularProgressIndicator） (5:14)
030: 検索バーをカスタムウィジェットで作ろう（Card/TextField/InputDecoration） (6:11)
031: 「ValueChanged」を使って検索バーで入力した文字を呼び出し元のWidgetに通知させよう (4:13)
032: カテゴリー情報を格納するListを作ろう (3:16)
033: カテゴリー選択ボタン群をカスタムウィジェットで作ろう（Wrap/ChoiceChip） (5:12)
034: 「ValueChanged」を使って選択したカテゴリーを呼び出し元のWidgetに通知させよう (3:13)
【本編・第６章】ニュース一覧の取得処理を外注しよう①（ViewModel・Repositoryの設定）
035: 「enum(列挙型)」を使って検索タイプを設定しよう（SearchType） (2:30)
036: NewsViewModelクラスを作成しよう（ChangeNotifier） (3:38)
037: ViewModelの監視元をアプリのルートに登録しよう（ChangeNotifierProvider） (3:27)
038: ニュース一覧の取得処理をViewからViewModelに外注しよう (5:33)
039: データの取得処理のビジネスロジック部分を担うRepository（Model）クラスを作ろう (1:34)
040: ニュース一覧の取得処理をViewModelからRepositoryに外注しよう (5:46)
【本編・第７章】ニュース一覧の取得処理を外注しよう②（ApiServiceの設定：HTTP通信処理[Chopper]）
041: 【解説】Web通信（HTTP通信）の仕組みと「REST」とは (6:45)
042: 【解説】Web通信（HTTP通信）パッケージ「Chopper」とは (4:57)
043: 【解説】Web通信（HTTP通信）パッケージ「Chopper」の使い方10ステップ (11:21)
044: 「NewsApi」に開発者登録をしてAPIキーを取得しよう (1:30)
045: 「Chopper」を使うために必要なパッケージをインストールしよう（Chopperの使い方10ステップ①） (4:22)
046: コード生成用ファイルとWebサーバーをやり取りを行うAPIクライアントを生成するための抽象クラスを作ろう（Chopperの使い方10ステップ②③） (3:25)
047: HTTPリクエストを定義したクエリメソッドを作ろう（Chopperの使い方10ステップ④） (7:22)
048: 「build_runner」を使ってChopper用のコードを生成しよう（Chopperの使い方10ステップ⑤） (1:45)
049: APIクライアントを取得するファクトリーメソッドを作成しよう（Chopperの使い方10ステップ⑥） (4:07)
050: 「json_serializable」を使ってレスポンスを格納するデータクラスを作成しよう（Chopperの使い方10ステップ⑦） (8:20)
051: 【解説】JsonからDartクラスへの変換の仕組み（json_serializable）の解説 (6:04)
052: ニュース一覧の取得処理をRepositoryからApiクライアントに外注しよう（Chopperの使い方10ステップ⑧） (5:40)
053: 例外処理を使ってHTTPレスポンスに応じた処理を実装しよう（Chopperの使い方10ステップ⑨） (4:50)
054: 使い終わったApiクライアントを破棄しよう（Chopper10ステップ⑩） (3:19)
【本編・第８章】Webから取得した結果でニュース一覧画面(NewsListPage)を更新しよう
055: ニュース一覧画面起動時に取得処理を行う実装をしよう (5:57)
056: 「Consumer」を使ってWebからニュースが取得できているかを確認しよう（ListView・ListTile） (4:22)
057: ニュース記事タイルをカスタムウィジェットで作ろう（Card/InkWell等） (6:55)
058: 「flutter_advanced_networkimage」を使ってキャッシュメモリを使ったニュース記事画像表示ウィジェットを作ろう (6:48)
059: マテリアルデザイン標準の「TextTheme」を拡張して記事表示部分のウィジェットを作ろう(TextStyle.copyWith) (8:09)
【本編・第９章】ヘッドライン記事の取得処理を実装しよう（ViewModel・Repositoryに外注）
060: 画面全体のレイアウトを作ろう (3:05)
061: HeadLineViewModelクラスを作成しよう（ChangeNotifier） (1:59)
062: 「MultiProvider」を使ってViewModelの監視元をアプリのルートに登録しよう（ChangeNotifierProvider） (4:32)
063: ヘッドラインの取得処理をViewからViewModel・Repositoryに外注しよう (5:47)
【本編・第10章】Webから取得した結果でヘッドライン画面(HeadLinePage)を更新しよう
064: 「PageView.builder」を使って取得したヘッドライン記事を表示する処理を実装しよう (7:21)
065: ＜資料＞次のレクチャーで使うプロジェクト（page_view_sample）
066: 【解説】「PageView」とは（PageView.builderの使い方4ステップ） (4:14)
067: ＜資料＞「PageTransformer」のDartファイル
068: PageTransformerを使ってスムーズなページ移動を実装しよう (6:28)
069: 【解説】「Opacity」とは (3:08)
070: 【解説】「PageTransformer」のDartファイルの解説 (8:54)
071: ヘッドライン記事表示部分をカスタムウィジェットで作ろう（Card/Stack/InkWell/Positioned） (9:24)
072: 【解説】「Positioned」とは (3:04)
073: 「LinearGradient」を使ってヘッドライン記事のサムネイル画像に線形グラデーションをつけよう (4:39)
074: 「Transform」を使ってスワイプ時にテキストのスムーズな遷移を実現させよう (6:57)
075: ＜資料＞次のレクチャーで使うプロジェクト（transform_sample）
076: 【解説】「Transform」と「Matrix4」とは (8:56)
【本編・第11章】選択した記事のWebページ（WebPageView）を開こう
077: Webページ画面の大枠と選択した記事をクリックするとWebページ画面に遷移する処理を実装しよう (3:48)
078：「webview_flutter」を使って選択した記事のWebページを表示する処理を実装しよう (6:22)
【本編・第12章】Webから取得した結果を一旦データベースに保存しよう（NewsDatabaseの設定：DBライブラリ[Moor]）
079: 【解説】なぜWebから取得したデータを一旦DBに格納するのか (5:37)
080: データベースライブラリ「Moor」を使うための依存関係を設定しよう（Moorの使い方9ステップ①） (3:28)
081: コード生成用ファイルとテーブルクラスの設定をしよう（Moorの使い方9ステップ②③） (5:02)
082: データベースクラスの設定をしてMoor用のコードを生成しよう（Moorの使い方9ステップ④⑤） (2:17)
083: データベースの生成メソッドを作成しスキーマバージョンを設定しよう（Moorの使い方9ステップ⑥） (4:19)
084: クエリメソッドを格納するためのDao（Database Access Object）の設定をしよう (5:25)
085: Dao内にデータベースの操作メソッド（クエリメソッド）を作成しよう（Moorの使い方9ステップ⑦：Daoの利用） (5:14)
086: データベースクラスのインスタンスを設定しよう（Moorの使い方9ステップ⑧） (6:13)
087: Webから取得したデータを一旦DBに保存する処理を実装しよう（Moorの使い方9ステップ⑨） (2:52)
088: Dartの拡張メソッドを使ってDBのテーブルクラスとモデルクラスとの型変換処理を実装しよう (6:24)
089: WebからDBに保存したデータを取得する処理を実装しよう (3:25)
【本編・第13章】このアプリについて画面（AboutUsPage）を実装しよう
090: 「AnimatedContainer」を使って文字が飛び出すアニメーション処理を実装しよう (7:02)
091: 【解説】「AnimatedContainer」とは (4:58)
092: 「auto_size_text」を使ってよりスムーズな文字飛び出しアニメーションを実現させよう (5:18)
093: ＜資料＞ここまでのプロジェクト
【本編・第14章】providerパッケージを使ってDependency Injection（依存性の注入）を実装しよう
094: 【解説】Dependency Injection（依存性の注入：DI）とは (7:08)
095: 【解説】「ProxyProvider」とは（Providerと何が違うのか） (5:48)
096: 「ProxyProvider」を使ってDIを実装しよう（①：Repository部分） (8:24)
097: 「ChangeNotifierProvider」を使ってDIを実装しよう（②：ViewModel部分） (6:41)
098: ＜資料＞今回作ったアプリの完成プロジェクト
【本編・第15章】エンディング
099: エンディングメッセージ (5:23)
【補足セクション】ChangeNotifierProxyProviderを使ってModel層の変更をViewModelに自動通知させよう
【解説】Model層の変更をViewModelに自動通知させる方法 (2:35)
【解説】「ChangeNotifierProxyProvider」とは（Model層の変更をViewModelに通知する役割を担う） (5:46)
データのロード状況を管理するためのenum（列挙型）クラスを作ろう (2:08)
[Repositoryの修正①]ChangeNotifier化してプロパティを修正しよう (1:48)
[Repositoryの修正②]データ取得処理部分の修正をしよう (3:22)
Provider（監視元）の修正をしよう (4:30)
ViewModelの修正を修正しよう（Repositoryの更新を受信） (3:11)
Viewの修正をしよう (2:41)
＜資料＞補足セクション部分も実装した今回のアプリのプロジェクト
【ボーナスセクション】トラブルシューティング集
Dart Error: error: import of dart:mirrors is not supported in the current Dart runtimeの対処法 (3:00)
【重要】Android Studio4.0へのアップグレードはこの手順で行ってください（Flutter・Dartのプラグインのアップデートが必要です） (4:06)
[Repositoryの修正①]ChangeNotifier化してプロパティを修正しよう
このレクチャーはご覧になれません。
既に登録済の場合は
ログインが必要になります。
.
コースに登録する