Flutter

Build chat into your Flutter app with TalkJS

Quickly embed a customizable chat experience into your Flutter app using the best chat APIs, feature-rich SDKs, and highly customizable components.

Try for free Contact sales

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final session = Session(appId: 'tPKdyezd');

    final me = session.getUser(
      id: '123456',
      name: 'Alice',
      email: ['alice@example.com'],
      photoUrl: 'https://talkjs.com/images/avatar-1.jpg',
      welcomeMessage: 'Hey there! How are you? :-)',
    );

    session.me = me;

    final other = session.getUser(
      id: '654321',
      name: 'Sebastian',
      email: ['Sebastian@example.com'],
      photoUrl: 'https://talkjs.com/images/avatar-5.jpg',
      welcomeMessage: 'Hey, how can I help?',
    );

    final conversation = session.getConversation(
      id: Talk.oneOnOneId(me.id, other.id),
      participants: {Participant(me), Participant(other)},
    );

    return MaterialApp(
      title: 'TalkJS Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('TalkJS Demo'),
        ),
        body: ChatBox(
          session: session,
          conversation: conversation,
        ),
      ),
    );
  }
}

Hey, I’m having trouble accessing my account. It says my password is incorrect.

5m ago

Hi there! No problem — let’s get that sorted. Have you tried resetting your password using the 'Forgot password?' link?

4m ago

Yes, but I haven’t received the reset email yet.

3m ago

Thanks for confirming. I’ve just sent a new reset link to your email. Please check your inbox and spam folder.

2m ago

Is there anything else I can help you with?

just now

Got it — checking my inbox now!

Hey, I'm trying to manage state with Provider, but my widget isn't rebuilding. Any ideas?

8m ago

Are you calling notifyListeners() after updating the value in your provider? That’s needed to trigger a rebuild.

6m ago

Ah, I think I missed that. Let me check.

5m ago

Yep, that's usually the issue when changes don't propagate.

2m ago

typing...

just now

Write a reply...

Flutter SDK

Connect users with a fully customizable chat using our real-time messaging infrastructure that works great with Flutter.

Drop-in chat UI

Ship faster by using pre-built components that are highly customizable. Get up and running in just 10 minutes.

Fully-featured

All the essential messaging features you need. Replies, mentions, typing indicators, link previews, emojis, and more.

Working with Flutter and TalkJS

Ship faster, simplify your stack, and save on development costs by using the best chat APIs and a feature-rich Flutter chat SDK. It's all you need to add a fully-featured chat into your app in minutes, instead of months.

Flutter SDK documentation

<script>
  import 'package:flutter/material.dart';
  import 'package:talkjs_flutter/talkjs_flutter.dart';

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

  class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);

    @override
    Widget build(BuildContext context) {
      final session = Session(appId: 'YOUR_APP_ID');

      final me = session.getUser(
        id: '123456',
        name: 'Alice',
        email: ['alice@example.com'],
        photoUrl: 'https://talkjs.com/images/avatar-1.jpg'
      );

      session.me = me;

      final other = session.getUser(
        id: '654321',
        name: 'Sebastian',
        email: ['Sebastian@example.com'],
        photoUrl: 'https://talkjs.com/images/avatar-5.jpg'
      );

      final conversation = session.getConversation(
        id: Talk.oneOnOneId(me.id, other.id),
        participants: {Participant(me), Participant(other)},
      );

      return MaterialApp(
        title: 'TalkJS Demo',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('TalkJS Demo'),
          ),
          body: ChatBox(
            session: session,
            conversation: conversation,
          ),
        ),
      );
    }
  }
</script>

Because implementing TalkJS was as fast and easy as it was, we were able to greenlight and move this project along very quickly. Had we not chosen this path, the feature would have either been delayed, or shelved due to the resources needed to implement it.

Sean Elliot

Engineering Manager, Styleseat

.message {
  white-space: normal;
  overflow: hidden;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: solid;
  word-wrap: break-word;
  position: relative;
  display: inline-block;
  max-width: calc(100% - 6rem - 0.25rem - 0.25rem);
  border-color: #F2F2F2;
  background-color: #F2F2F2;
  color: #171717;
}

.has-avatar-spacer .message {
  max-width: calc(100% - 3rem - 0.25rem - 0.25rem);
}

.by-me .message {
  border-color: #EC4899;
  background-color: #EC4899; 
  color: #fff;
  margin-right: 0.50rem;
}

Hey, have you heard about these micro communities people are joining?

8m ago

Yeah, I have! They seem like a great alternative to big social media platforms.

7m ago

Definitely. I joined one for local gardening enthusiasts. It's so much more engaging.

6m ago

That's cool. I've been looking to cut down my social media time. How do you like it?

2m ago

I love it. More meaningful interactions.

just now

I'll start looking into it!

Ready-made chat components you can customize

The Flutter SDK comes with UI components that are forward-compatible and will keep working on future devices and new features. You have complete control over the styling, the layout, and document structure of the chat messages and the possibility to show metadata.

Build chat into your Flutter app with TalkJS

Working with Flutter and TalkJS

Ready-made chat components you can customize

Ready to get started?

Let's talk