TEXTBOOK DETAIL
Flutterアプリケーション開発概論
- 4-1【導入】TikTok風アプリを分解して、画面づくりの流れをつかむ
- 4-2Flutterの画面はWidgetでできている
- 4-3MaterialAppとScaffoldでアプリの土台を作る
- 4-4Stackで動画の上に文字やボタンを重ねる
- 4-5動画データをclassで設計する
- 4-6PageView.builderで縦スワイプUIを作る
- 4-7video_playerで動画を再生する
- 4-8無限スクロール風の仕組みを作る
- 4-9右側アクションバーを部品化する
- 4-10いいね・保存・共有の状態を変える
- 4-11コメント入力画面をBottomSheetで作る
- 4-12下部のユーザー名・キャプション・音源表示を作る
- 4-13Widgetを分割して読みやすいコードに整える
- 4-14完成コードを読み解く
- 4-15【まとめ】どんなアプリでも同じ流れで作れる
- 5-1【導入】NETFLIX風アプリを動かして、完成形の全体像をつかむ
- 5-2【完成コードの使い方】pubspec.yaml・main.dart・画像素材を準備する
- 5-3【パッケージ設定】YouTube再生・SVGロゴ・共有・アプリアイコンのライブラリを確認する
- 5-4【アセット登録】logo.svgとicon.pngをFlutterアプリで使えるようにする
- 5-5【スプラッシュ画面】アプリ起動時に黒背景・中央ロゴ・説明文を表示する
- 5-6【テーマ設計】黒背景・赤アクセント・白文字で動画アプリ風の世界観を作る
- 5-7【データ設計】MovieItemクラスで作品情報をひとまとまりにする
- 5-8【作品データ追加】moviesリストにタイトル・画像・YouTube IDを登録する
- 5-9【画面切り替え】BottomNavigationBarでHome・Clips・Search・My Netaflixを切り替える
- 5-10【Home画面UI】大きな背景画像・ロゴ・Playボタンを重ねて表示する
- 5-11【グラデーション表現】画像の上に黒いグラデーションを重ねて文字を読みやすくする
- 5-12【AppBar UI】メニューアイコン・ロゴ・プロフィール画像を上部に配置する
- 5-13【カテゴリタブ】Shows・Movies・Games・New & Hotをタップして表示内容を切り替える
- 5-14【メニュー表示】メニューアイコンから下に出るモーダルUIを表示する
- 5-15【横スクロールUI】Popular・Trending・Top10風の作品一覧を作る
- 5-16【ポスターカードUI】作品画像をタップして詳細画面へ移動する
- 5-17【詳細画面UI】作品タイトル・説明文・メタ情報・アクションボタンを表示する
- 5-18【LikeとMy List】setStateでハートや保存ボタンのON/OFFを切り替える
- 5-19【YouTube再生】youtube_player_iframeで作品トレーラーを再生する
- 5-20【Clips画面UI】PageView.builderで縦スクロールの動画フィード風UIを作る
- 5-21【無限ループ風表示】ページ番号と余り算を使ってClipsを繰り返し表示する
- 5-22【共有機能】share_plusでiOSの共有画面を表示する
- 5-23【iOS共有エラー対策】sharePositionOriginを指定してPlatformExceptionを防ぐ
- 5-24【検索機能】TextFieldに入力した文字で作品をリアルタイム検索する
- 5-25【検索結果UI】該当作品の一覧と、見つからない時の表示を作る
- 5-26【My Netaflix画面】プロフィール・通知・ダウンロード・視聴中リストを表示する
- 5-27【Info.plist設定】アプリ名・画面向き・YouTube表示に関わるiOS設定を確認する
- 5-28【アプリアイコン設定】flutter_launcher_iconsでicon.pngをアプリアイコンにする
- 5-29【完成コードを読む】NETFLIX風アプリの全体構造を上から順番に理解する
- 5-30【カスタマイズ】作品追加・色変更・カテゴリ追加・共有文変更に挑戦する
- 5-31【まとめ】完成コードをカスタマイズしながらFlutterアプリ開発の流れを身につける
- 6-1【導入】Discord風アプリを分解して、UIづくりの流れをつかむ
- 6-2【Flutterレイアウト入門】ColumnとRowでDiscord風の4カラム構造を作る
- 6-3【UIの土台作り】MaterialApp・Scaffold・SafeAreaでアプリ画面を整える
- 6-4【Discord風カラー設計】ダークUIの色・余白・角丸を定数で管理する
- 6-5【サーバー一覧UI】左端のDiscord風サーバーアイコンバーを作る
- 6-6【チャンネル一覧UI】テキストチャンネル・ボイスチャンネルをそれっぽく表示する
- 6-7【データ設計入門】Discord風アプリに必要なclassを考える
- 6-8【チャット画面UI】メッセージ一覧と投稿フォームを作る
- 6-9【メッセージ送信機能】入力した文字をチャット欄に追加する
- 6-10【プロフィールカードUI】Discord風のユーザープロフィールを作る
- 6-11【アイコン登録機能】画像URLでプロフィールアイコンを変更する
- 6-12【プロフィール編集機能】Dialogで名前・ステータス・自己紹介を編集する
- 6-13【メンバー一覧UI】オンライン・離席中・取り込み中を分けて表示する
- 6-14【スマホ対応】Drawerでサーバー一覧・チャンネル一覧を収納する
- 6-15【レスポンシブUI】PC・タブレット・スマホで崩れないDiscord風レイアウトを作る
- 6-16【完成コードを読み解く】Discord風チャットアプリの全体構造を理解する
- 6-17【まとめ】Discord風アプリで学んだUI構築を他のアプリに応用する
- 7-2【導入】LINE風チームタスク管理アプリを作りながらFlutter × Firebaseを学ぶ
- 7-3【完成イメージ】ログイン・トーク一覧・タスク画面・メンバー管理の全体像をつかむ
- 7-4【アプリ設計】単なるTodoではなくチーム型タスク管理アプリとして考える
- 7-5【Firebase準備】Authentication・Firestore・Security Rulesの役割を理解する
- 7-6【Firebase接続】flutterfire configureでfirebase_options.dartを生成する
- 7-7【パッケージ設定】firebase_core・firebase_auth・cloud_firestoreを追加する
- 7-8【main.dart準備】Firebase.initializeAppでアプリ起動前にFirebaseを初期化する
- 7-9【テーマ設計】LINE風の緑・白・薄いグレーでアプリ全体の見た目を整える
- 7-10【共通UI】AppColors・AppCard・AppTextField・ErrorBoxを作る
- 7-11【認証分岐】AuthGateでログイン済み・未ログインの画面を切り替える
- 7-12【ログイン画面】メールアドレスとパスワードでログインするUIを作る
- 7-13【ログイン処理】signInWithEmailAndPasswordでFirebase Authenticationにログインする
- 7-14【新規登録画面】名前・所属・メール・パスワードを入力する画面を作る
- 7-15【ユーザー作成】createUserWithEmailAndPasswordでアカウントを作成する
- 7-16【プロフィール保存】users/{uid} にdisplayName・email・departmentを保存する
- 7-17【ログアウト】signOutでログイン状態を解除する
- 7-18【データ構造】users・teams・members・tasksのつながりを理解する
- 7-19【チーム作成】teams/{teamId} と members/{uid} を同時に作成する
- 7-20【owner登録】チーム作成者を自動でownerとして保存する
- 7-21【memberIds】自分が所属するチームだけを取得するための配列を用意する
- 7-22【トーク一覧】where arrayContainsで参加中チームだけを表示する
- 7-23【TeamCard】チームをLINEのトーク一覧風に表示する
- 7-24【チーム作成UI】FloatingActionButtonからLINE風ボトムシートを表示する
- 7-25【スワイプ削除】Dismissibleでチームを左スワイプ削除できるようにする
- 7-26【タスク設計】teams/{teamId}/tasks/{taskId} に保存する項目を決める
- 7-27【タスク一覧】チーム内のタスクをFirestoreから取得する
- 7-28【ステータス分類】todo・doing・doneで未対応・進行中・完了に分ける
- 7-29【TaskCard】タスクをLINEの吹き出し風UIで表示する
- 7-30【タスク作成】タイトル・説明・担当者・優先度・ステータスを保存する
- 7-31【タスク編集】既存タスクをタップして内容を更新できるようにする
- 7-32【タスク削除】admin以上の権限でタスクを削除できるようにする
- 7-33【表示ラベル】statusLabel・priorityLabelで英語データを日本語表示に変換する
- 7-34【権限設計】owner・admin・member・viewerの違いを理解する
- 7-35【TeamRole enum】Firestoreのrole文字列をDartの権限として扱う
- 7-36【権限判定】canCreateTask・canEditTask・canDeleteTaskを作る
- 7-37【メンバー管理画面】チームの参加メンバーを一覧表示する
- 7-38【メンバー追加】メールアドレスから登録済みユーザーを検索して追加する
- 7-39【LINE風追加UI】ボトムシートでメンバー追加画面を作る
- 7-40【権限チップ】ChoiceChipでadmin・member・viewerを選択できるようにする
- 7-41【権限説明】roleDescriptionで各権限の意味を画面に表示する
- 7-42【権限変更】ownerだけがメンバーの権限を変更できるようにする
- 7-43【Firestore確認】Firebase Consoleでusers・teams・members・tasksを確認する
- 7-44【Security Rules入門】画面側だけでなくFirestore側でデータを守る
- 7-45【開発用Rules】学習中だけ全開放ルールで動作確認する
- 7-46【本番用Rules】ログインユーザー・チームメンバー・権限ごとに制限する
- 7-47【permission-denied】権限エラーが出る原因と確認方法を理解する
- 7-48【インデックスエラー】failed-preconditionとFirestore複合インデックスを理解する
- 7-49【カスタマイズ】色・アプリ名・権限・タスク項目を自分用に変更する
セクションはまだ登録されていません。