Flutterアプリケーション開発概論
FlutteriOSAndroidMacOSWindows基礎から学ぶ開発アプリ開発
目次
- 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【まとめ】どんなアプリでも同じ流れで作れる
- 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構築を他のアプリに応用する
(No sections available)