チャットアプリハンズオン

Chat アプリ ハンズオン Chat アプリハンズオン with Flutter pregum pregum 1

アプリ ハンズオン 目次 Chat 最初に とは？ Flutter とネイティブアプリとの違い なぜ他のXPではなくFlutterなのか？ 今日作るアプリについて ChatApp 作成 ( 時間があれば ) 、質疑応答 Flutter pregum 2

Chat アプリ ハンズオン 最初に 今日はハンズオンに参加していただき、ありがとうございます。 1 点お願いがあります。 サンプルのカウンターアプリが起動ができていない方は 話している最初の10~15分程度でサンプルのカウンターアプリの起動 まで準備していただけますと スムーズに進行できるかと思いますので、ご協力お願いします。 それではよろしくお願いします。 pregum 3

Chat アプリ ハンズオン 動作環境 のバージョン: 3.0.5 Flutter のバージョンは flutter doctor -v で確認できます。 Flutter のバージョンをいじりたくない場合は fvm を入れてバージョンを固定しましょう . brew install fvm コマンド実行後、今回の作業フォルダで fvm local 3.0.5 -f を実行すれば OK 参考サイト: https://zenn.dev/riscait/articles/flutter-versionFlutter management pregum 4

• https://zenn.dev/riscait/articles/flutter-version-management

Chat アプリ ハンズオン 自己紹介 年生まれ 普段はKotlin, Swift, TypeScript で開発しています Flutter で個人アプリを 作っています 1995 pregum 5

Chat アプリ ハンズオン Flutter とは？ が開発中のクロスプラットフォーム(以降XP)開発が可能なフ レームワークです。 今現在(2022/8/22)、iOS/Android/Web/Linux/macOS/Windowが 開発可能です。 Google pregum 6

Chat アプリ ハンズオン Flutter とネイティブアプリとの違い 開発スピードと処理速度 項目 Flutter パフォーマンス 若干遅い 開発速度 概ね１Platform分 検討されるケース 開発コスト削減 pregum ネイティブアプリ 早い OS 数に応じて遅くなる native の機能が必要 7

Chat アプリ ハンズオン なぜ他のXPではなくFlutterなのか？ 色々ありますが以下が大きな要因です。 いい感じのUIが標準ライブラリで作れる アプリを起動しながらレイアウトの微調整が可能 pregum 8

Chat アプリ ハンズオン 今日作るアプリについて 今日できるアプリ https://github.com/Pregum/chat-app-hands-on-flutter 機能一覧 チャット送信機能 メッセージ受信機能 pregum 9

• https://github.com/Pregum/chat-app-hands-on-flutter

Chat アプリ ハンズオン アプリを作り始める前に Flutter のUIについて のUIは全てウィジェット テキスト ボタン チェックボックス Flutter etc... pregum 10

Chat アプリ ハンズオン Flutter のUIについて ウィジェットは大きく分けて2種類存在する 状態(State)を持つStateful Widget setState() で状態を変更可能 状態(State)を持たないStateless Widget setState() は使用不可 親ウィジェットや外部から受け取るデータによって更新可能 最初はStateful Widgetを使っておけばOK pregum 11

Chat

アプリ ハンズオン

Flutter

は宣言的UI

宣言的UI (React, SwiftUI, etc...)
String name = 'taro';
Center(
child: Text('Hello $name'),
),
// -> Hello taro

命令的UI (UIKit, WinForms, etc...)
text.frame = CGRect(
x: 50,
y: 50,
width: 50,
height: 50
)
text.text = "taro"
text.textAlignment = NSTextAlignment.Center

何を表示させるかを記述する。 レイアウトの配置からテキストの
文字列まで記述する。
pregum

12

Chat アプリ ハンズオン 一言で表すと 宣言的UIは何をしたいかをコードで伝える (What) 命令的UIはどのようにしたいかをコードで伝える (How) pregum 13

Chat アプリ ハンズオン Chat アプリで使う主なウィジェット Column 縦並びでウィジェットを配置してくれるウィジェット SingleChildScrollView スクロールする画面を作ってくれるウィジェット pregum 14

Chat アプリ ハンズオン 作成の流れ に接続 2. 受信メッセージをリスト形式で表示 3. 送信用メッセージ入力欄を作成 4. デザインを調整 1. Firebase pregum 15

Chat アプリ ハンズオン プロジェクトのクローン 下記コマンドを叩いて テンプレートのプロジェクトをローカルにクローンします。 git clone [email protected]:Pregum/chat-app-hands-on-flutter.git pregum 16

Chat アプリ ハンズオン step1. Firebase に接続 したプロジェクトに既にプロジェクトに接続されているため、 今回はそのプロジェクトを使用します。 自分でプロジェクト入れる場合は、下記サイトに沿って入れてみてく ださい。 clone https://firebase.google.com/docs/flutter/setup?platform=android pregum 17

• https://firebase.google.com/docs/flutter/setup?platform=android

Chat アプリ ハンズオン step2. 受信メッセージをリスト形式で表示 ファイルをmain.dartファイルへ コピー ペーストしてください。 step2.dart & pregum 18

Chat アプリ ハンズオン step3. 送信用メッセージ入力欄を作成 ファイルをmain.dartファイルへ コピー ペーストしてください。 step3.dart & pregum 19

Chat アプリ ハンズオン step4. デザインを調整 をmain.dartへ コピー ペーストしてください。 step4.dart & pregum 20

Chat アプリ ハンズオン 完成 お疲れ様でした pregum 21

Chat アプリ ハンズオン 改善ヒント 少しずつデータを読み込む仕組みを作る 日付が変わった箇所で日にちを表示するウィジェットを入れてみる 動画や画像を送信できるようにしてみる ログイン機能を作成し、ユーザーごとにチャットルームを作成して みる pregum 22

Chat アプリ ハンズオン 参考サイト https://twitter.com/gethackteam/status/1268892357027663873? ref_src=twsrc^tfw|twcamp^tweetembed|twterm^126889235702 7663873|twgr^12007820d2fc3fecbe0ca6381183ab580763b432| twcon^s1_&ref_url=https%3A%2F%2Fqiita.com%2FHiroyuki_OSA KI%2Fitems%2Ff3f88ae535550e95389d https://qiita.com/Hiroyuki_OSAKI/items/f3f88ae535550e95389d https://ui.dev/imperative-vs-declarative-programming pregum 23

• https://twitter.com/gethackteam/status/1268892357027663873?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1268892357027663873|twgr^12007820d2fc3fecbe0ca6381183ab580763b432|twcon^s1_&ref_url=https://qiita.com/Hiroyuki_OSAKI/items/f3f88ae535550e95389d
• https://qiita.com/Hiroyuki_OSAKI/items/f3f88ae535550e95389d
• https://ui.dev/imperative-vs-declarative-programming