---
title: チャットアプリハンズオン
tags:  #flutter #ハンズオン  
author: [Pregum](https://www.docswell.com/user/Pregum)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/Y76NQGMM7V.jpg?width=480
description: FlutterでChatアプリを作成するハンズオンです。
published: August 29, 22
canonical: https://www.docswell.com/s/Pregum/KJPWVK-2022-08-29-030300
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/Y76NQGMM7V.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/G755RVZQ74.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/9J2ND3RWER.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/DEYP21D9EM.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VJN5826D78.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/YE9YK1L8J3.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/GE86R4XZ7D.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/LEL9K681JR.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JMZ2565EW.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/PJR6M3PZ79.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/PEXMV4317X.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/3EKGQZYMJD.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/L73NPD9275.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/87DWLPG6JG.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/VJP92N8ZE8.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/2EVMDKNMEQ.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/57GGYQKX7L.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/4EQXMKN57P.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/KJ46VPGV71.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LE1V39D47G.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/GEWLPQYZ72.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/47ZMKWXLE3.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/YJ6NQG4MJV.jpg)

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