Skip to main content

Basic Usage

You start with a Chat widget that will render a chat. It has 3 required parameters:

  • messages - an array of messages to be rendered. Accepts abstract message, see types. If you have your message types you will need to map those to any of the defined ones. Let us know if we need to add more message types or add more fields to the existing ones.
  • onSendPressed - a function that will have a partial text message as a parameter. See types for more info on how types are structured. From the partial text message you need to create a text message which will at least have author, id and text, this is done by you because we wanted to give you more control over those values.
  • user - a User class, that has only one required field - an id, used to determine the message author.

Below you will find a drop-in example of the chat with only text messages.


Try to write any URL, for example,, it should be unwrapped in a rich preview.

import 'dart:convert';
import 'dart:math';
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';
// For the testing purposes, you should probably use
String randomString() {
final random =;
final values = List<int>.generate(16, (i) => random.nextInt(255));
return base64UrlEncode(values);
void main() {
runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
_MyHomePageState createState() => _MyHomePageState();
class _MyHomePageState extends State<MyHomePage> {
List<types.Message> _messages = [];
final _user = const types.User(id: '06c33e8b-e835-4736-80f4-63f44b66666c');
void _addMessage(types.Message message) {
setState(() {
_messages.insert(0, message);
void _handleSendPressed(types.PartialText message) {
final textMessage = types.TextMessage(
author: _user,
id: randomString(),
text: message.text,
Widget build(BuildContext context) {
return Scaffold(
body: Chat(
messages: _messages,
onSendPressed: _handleSendPressed,
user: _user,

To check all supported parameters see API reference.