Creare una chat in Flutter con flutter_chat_ui

flutter_chat_ui è un package per Flutter che ci consente di creare un sistema di chat.

Ovviamente ci aiuta nella parte di costruzione della UI, non si occupa del salvataggio dei dati su db.

Anche noi, nell'esempio qui sotto che ricalca quello ufficiale, non salveremo i dati su db.

Ma installeremo comunque varie librerie per renderlo il più possibile vicino alla realtà.

I dati iniziali li caricheremo da un JSON.

Cominciamo con l'installare un pò di roba:

flutter pub add flutter_chat_ui intl flutter_chat_types uuid

Sotto la cartella assets messaggi.json che trovate qui.

A questo punto modifichiamo il pubspec.yaml per individuare il file:

flutter:
  uses-material-design: true
  assets:
    - assets/messaggi.json

Infine la schermata:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:flutter_chat_ui/flutter_chat_ui.dart';
import 'package:intl/date_symbol_data_local.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:uuid/uuid.dart';

void main() {
  initializeDateFormatting().then(
    (_) => runApp(
      const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<types.Message> _messaggi = [];
  final _user = const types.User(
    id: '82091008-a484-4a89-ae75-a22bf8d6f3ac',
  );

  @override
  void initState() {
    super.initState();
    _loadMessages();
  }

  void _loadMessages() async {
    final response = await rootBundle.loadString('assets/messaggi.json');
    final messages = (jsonDecode(response) as List)
        .map((e) => types.Message.fromJson(e as Map<String, dynamic>))
        .toList();

    setState(() {
      _messaggi = messages;
    });
  }

  void _addMessage(types.Message message) {
    setState(() {
      _messaggi.insert(0, message);
    });
  }

  void _handleSendPressed(types.PartialText message) {
    final textMessage = types.TextMessage(
      author: _user,
      createdAt: DateTime.now().millisecondsSinceEpoch,
      id: const Uuid().v4(),
      text: message.text,
    );

    _addMessage(textMessage);
  }

  void _handlePreviewDataFetched(
    types.TextMessage message,
    types.PreviewData previewData,
  ) {
    final index = _messaggi.indexWhere((element) => element.id == message.id);
    final updatedMessage = (_messaggi[index] as types.TextMessage).copyWith(
      previewData: previewData,
    );

    setState(() {
      _messaggi[index] = updatedMessage;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Chat(
        messages: _messaggi,
        onPreviewDataFetched: _handlePreviewDataFetched,
        onSendPressed: _handleSendPressed,
        showUserAvatars: true,
        showUserNames: true,
        user: _user,
        theme: const DefaultChatTheme(
          seenIcon: Text(
            'read',
            style: TextStyle(
              fontSize: 10.0,
            ),
          ),
        ),
      ),
    );
  }
}

Enjoy!