This package abstracts all the complexity in creating the UI, UX and functionalities when creating a Chat in Flutter. Just plug and play.

Features

For now, in this first version it is possible to send only text messages

Getting started

First you nedd to add this package to your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter
  fchat: ˆ1.0.0

or just run in your terminal

flutter pub add fchat

Usage

import 'package:flutter/material.dart';
import 'package:fchat/fchat.dart';

void main() {
  runApp(const MyApp());
}

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final List<MessageModel> messages = [];
  final user = UserModel(
    id: 1,
    name: 'William',
    photoUrl: 'https://i.pravatar.cc/150?img=8',
  );

  final user2 = UserModel(
    id: 2,
    name: 'Cíntia',
    photoUrl: 'https://i.pravatar.cc/150?img=5',
  );

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

  Future<List<MessageModel>> getMessages() async {
    await Future.delayed(const Duration(seconds: 4));
    return [
      MessageModel(
        id: DateTime.now().millisecondsSinceEpoch,
        author: user,
        message: 'Olá, tudo bem?',
        date: DateTime.now(),
      ),
      MessageModel(
        id: DateTime.now().millisecondsSinceEpoch,
        author: user2,
        message: 'Como vai você?',
        date: DateTime.now(),
      ),
      MessageModel(
        id: DateTime.now().millisecondsSinceEpoch,
        author: user2,
        message: 'Tudo bem?',
        date: DateTime.now(),
      ),
      MessageModel(
        id: DateTime.now().millisecondsSinceEpoch,
        author: user2,
        message: 'Tudo sim e você?',
        date: DateTime.now(),
      ),
    ];
  }

  void onSend(String value) {
    final message = MessageModel(
      id: DateTime.now().millisecondsSinceEpoch,
      author: user2,
      message: value,
      date: DateTime.now(),
    );

    setState(() {
      messages.add(message);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: FutureBuilder(
        future: getMessages(),
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.none || ConnectionState.waiting:
              return const Center(
                child: CircularProgressIndicator(),
              );
            case ConnectionState.done:
              if (snapshot.hasData) {
                return FChat(
                  messages: snapshot.data as List<MessageModel>,
                  onSend: onSend,
                  user: user,
                );
              }
              break;
            default:
              if (snapshot.hasError) {
                return Center(
                  child: Text(snapshot.error.toString()),
                );
              }
          }
          
          return FChat(
            messages: messages,
            onSend: onSend,
            user: user,
          );
        },
      ),
    );
  }
}

Additional information

Feel free to contribute to this project. All pull requests will be analyzed.

Libraries

fchat
Support for doing something awesome.