自動再生
オートコンプリート
HTML5
Flash
Player
スピード
１つ前のレクチャー
このレクチャーを完了し次に進む
Flutter中級編２【質問対応無し版】
【本編・第１章】オープニング
001: ＜資料＞この講座のスライド解説資料
002: オープニング（本講座で作るアプリと習得できるスキルのご紹介「インスタクローンアプリ」＋講座内容に不具合があることを発見された場合＋講座内容にご満足頂けなかった場合の返金方法について） (9:40)
003: ＜資料＞今回作るアプリの設計図（インスタクローン）
004: 今回作るアプリ（インスタクローン）の設計図を書こう (7:01)
【本編・第２章】アプリアイコン・ランチャースクリーン・カスタムフォントを設定しよう
005: Android Studioで今回作るアプリのプロジェクトを作ろう (5:02)
006: ＜資料＞今回のアプリで使うリソース（画像・フォント）
007: 今回のアプリで使うリソースをプロジェクトに取り込もう (3:12)
008: 「flutter_launcher_icons」パッケージを使ってアプリアイコンを作ろう（アプリアイコンの作り方４ステップ） (5:02)
009: ランチャースクリーンを作ろう（Android） (3:29)
010: [macのみ]ランチャースクリーンを作ろう（iOS） (2:22)
011: カスタムフォントの設定をしよう (3:33)
012: アプリ全体に共通する部分の実装をしよう（アプリのテーマ設定（ThemeData）含む） (5:05)
【本編・第３章】ローカライゼーション（多言語設定）をしよう
013: 多言語設定用のプラグイン「Flutter Intl」を入れよう（Android Studio） (3:08)
014: 「Flutter Intl」プラグインの初期化処理をしよう（Android Studio） (2:24)
015: 「flutter_localizations」パッケージのインストールをしよう (2:04)
016: 「flutter_localizations」パッケージの初期化コードの実装をしよう (2:43)
017: ＜資料＞次のレクチャーで使う英語・日本語の文字列リソースファイル（ARBファイル）
018: 文字列リソースファイル（Arbファイル）の設定をしよう (3:22)
019: [Macのみ]iOS端末で多言語表示のために必要な設定をしよう（Xcode） (2:34)
020: 多言語設定（ローカライゼーション）が出来ているか確認しよう (3:04)
【本編・第４章】Firebaseを使うために必要なセットアップをしよう
021: 【解説】Firebaseとは (6:23)
022: Firebaseのアカウントを開設しよう (3:44)
023: Firebaseコンソール内に新しいプロジェクトを作成しよう (6:27)
024: Firebaseプロジェクト内にAndroidアプリの登録をしよう (6:39)
025: [Macのみ]Firebaseプロジェクト内にiOSアプリの登録をしよう (3:19)
026: 今回のアプリで必要なFirebaseのパッケージをインストールしよう（FlutterFire） (5:43)
【本編・第５章】Googleログイン使った認証処理を実装しよう（Firebase Authetication / Cloud Firestore）
027: 【解説】GoogleログインとFirebaseAuthを使った認証処理の概要 (4:43)
028: Googleログインに必要なパッケージをインストールしよう（google_sign_in） (1:06)
029: FirebaseコンソールからGoogleログインを有効にしてデータベースへの書き込みルールを設定しよう (3:53)
030: AndroidからGoogleログインをするために必要なフィンガープリント（SHA-1）を取得しよう (4:22)
031: [Macのみ]iOS端末からGoogleログインするために必要な設定をしよう (2:45)
032: 【解説】Cloud Firestoreとは（SQLiteとの違いとは） (7:00)
033: 【解説】Cloud Firestoreにおけるデータモデルと扱えるデータ型とは (6:33)
034: Dartでデータクラスを作るための「Dart Data Class」プラグインをインストールしよう（Android Studio） (4:44)
035: ログインユーザー情報を格納するデータクラスを作ろう (6:29)
036: 設計（アーキテクチャ）とDIの初期設定をしよう (5:12)
037: ログイン処理に関する設計の仕組みを作ってProviderに登録しよう (8:09)
038: 【解説】Dependency Injection（依存性の注入：DI）とは（中級編１の復習） (7:08)
039: 「FutureBuilder」を使ってアプリ起動時にログインしているかのチェックをしよう (7:04)
040: DIで設定したProvider群をツリーの最上位に設置しよう (3:57)
041: [Androidの場合]「Cannot fix requested classes in a single dex file」の対処法 (1:42)
042: 【解説】FutureBuilderとConsumerの違いとは (5:38)
043: ログイン画面（LoginScreen）の大枠を実装しよう (8:43)
044: ログイン画面からサインイン処理を外注しよう (2:08)
045: GoogleログインしたアカウントのFirebase認証処理を実装しよう (5:58)
046: 認証されたユーザーがデータベースに登録されているかの確認しよう（Cloud Firestoreの検索処理） (5:36)
047: FirebaseUserクラスをUserクラスに変換する処理を実装しよう (2:40)
048: 認証されたユーザーをデータベースに登録しよう（Cloud Firestoreの登録処理） (2:42)
049: DBに登録したユーザーデータを取得してアプリ全体で使えるようにしておこう (4:53)
050: サインインが完了したらアプリを開く処理を実装しよう (5:55)
051: Degubモードの場合はサインインをキャンセルするとアプリが止まってしまう理由 (3:03)
【本編・第６章】端末内臓のカメラアプリ・ギャラリーアプリと連携して画像を取得しよう（image_picker）
052: HomeScreenとそれに属する５画面（Page）の外枠を実装しよう (5:35)
053: 「BottomNavigationBar（画面下部のナビゲーションメニュー）」の設定をしよう (10:46)
054: BottomNavigationBarのカスタマイズをしよう（４つ以上のitemがある場合の注意点） (5:17)
055: 投稿画面（PostPage)の実装をしよう (7:06)
056: 投稿画面（PostPage)から投稿アップロード画面（PostUploadScreen）への遷移処理を実装しよう (4:38)
057: PostViewModelの大枠を実装してProviderに登録しよう (4:40)
058: 画像を取得するためのパッケージ「image_picker」をインストールしよう (3:53)
059: [Macのみ]「image_picker」パッケージを使うために必要な権限等の設定をしよう (2:49)
060: 端末内臓のカメラ・ギャラリーアプリから投稿画像を取得する処理を実装しよう (8:36)
【本編・第７章】スマホ端末の位置情報を取得しよう（geolocator）
061: 位置情報取得に必要なパッケージ「geolocator/geocoding」をインストールして必要な権限等の設定をしよう (4:51)
062: 【解説】位置情報を取得する２つの方法（Androidで２つのPermissionが必要な理由） (2:06)
063: 「geolocator」を使うために必要な権限等の設定をしよう (3:17)
064: 位置情報取得を担当するモデルクラス（LocationManager）を作成しよう (3:45)
065: 位置情報を格納するクラス（Location）を作成しよう (2:47)
066: 現在の位置情報を取得する処理を実装しよう (7:54)
067: 現在の位置情報を取得してViewに通知する処理を実装しよう (3:26)
068: 画像と位置情報の取得を受けて投稿アップロード画面を更新しよう（PostUploadScreen：appBar部分） (4:13)
069: 画像と位置情報の取得を受けて投稿アップロード画面を更新しよう（PostUploadScreen：body部分） (4:24)
070: 投稿アップロード画面内の画像・キャプション部分の大枠を実装しよう（PostCaptionPart） (4:37)
071: ＜資料＞次のレクチャーで使うプロジェクト
072: 【解説】「Hero」アニメーションとは (6:15)
073: 「Hero」を使って投稿画像をクリックしたら拡大表示する処理を実装しよう（EnlargedImageScreen） (5:44)
074: 【解説】TextField変更の管理方法（addListenerメソッドの謎解き） (7:09)
075: 投稿キャプションを入力するパーツ（PostCaptionInputTextField）を実装しよう (5:27)
076: キャプション入力欄の見た目をカスタマイズしよう (2:35)
077: 位置情報を表示するパーツ（PostLocationPart）を実装しよう (8:37)
【本編・第８章】GoogleMaps（地図）と連携しよう（google_maps_flutter）
078: 【解説】FlutterアプリにGoogle Maps（地図）を表示させる方法 (6:31)
079: Maps Platformに登録しよう (1:25)
080: AndroidでGoogleMapsを使うための設定をしよう (2:04)
081: [Macのみ]iOSでGoogleMapsを使うための設定をしよう (3:05)
082: [Macのみ]GoogleMapsSDK for iOS3.0へのアップグレードをしよう (5:45)
083: 地図画面を表示させよう（MapScreen） (8:45)
084: 地図をタップしたらマーカーを表示する処理を実装しよう (6:55)
085: 地図上で選択した地点に位置情報を更新しよう (6:12)
086: 確認ダイアログをカスタムウィジェットとして実装しよう (6:01)
087: 投稿データを格納するためのデータクラス（Post）を作ろう (2:55)
088: 「Dart Data Class」プラグインでDateTime型を扱う場合の注意点 (3:26)
089: 投稿処理をモデルに外注しよう（ViewからRepositoryへの外注） (5:54)
090: 一意なIDを生成してくれる「uuid」パッケージをインストールしよう (3:15)
091: Firebase Storageを使うための初期設定をしよう (1:42)
092: 投稿画像をStorageにアップロードして保存先のURLを取得しよう (6:02)
093: 投稿データをデータベース（Cloud Firestore）に登録しよう (3:59)
094: ユーザーが投稿を途中でキャンセルした場合の処理を実装しよう（PostUploadScreen） (2:42)
【本編・第９章】投稿データをフィード画面に表示させよう
095: フィード画面からカメラを起動する処理を実装しよう（FeedPage） (7:39)
096: フィード画面を開いた際に投稿一覧を取得する処理を外注しよう（FeedSubPage) (7:39)
097: データベース（CloudFireStore）に投稿データがあるかどうかをチェックしよう（DatabaseManager） (3:41)
098: 自分がフォローしているユーザーのIDをデータベースから取得しよう（DatabaseManager） (4:42)
099: 自分と自分がフォローしているユーザーの投稿をデータベースから取得しよう（DatabaseManager） (6:41)
100: 複雑な検索条件に対応できるカスタムインデックスを設定しよう（Cloud Firestoreの複合インデックスとは） (6:03)
101: 投稿取得処理を受けたフィード画面の大枠の更新処理を実装しよう（FeedSubPage） (4:02)
102: 個別投稿表示パーツ（FeedPostTile）の大枠を実装しよう (6:41)
103: 個別投稿表示パーツで使う投稿ユーザーの取得処理を実装しよう (7:00)
104:「cached_network_image」と「CircleAvater」を使って円形画像を表示させるWidgetを作ろう (4:46)
105: ユーザー情報を表示させるカスタムWidgetを作ろう (4:57)
106: 個別投稿表示パーツのヘッダー部分の大枠を実装しよう（FeedPostHeaderPart） (3:40)
107: 「PopupMenuButton」を使って投稿画像のカスタム処理部分の大枠を実装しよう (5:14)
108: 個別投稿表示パーツの投稿画像表示部分を実装しよう（ImgeFromUrl） (3:08)
109: 個別投稿表示パーツのいいね・コメントアイコン部分の大枠を実装しよう（PostLikesPart） (3:48)
110: 個別投稿表示パーツのキャプション・コメント表示部分の大枠を実装しよう（PostCommentssPart） (4:06)
111: 「RichText」を使ってキャプション表示部分を実装しよう (6:53)
112: 「GestureDetector」を使って枠からはみ出したキャプションを表示させる実装をしよう (1:47)
113: 「timeago」パッケージを使って投稿日時のタイムスタンプを表示する処理を実装しよう (6:21)
【本編・第10章】投稿データの編集とシェアをしよう
114: 投稿編集画面の大枠を実装しよう（FeedPostEditScreen） (6:30)
115: 投稿編集画面の投稿画像・キャプション部分を実装しよう（PostCaptionPart） (5:19)
116: 投稿キャプションの更新をViewModelに反映させる処理を実装しよう (3:27)
117: 投稿の編集処理を設計の仕組みを使って外注しよう (5:08)
118: データベースに登録されている投稿データを更新しよう（Cloud Firestoreの更新処理） (3:00)
119: 投稿の編集処理を受けた編集画面の更新処理を実装しよう（FeedPostEditScreen） (4:06)
120: 「share」パッケージを使って投稿をシェアする実装をしよう (4:00)
121: ＜資料＞ここまでのプロジェクト
【本編・第11章】コメント・いいね部分の実装をしよう
122: コメント入力画面の大枠を実装しよう（CommentScreen） (4:33)
123: CommentViewModelを作成してProviderに登録しよう (1:35)
124: コメント入力画面のキャプション表示部分を実装しよう（CommentDisplayPart） (7:10)
125: コメント入力画面のコメント入力欄を実装しよう（CommentInputPart） (6:42)
126: コメント入力画面のコメント入力欄のカスタマイズをしよう（CommentInputPart） (5:03)
127: コメントデータを格納するためのデータクラス（Comment）を作ろう (2:57)
128: コメントの投稿処理を実装しよう (6:20)
129: データベースに登録されているコメントデータを取得しよう (8:06)
130: コメント入力画面を開いたら投稿されたコメントを表示する処理を実装しよう（CommentsScreen） (4:49)
131: コメント入力画面を開いたらコメントを投稿したユーザー情報を表示する処理を実装しよう（CommentsScreen） (4:14)
132: 「GestureLongPressCallback」を使ってコメントを長押ししたら削除する処理を設計の仕組みを使って外注しよう (4:59)
133: データベースに登録されているコメントデータを削除しよう（Cloud Firestoreの削除処理） (2:14)
134: 投稿表示画面でコメント数を表示する部分の実装をしよう (7:36)
135: 「いいね」を格納するためのデータクラス（Like）を作ろう (5:01)
136: 「いいね」をする処理を実装しよう (5:11)
137: 「いいね」されたデータをデータベースから取得する処理を実装しよう (6:27)
138: 自分がその投稿にいいねしたかどうかを判定していいね数を表示する処理を実装しよう（forループを途中で抜ける方法） (8:58)
139: 「いいね」アイコンの描画分けの処理を実装しよう (2:19)
140: 「いいね」をやめる処理を実装しよう (5:46)
141: 「RefreshIndicator」を使って上スワイプでフィード画面を更新する処理を実装しよう (4:48)
142: 投稿の削除処理を設計の仕組みを使って外注しよう (5:47)
143: データベースに登録されている投稿データを削除しよう (5:07)
144: ＜資料＞ここまでのプロジェクト
【本編・第12章】プロフィール画面の実装をしよう
145: プロフィール画面とProfileViewModelの大枠を実装しよう（ProfileScreen/ProfilePage） (5:34)
146: プロフィール画面に表示するユーザーを設定しよう (3:26)
147: プロフィール画面に表示するユーザーの投稿データを取得しよう (7:11)
148: 【解説】SliverAppBarとは (5:46)
149: 「SliverAppBar」を使ってスワイプで伸縮するAppBarを実装しよう（ProfilePage） (4:50)
150: プロフィール画面の設定パーツの実装をしよう（ProfileSettingsPart） (5:08)
151: サインアウト処理を設計の仕組みを使って外注しよう (4:07)
152: サインアウト処理を実装しよう（ProfileSettingsPart） (5:53)
153: プロフィール画面のプロフィール詳細パーツの実装をしよう（ProfileDetailPart） (6:46)
154: プロフィール詳細パーツ内のプロフィール画像パーツを実装しよう（ProfileImage） (1:56)
155: プロフィール詳細パーツ内の記録表示パーツの大枠を実装しよう（ProfileRecords） (4:52)
156: 「FutureBuilder」を使って記録情報パーツで表示する投稿数を取得しよう (4:07)
157: 「FutureBuilder」を使って記録情報パーツで表示するフォロワー数を取得しよう (5:02)
158: 「FutureBuilder」を使って記録情報パーツで表示するフォロー中している人の数を取得しよう (2:33)
159: プロフィール詳細パーツ内のバイオ表示パーツの大枠を実装しよう（ProfileBio） (6:22)
160: 【解説】SliverGridとは (3:02)
161: 「SliverGrid」を使ってプロフィール画面の投稿グリッドパーツの実装をしよう（ProfilePostsGridPart） (4:41)
162: プロフィール画面からフィード画面を開く処理を実装しよう (9:28)
163: 「scrollable_positioned_list」パッケージを使ってプロフィール画面からフィード画面を開く処理を実装しよう (3:51)
164: プロフィール編集画面（EditProfileScreen）の大枠を実装しよう (9:57)
165: プロフィール画像の変更処理を実装しよう (3:18)
166: プロフィール編集処理を設計の仕組みを使って外注しよう (4:47)
167: プロフィール編集処理を実装しよう (4:18)
168: プロフィール更新後にユーザーデータをデータベースから再取得しよう (5:41)
169: ＜資料＞ここまでのプロジェクト
【本編・第13章】ユーザー検索画面の実装をしよう
170: 【解説】SearchDelegateとは (5:40)
171: ユーザー検索画面（SearchPage）の大枠を実装しよう (5:09)
172: 「SearchDelegate」を使って検索パーツ（SearchUserDelegate）の大枠を実装しよう (8:16)
173: 検索欄に入力したらユーザー検索を行う処理を設計の仕組みを使って外注しよう (3:54)
174: 「startAt・endAt」を使って検索欄に入力したユーザーデータをワイルドカード的にデータベースから取得する処理を実装しよう (7:45)
175: ユーザー検索処理の結果を受けてユーザー検索画面の更新処理を実装しよう (5:11)
176: ユーザー検索画面からの遷移を受けたプロフィール画面の更新処理を実装しよう (4:12)
177: ユーザーをフォローする処理を実装しよう (7:08)
178: プロフィール画面遷移時にフォロー状況をチェックする処理を実装しよう (5:24)
179: ユーザーをアンフォローする処理を実装しよう (4:55)
【本編・第14章】フォロー・フォロワー・いいねしてくれた人を表示する画面の実装をしよう
180: WhoCaresMeScreenとWhoCaresMeViewModelの大枠を実装しよう (3:26)
181: WhoCaresMeScreenを開く処理を実装しよう（①：誰がいいねしたか） (5:30)
182: WhoCaresMeScreenを開く処理を実装しよう（②誰にフォローされたか・誰をフォローしているか） (3:39)
183: WhoCaresMeScreenからデータを取得する処理を設計の仕組みを使って外注しよう (3:28)
184: 投稿に「いいね」したユーザーの情報を取得しよう (5:11)
185: 非同期処理でforEach関数を使う場合の注意点 (2:59)
186: フォロワーユーザーの情報をデータベースから取得しよう (3:52)
187: フォローしているユーザーの情報をデータベースから取得しよう (2:33)
188: ユーザー情報の取得を受けてWhoCaresMeScreenの更新処理を実装しよう (6:30)
189: ＜資料＞ここまでのプロジェクト
【本編・第15章】テーマの動的変更（ダークテーマとライトテーマの動的入替）の実装をしよう
190: 【解説】Providerを使ったテーマの動的変更のやり方 (5:20)
191: テーマ（ThemeData）の設定をしよう (4:35)
192: テーマの動的変更に伴う設計の仕組みを構築しよう (3:10)
193: プロフィール画面からテーマの設定処理を設計の仕組みを使って外注しよう (4:33)
194: 【解説】SharedPreferencesとは (3:58)
195: 「shared_preferences」パッケージを使って変更したテーマを永続化する処理を実装しよう (3:15)
196: テーマ変更処理を受けて画面の見た目を更新しよう (4:24)
197: アプリ起動時にSharedPreferencesに保存したテーマをセットする処理を実装しよう (5:21)
198: main関数内で非同期処理を行う場合の注意点 (2:03)
199: ＜資料＞今回のアプリの完成プロジェクト（だいたインスタグラム）
【本編・第16章】エンディング
200: エンディングメッセージ (4:30)
201: 受講生特典のご案内（他のFlutter中級編講座割引クーポン）
【重要・補足】講座リリース後に行われたFirebaseのパッケージ群の破壊的変更に伴う対応について
「firebase_core」0.5.0以降に必要となる初期化処理（main.dart） (5:49)
「firebase_auth」0.18.0での破壊的変更に伴う対応（user_repository.dart） (4:14)
「cloud_firestore」0.14.0での破壊的変更に伴う対応（database_manager.dart） (5:37)
ボーナスセクション①：Flutter小ネタ集
provider4.1.0から使えるようになった「Context.read / watch」と「Provider.of」について (9:19)
ボーナスセクション②：トラブルシューティング集
「flutter_advanced_network_image」を使っている場合はFlutterのバージョンを1.20に上げないで（2020/8/15時点） (4:32)
FlutterのSDKをダウングレードした時に起こるかもしれないエラー（Invalid Podfile file: cannot load such file-- .../flutter/packages/flutter_tools/bin/podhelper.） (1:51)
176: ユーザー検索画面からの遷移を受けたプロフィール画面の更新処理を実装しよう
このレクチャーはご覧になれません。
既に登録済の場合は
ログインが必要になります。
.
コースに登録する