Flutter chat SDK with push notifications for Android and iOS

Install talkjs_flutter from pub.dev

Add the talkjs_flutter package to your app. It needs Flutter 3.38 or later and Dart 3.10 or later, and it runs on Android API 24 or later and iOS 15 or later. On Android, also turn on core library desugaring with Java 17 and desugar_jdk_libs:2.1.5, as the getting-started guide shows.

flutter pub add talkjs_flutter

Put a ChatBox in your widget tree

Create a Session with your app ID and set session.me to the current user right away. Then create the other user, get a one-on-one conversation with Talk.oneOnOneId, and pass the session and conversation to a ChatBox.

This is the sample from the Flutter getting-started guide. It passes no token, which works while authentication is off, and that’s how every new TalkJS account starts. Step 3 adds the token. The sample sets no role on its users. Add a role to each user, or getUser logs a warning.

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);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    final session = Session(appId: '<APP_ID>');

    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,
        ),
      ),
    );
  }
}

Sign a user token on your server

Without authentication, anyone could send or read messages as any user. So before you go live, your backend signs a JWT for each user with your secret key, and your app passes it to the Session as token. For tokens that refresh, pass a tokenFetcher that gets a new token from your server.

Here’s the Dart version from the authentication docs, using dart_jsonwebtoken. It runs on your server, and the token expires after one day. Backend not in Dart? The same page has it in Node.js, Python, PHP, Ruby, Java, C#, Go and Elixir.

// Uses `dart_jsonwebtoken`: https://pub.dev/packages/dart_jsonwebtoken
import 'package:dart_jsonwebtoken/dart_jsonwebtoken.dart';

void main(List<String> arguments) {
  final jwt = JWT(
    {'tokenType': 'user'},
    issuer: '<APP_ID>',
    subject: '<USER_ID>',
  );

  final encoded_jwt = jwt.sign(
    SecretKey('<SECRET_KEY>'),
    expiresIn: Duration(days: 1),
  );

  print(encoded_jwt);
}

Never put the secret key in your Flutter app. When the token flow works, turn on authentication on the Settings page of your dashboard, under Security settings.