Flutter Packages Weekly #6: flutter_chat_ui

Woogi
3 min readJun 8, 2024

--

flutter_chat_ui: A Free, Open-Source, and Customizable Chat UI for Your Flutter Apps

Welcome to the sixth installment of Flutter Packages Weekly! In this edition, we’re spotlighting a fantastic package that simplifies building chat interfaces in Flutter: flutter_chat_ui. But this isn’t just any chat UI package. It’s part of the larger Flyer Chat platform, a community-driven initiative focused on creating in-app chat experiences for Flutter and React Native. Let’s dive into why flutter_chat_ui is a standout choice for developers looking to add chat functionality to their Flutter apps.

Why Use flutter_chat_ui?

  • Truly Free and Open-Source: Flyer Chat, the platform behind flutter_chat_ui, is committed to providing developers with a completely free and open-source solution for building chat experiences. There are no hidden costs or paid plugins, making it accessible to all.
  • Backend Agnostic: Flexibility is key. You can choose the backend that best suits your needs, whether it’s Firebase, your own custom backend, or one of Flyer Chat’s upcoming SaaS or self-hosted solutions.
  • Customizable to Your Heart’s Content: flutter_chat_ui embraces customization. Tailor the themes, locales, and more to perfectly match your app’s design language. If you need something specific, the Flyer Chat community is always open to suggestions and contributions.
  • Lightweight and Dependency-Free: flutter_chat_ui is designed to be lean and mean. It doesn’t come with a ton of dependencies, allowing you to use your favorite packages for image selection, file handling, and other tasks.
flutter_chat_ui

Key Features & How to Use Them

flutter_chat_ui provides a comprehensive set of features for creating your ideal chat experience:

  1. Chat: The foundation of your chat interface, handling message display, user input, and overall interaction.
  2. Message: Customize the appearance and behavior of individual messages, including text, images, and other media.
  3. Input: A user-friendly input field for composing and sending messages with ease.
  4. ChatTheme: Style your chat interface to perfection, from colors and fonts to the look of message bubbles.
  5. ChatController: Gain fine-grained control over how your chat functions, managing message loading, sending, and updates.

Installation Guide

Get started with flutter_chat_ui by adding it to your pubspec.yaml file:

dependencies:
flutter_chat_ui: ^latest_version

Don’t forget to replace latest_version with the most up-to-date version on pub.dev.

Example: Basic Chat Interface

class BasicChatPage extends StatefulWidget {
const BasicChatPage({super.key});

@override
State<BasicChatPage> createState() => _BasicChatPageState();
}

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

@override
Widget build(BuildContext context) => Scaffold(
body: Chat(
messages: _messages,
onSendPressed: _handleSendPressed,
user: _user,
),
);

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

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

_addMessage(textMessage);
}
}

// For the testing purposes, you should probably use https://pub.dev/packages/uuid.
String randomString() {
final random = Random.secure();
final values = List<int>.generate(16, (i) => random.nextInt(255));
return base64UrlEncode(values);
}

Beyond the Basics

The flutter_chat_ui example project showcases a wide range of possibilities, demonstrating how to integrate with Firebase for real-time messaging, handle image attachments, and implement various customization options.

Conclusion

In the realm of app development, crafting intuitive and feature-rich chat interfaces is crucial for fostering user engagement and communication. flutter_chat_ui simplifies this process, providing a comprehensive set of tools and components that accelerate chat app development. By leveraging flutter_chat_ui, you’re not just building a chat feature; you’re creating a platform for seamless and meaningful conversations within your Flutter applications.

Stay tuned for more exciting package explorations in our Flutter Packages Weekly series!

https://pub.dev/packages/flutter_chat_ui

--

--