フラッターテンプレート
FlutterとBack4Appを使用したリアルタイムチャットアプリケーションの構築

35min
はじめに
チャットアプリケーションを作成するには、リアルタイムデータの管理、ユーザー認証、メディア処理、効率的なデータストレージが必要です。このチュートリアルでは、1対1およびグループ会話、メッセージのステータス、メディア共有をサポートするFlutterでのリアルタイムチャットアプリケーションの構築方法を学びます。バックエンド機能を処理するために、Parse Serverによって提供されるバックエンド・アズ・ア・サービスであるBack4Appを使用します。
このチュートリアルの終わりまでに、以下の機能を持つ完全に機能するチャットアプリを持つことができます:
ユーザー認証: 安全なサインアップとログインプロセス。
リアルタイムメッセージング: ライブクエリを使用した即時メッセージ配信。
ユーザーの存在: ユーザーのオンライン/オフラインステータスを追跡。
メディアストレージ: チャットでの画像の送受信。
メッセージ履歴: ユーザーのチャット履歴を保持。
前提条件
このチュートリアルに従うには、以下が必要です:
Flutter SDK をあなたのマシンにインストールします。 公式のFlutterインストールガイドを参照してください。
FlutterとDartの基本知識が必要です。
IDEまたはテキストエディタ、例えばVisual Studio CodeやAndroid Studioなど。
Back4Appアカウントが必要です。 Back4Appで無料アカウントにサインアップしてください。
Flutter用のParse Server SDKをプロジェクトに追加します。
概要
以下のコンポーネントを使用してチャットアプリケーションを構築します:
ユーザー認証: ユーザーはサインアップおよびログインできます。
連絡先リスト: チャットするユーザーのリストを表示します。
チャット画面: リアルタイムメッセージングインターフェース。
メディア共有: 画像を送受信する機能。
オンラインステータス: ユーザーのオンライン/オフラインステータスを表示します。
ステップ1 – Flutterプロジェクトの設定
1.1. 新しいFlutterプロジェクトを作成する
ターミナルを開いて、次のコマンドを実行します:
Bash
flutter create chat_app
flutter create chat_app
﻿
プロジェクトディレクトリに移動します:
Bash
cd chat_app
cd chat_app
﻿
1.2. 依存関係の追加
「pubspec.yaml」を開いて、次の依存関係を追加します:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  image_picker: ^0.8.4+3
  cached_network_image: ^3.2.0
  uuid: ^3.0.4
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  image_picker: ^0.8.4+3
  cached_network_image: ^3.2.0
  uuid: ^3.0.4
﻿
次のコマンドを実行して、パッケージをインストールします:flutter pub get。
parse_server_sdk_flutter: Back4Appと対話します。
image_picker: ギャラリーまたはカメラから画像を選択します。
cached_network_image: 効率的な画像の読み込みとキャッシング。
uuid: ユニークな識別子を生成します。
﻿
ステップ2 – Back4Appの設定
2.1. 新しい Back4App アプリケーションを作成する
あなたの Back4App ダッシュボード にログインします。
"新しいアプリを作成" をクリックします。
アプリケーションの名前を入力します。例: "ChatApp", そして "作成" をクリックします。
2.2. クラスとデータモデルの設定
次のクラスを作成します:
ユーザー (デフォルトの Parse クラス): ユーザー情報を保存します。
メッセージ: チャットメッセージを保存します。
チャットルーム: ユーザー間のチャットを表します。
2.2.1. ユーザークラス
フィールド:
ユーザー名: 文字列
パスワード: 文字列
メール: 文字列
オンラインかどうか: ブール値
アバター: ファイル（オプション）
この ユーザー クラスは組み込みであり、追加のフィールドがあることを確認する必要があります。
2.2.2. メッセージクラス
フィールド:
送信者: ポインタ<_ユーザー>
受信者: ポインタ<_ユーザー>
チャットルームID: 文字列
コンテンツ: 文字列
画像: ファイル（オプション）
作成日時: 日時（自動追加）
2.2.3. チャットルームクラス
フィールド:
chatRoomId: 文字列
users: Pointer<_User>の配列
lastMessage: 文字列
updatedAt: DateTime（自動更新）
2.3. アプリケーションの資格情報を取得する
次に進む アプリ設定 > セキュリティとキー.
あなたの アプリケーションID と クライアントキー をメモしてください。
ステップ 3 – Flutter アプリで Parse を初期化する
次のように lib/main.dart を開いて修正します:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/login_screen.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/login_screen.dart'; // You'll create this file next

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginScreen(),
    );
  }
}
﻿
「'YOUR_APPLICATION_ID'」と'YOUR_CLIENT_KEY'を実際のBack4Appの資格情報に置き換えてください。
ステップ4 – ユーザー認証の実装
4.1. 認証サービスの作成
「services」という新しいディレクトリを作成し、「lib」の下に、「auth_service.dart」という名前のファイルを追加します。
Dart
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String email, String password) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);

    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }

  Future<ParseUser?> getCurrentUser() async {
    return await ParseUser.currentUser() as ParseUser?;
  }
}
// lib/services/auth_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class AuthService {
  Future<ParseUser?> signUp(String username, String email, String password) async {
    var user = ParseUser(username, password, email);

    var response = await user.signUp();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);

    var response = await user.login();

    if (response.success) {
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }

  Future<ParseUser?> getCurrentUser() async {
    return await ParseUser.currentUser() as ParseUser?;
  }
}
﻿
4.2. ログインとサインアップ画面の作成
新しいディレクトリを作成します。screensを libの下に作成し、次の名前のファイルを追加します。login_screen.dart と signup_screen.dart.
4.2.1. ログイン画面
Dart
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';
import 'signup_screen.dart';

class LoginScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login(BuildContext context) async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App - Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _login(context),
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () => Navigator.push(
                  context, MaterialPageRoute(builder: (context) => SignupScreen())),
              child: Text('Don\'t have an account? Sign up'),
            ),
          ],
        ),
      ),
    );
  }
}
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';
import 'signup_screen.dart';

class LoginScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _login(BuildContext context) async {
    var user = await _authService.login(
      _usernameController.text.trim(),
      _passwordController.text.trim(),
    );

    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Login failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App - Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _login(context),
              child: Text('Login'),
            ),
            TextButton(
              onPressed: () => Navigator.push(
                  context, MaterialPageRoute(builder: (context) => SignupScreen())),
              child: Text('Don\'t have an account? Sign up'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
4.2.2. サインアップ画面
Dart
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp(BuildContext context) async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _emailController.text.trim(),
      _passwordController.text.trim(),
    );

    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App - Sign Up'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _signUp(context),
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}
// lib/screens/signup_screen.dart
import 'package:flutter/material.dart';
import '../services/auth_service.dart';
import 'home_screen.dart';

class SignupScreen extends StatelessWidget {
  final AuthService _authService = AuthService();
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  void _signUp(BuildContext context) async {
    var user = await _authService.signUp(
      _usernameController.text.trim(),
      _emailController.text.trim(),
      _passwordController.text.trim(),
    );

    if (user != null) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('Sign up failed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chat App - Sign Up'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: _usernameController,
              decoration: InputDecoration(labelText: 'Username'),
            ),
            TextField(
              controller: _emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            TextField(
              controller: _passwordController,
              decoration: InputDecoration(labelText: 'Password'),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => _signUp(context),
              child: Text('Sign Up'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
ステップ 5 – ユーザーの存在を実装する
5.1. ユーザーのオンラインステータスを更新する
ユーザーのオンラインステータスを更新するために AuthService にメソッドを作成します:
Dart
// lib/services/auth_service.dart

class AuthService {
  // ... existing methods ...

  Future<void> updateUserOnlineStatus(bool isOnline) async {
    var user = await ParseUser.currentUser() as ParseUser?;
    if (user != null) {
      user.set('isOnline', isOnline);
      await user.save();
    }
  }
}
// lib/services/auth_service.dart

class AuthService {
  // ... existing methods ...

  Future<void> updateUserOnlineStatus(bool isOnline) async {
    var user = await ParseUser.currentUser() as ParseUser?;
    if (user != null) {
      user.set('isOnline', isOnline);
      await user.save();
    }
  }
}
﻿
5.2. ログインおよびログアウト時にオンラインステータスを設定する
ログインおよびログアウトメソッドを更新します:
Dart
// lib/services/auth_service.dart

class AuthService {
  // ... existing methods ...

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);

    var response = await user.login();

    if (response.success) {
      await updateUserOnlineStatus(true);
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    await updateUserOnlineStatus(false);
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
// lib/services/auth_service.dart

class AuthService {
  // ... existing methods ...

  Future<ParseUser?> login(String username, String password) async {
    var user = ParseUser(username, password, null);

    var response = await user.login();

    if (response.success) {
      await updateUserOnlineStatus(true);
      return user;
    } else {
      return null;
    }
  }

  Future<void> logout() async {
    await updateUserOnlineStatus(false);
    var user = await ParseUser.currentUser() as ParseUser?;
    await user?.logout();
  }
}
﻿
ステップ 6 – 連絡先リストの表示
6.1. ユーザーサービスの作成
作成する user_service.dart の下に services:
Dart
// lib/services/user_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class UserService {
  Future<List<ParseUser>> getAllUsers() async {
    final QueryBuilder<ParseUser> queryUsers =
        QueryBuilder<ParseUser>(ParseUser.forQuery());

    final ParseResponse apiResponse = await queryUsers.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<ParseUser>;
    } else {
      return [];
    }
  }
}
// lib/services/user_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class UserService {
  Future<List<ParseUser>> getAllUsers() async {
    final QueryBuilder<ParseUser> queryUsers =
        QueryBuilder<ParseUser>(ParseUser.forQuery());

    final ParseResponse apiResponse = await queryUsers.query();

    if (apiResponse.success && apiResponse.results != null) {
      return apiResponse.results as List<ParseUser>;
    } else {
      return [];
    }
  }
}
﻿
6.2. ホーム画面の作成
Dart
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../services/user_service.dart';
import '../services/auth_service.dart';
import 'chat_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final UserService _userService = UserService();
  final AuthService _authService = AuthService();
  List<ParseUser> users = [];
  ParseUser? currentUser;

  @override
  void initState() {
    super.initState();
    fetchUsers();
    getCurrentUser();
  }

  void getCurrentUser() async {
    currentUser = await _authService.getCurrentUser();
  }

  void fetchUsers() async {
    var allUsers = await _userService.getAllUsers();
    setState(() {
      users = allUsers.where((user) => user.username != currentUser?.username).toList();
    });
  }

  void _logout(BuildContext context) async {
    await _authService.logout();
    Navigator.pushReplacementNamed(context, '/');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contacts'),
        actions: [
          IconButton(onPressed: () => _logout(context), icon: Icon(Icons.logout)),
        ],
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          var user = users[index];
          return ListTile(
            title: Text(user.username ?? ''),
            subtitle: Text(user.get('isOnline') == true ? 'Online' : 'Offline'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ChatScreen(receiver: user)),
              );
            },
          );
        },
      ),
    );
  }
}
// lib/screens/home_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../services/user_service.dart';
import '../services/auth_service.dart';
import 'chat_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final UserService _userService = UserService();
  final AuthService _authService = AuthService();
  List<ParseUser> users = [];
  ParseUser? currentUser;

  @override
  void initState() {
    super.initState();
    fetchUsers();
    getCurrentUser();
  }

  void getCurrentUser() async {
    currentUser = await _authService.getCurrentUser();
  }

  void fetchUsers() async {
    var allUsers = await _userService.getAllUsers();
    setState(() {
      users = allUsers.where((user) => user.username != currentUser?.username).toList();
    });
  }

  void _logout(BuildContext context) async {
    await _authService.logout();
    Navigator.pushReplacementNamed(context, '/');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contacts'),
        actions: [
          IconButton(onPressed: () => _logout(context), icon: Icon(Icons.logout)),
        ],
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          var user = users[index];
          return ListTile(
            title: Text(user.username ?? ''),
            subtitle: Text(user.get('isOnline') == true ? 'Online' : 'Offline'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => ChatScreen(receiver: user)),
              );
            },
          );
        },
      ),
    );
  }
}
﻿
ステップ 7 – ライブクエリを使用したリアルタイムメッセージングの実装
7.1. ライブクエリクライアントの設定
次の依存関係を追加します pubspec.yaml:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter:
    git:
      url: https://github.com/parse-community/Parse-SDK-Flutter.git
      ref: master
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter:
    git:
      url: https://github.com/parse-community/Parse-SDK-Flutter.git
      ref: master
﻿
これにより、Live Queryサポートを備えた最新バージョンが確保されます。
7.2. Live Queryを初期化する main.dart
Dart
// lib/main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';
  const liveQueryUrl = 'wss://YOUR_APP.back4app.io';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
    liveQueryUrl: liveQueryUrl,
  );

  runApp(MyApp());
}
// lib/main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';
  const liveQueryUrl = 'wss://YOUR_APP.back4app.io';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
    liveQueryUrl: liveQueryUrl,
  );

  runApp(MyApp());
}
﻿
「'YOUR_APP'」をあなたのBack4Appアプリケーションのサブドメインに置き換えます。
7.3. チャット画面を作成する
Dart
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:uuid/uuid.dart';
import 'package:image_picker/image_picker.dart';
import '../services/auth_service.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser receiver;

  ChatScreen({required this.receiver});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final AuthService _authService = AuthService();
  ParseUser? currentUser;
  List<ParseObject> messages = [];
  String chatRoomId = '';
  final TextEditingController _messageController = TextEditingController();
  late ParseLiveList<ParseObject> liveMessages;

  @override
  void initState() {
    super.initState();
    getCurrentUser();
    setupChatRoom();
  }

  void getCurrentUser() async {
    currentUser = await _authService.getCurrentUser();
    if (currentUser != null) {
      setupLiveQuery();
    }
  }

  void setupChatRoom() {
    String userId = currentUser!.objectId!;
    String receiverId = widget.receiver.objectId!;
    chatRoomId = userId.compareTo(receiverId) > 0
        ? '$userId-$receiverId'
        : '$receiverId-$userId';
  }

  void setupLiveQuery() {
    QueryBuilder<ParseObject> queryMessages =
        QueryBuilder<ParseObject>(ParseObject('Message'))
          ..whereEqualTo('chatRoomId', chatRoomId)
          ..orderByAscending('createdAt');

    liveMessages = ParseLiveList<ParseObject>(
      queryMessages,
      listeningIncludes: ['sender'],
      lazyLoading: false,
    );

    setState(() {});
  }

  void sendMessage({String? content, ParseFileBase? imageFile}) async {
    var message = ParseObject('Message')
      ..set('sender', currentUser)
      ..set('receiver', widget.receiver)
      ..set('chatRoomId', chatRoomId)
      ..set('content', content ?? '')
      ..set('image', imageFile);

    await message.save();

    _messageController.clear();
  }

  void pickImage() async {
    final picker = ImagePicker();
    final pickedFile =
        await picker.pickImage(source: ImageSource.gallery, imageQuality: 50);

    if (pickedFile != null) {
      var file = ParseFile(File(pickedFile.path));
      await file.save();
      sendMessage(imageFile: file);
    }
  }

  @override
  void dispose() {
    liveMessages.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (currentUser == null || liveMessages == null) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Chat with ${widget.receiver.username}'),
        ),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Chat with ${widget.receiver.username}'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ParseLiveListWidget<ParseObject>(
              query: liveMessages,
              reverse: false,
              lazyLoading: false,
              childBuilder: (context, snapshot) {
                if (snapshot.failed) {
                  return Text('Error: ${snapshot.error}');
                } else if (snapshot.hasData) {
                  var message = snapshot.loadedData!;
                  var sender = message.get<ParseUser>('sender')!;
                  var isMe = sender.objectId == currentUser!.objectId;
                  var content = message.get<String>('content') ?? '';
                  var image = message.get<ParseFileBase>('image');

                  return Align(
                    alignment:
                        isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(8),
                      margin: EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: isMe ? Colors.blue[100] : Colors.grey[300],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          if (content.isNotEmpty)
                            Text(content),
                          if (image != null)
                            CachedNetworkImage(
                              imageUrl: image.url!,
                              placeholder: (context, url) =>
                                  CircularProgressIndicator(),
                              errorWidget: (context, url, error) =>
                                  Icon(Icons.error),
                            ),
                        ],
                      ),
                    ),
                  );
                } else {
                  return Container();
                }
              },
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8),
            color: Colors.white,
            child: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.photo),
                  onPressed: pickImage,
                ),
                Expanded(
                  child: TextField(
                    controller: _messageController,
                    decoration:
                        InputDecoration.collapsed(hintText: 'Type a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    if (_messageController.text.trim().isNotEmpty) {
                      sendMessage(content: _messageController.text.trim());
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
// lib/screens/chat_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:uuid/uuid.dart';
import 'package:image_picker/image_picker.dart';
import '../services/auth_service.dart';
import 'package:cached_network_image/cached_network_image.dart';

class ChatScreen extends StatefulWidget {
  final ParseUser receiver;

  ChatScreen({required this.receiver});

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final AuthService _authService = AuthService();
  ParseUser? currentUser;
  List<ParseObject> messages = [];
  String chatRoomId = '';
  final TextEditingController _messageController = TextEditingController();
  late ParseLiveList<ParseObject> liveMessages;

  @override
  void initState() {
    super.initState();
    getCurrentUser();
    setupChatRoom();
  }

  void getCurrentUser() async {
    currentUser = await _authService.getCurrentUser();
    if (currentUser != null) {
      setupLiveQuery();
    }
  }

  void setupChatRoom() {
    String userId = currentUser!.objectId!;
    String receiverId = widget.receiver.objectId!;
    chatRoomId = userId.compareTo(receiverId) > 0
        ? '$userId-$receiverId'
        : '$receiverId-$userId';
  }

  void setupLiveQuery() {
    QueryBuilder<ParseObject> queryMessages =
        QueryBuilder<ParseObject>(ParseObject('Message'))
          ..whereEqualTo('chatRoomId', chatRoomId)
          ..orderByAscending('createdAt');

    liveMessages = ParseLiveList<ParseObject>(
      queryMessages,
      listeningIncludes: ['sender'],
      lazyLoading: false,
    );

    setState(() {});
  }

  void sendMessage({String? content, ParseFileBase? imageFile}) async {
    var message = ParseObject('Message')
      ..set('sender', currentUser)
      ..set('receiver', widget.receiver)
      ..set('chatRoomId', chatRoomId)
      ..set('content', content ?? '')
      ..set('image', imageFile);

    await message.save();

    _messageController.clear();
  }

  void pickImage() async {
    final picker = ImagePicker();
    final pickedFile =
        await picker.pickImage(source: ImageSource.gallery, imageQuality: 50);

    if (pickedFile != null) {
      var file = ParseFile(File(pickedFile.path));
      await file.save();
      sendMessage(imageFile: file);
    }
  }

  @override
  void dispose() {
    liveMessages.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    if (currentUser == null || liveMessages == null) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Chat with ${widget.receiver.username}'),
        ),
        body: Center(child: CircularProgressIndicator()),
      );
    }

    return Scaffold(
      appBar: AppBar(
        title: Text('Chat with ${widget.receiver.username}'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ParseLiveListWidget<ParseObject>(
              query: liveMessages,
              reverse: false,
              lazyLoading: false,
              childBuilder: (context, snapshot) {
                if (snapshot.failed) {
                  return Text('Error: ${snapshot.error}');
                } else if (snapshot.hasData) {
                  var message = snapshot.loadedData!;
                  var sender = message.get<ParseUser>('sender')!;
                  var isMe = sender.objectId == currentUser!.objectId;
                  var content = message.get<String>('content') ?? '';
                  var image = message.get<ParseFileBase>('image');

                  return Align(
                    alignment:
                        isMe ? Alignment.centerRight : Alignment.centerLeft,
                    child: Container(
                      padding: EdgeInsets.all(8),
                      margin: EdgeInsets.all(8),
                      decoration: BoxDecoration(
                        color: isMe ? Colors.blue[100] : Colors.grey[300],
                        borderRadius: BorderRadius.circular(8),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          if (content.isNotEmpty)
                            Text(content),
                          if (image != null)
                            CachedNetworkImage(
                              imageUrl: image.url!,
                              placeholder: (context, url) =>
                                  CircularProgressIndicator(),
                              errorWidget: (context, url, error) =>
                                  Icon(Icons.error),
                            ),
                        ],
                      ),
                    ),
                  );
                } else {
                  return Container();
                }
              },
            ),
          ),
          Divider(height: 1),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 8),
            color: Colors.white,
            child: Row(
              children: [
                IconButton(
                  icon: Icon(Icons.photo),
                  onPressed: pickImage,
                ),
                Expanded(
                  child: TextField(
                    controller: _messageController,
                    decoration:
                        InputDecoration.collapsed(hintText: 'Type a message'),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.send),
                  onPressed: () {
                    if (_messageController.text.trim().isNotEmpty) {
                      sendMessage(content: _messageController.text.trim());
                    }
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
﻿
説明
ParseLiveListWidget: ライブクエリの更新をリッスンし、データが変更されると再構築するウィジェットです。
sendMessage(): テキストメッセージまたは画像を送信します。
pickImage(): image_pickerを使用して画像を選択し、それをメッセージとして送信します。
setupLiveQuery(): チャットルームで新しいメッセージをリッスンするためのライブクエリを設定します。
ステップ 8 – アプリのテスト
8.1. アプリを実行する
ターミナルで、次のコマンドを実行します:
Bash
flutter run
flutter run
﻿
8.2. テストメッセージング
2つのデバイスまたはエミュレーターでアプリを開く。
異なるユーザーアカウントでサインアップまたはログインする。
1つのアカウントから、連絡先リストから他のユーザーを選択する。
メッセージと画像を送信する; 両方のデバイスにリアルタイムで表示されるはずです。
結論
おめでとうございます！ Back4Appを使用してFlutterでリアルタイムチャットアプリケーションを構築しました。このアプリは次の機能をサポートしています:
ユーザー認証: 安全なログインとサインアップ。
リアルタイムメッセージング: ライブクエリを使用した即時更新。
ユーザーの存在: オンライン/オフラインのステータストラッキング。
メディア共有: 画像の送受信。
メッセージ履歴: チャットメッセージの永続化。
次のステップ
グループチャット: アプリを拡張してグループ会話をサポートします。
メッセージのステータス: 読了通知と入力インジケーターを実装します。
プッシュ通知: アプリがバックグラウンドにあるときに新しいメッセージの通知を送信します。
プロフィール写真: ユーザーがアバターをアップロードできるようにします。
セキュリティ強化: ACLとロールベースの権限でデータを保護します。
追加リソース
﻿Back4App ドキュメント﻿
﻿Flutter 用の Parse SDK ガイド﻿
﻿Flutter 公式ドキュメント﻿
﻿Parse ライブクエリ﻿
楽しいコーディングを！
更新日 24 Jan 2025
このページは役に立ちましたか？
FlutterとBack4Appを使ってイベント予約アプリを構築する方法
Flutter、Back4App、およびCloud Codeを介したStripe統合を使用したEコマースアプリの構築