How to Build a Flutter Chat App With The Stream SDK?

flutter create chat_app
cd chat_app

name: chat_app
dependencies:
flutter:
sdk: flutter
stream_chat_flutter: ^9.18.0
stream_chat_flutter_core: ^9.18.0

flutter pub get

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'login_screen.dart';

void main() async {
WidgetsFlutterBinding.ensureInitialized();

final client = StreamChatClient(
'YOUR_API_KEY_HERE', // From Stream dashboard
logLevel: Level.INFO,
);

runApp(ChatApp(client: client));
}

class ChatApp extends StatelessWidget {
final StreamChatClient client;
const ChatApp({super.key, required this.client});

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Stream Chat Demo',
theme: ThemeData(
useMaterial3: true,
primarySwatch: Colors.blue,
),
builder: (context, child) => StreamChat(
client: client,
streamChatThemeData: StreamChatThemeData.fromTheme(Theme.of(context)),
child: child!,
),
home: const LoginScreen(),
);
}
}

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'channel_list_screen.dart';

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

@override
State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
final _usernameController = TextEditingController();
bool _isLoading = false;
String? _error;

Future<void> _login() async {
if (_usernameController.text.trim().isEmpty) return;

setState(() {
_isLoading = true;
_error = null;
});

try {
final client = StreamChat.of(context).client;
await client.connectUser(
User(
id: _usernameController.text.trim(),
name: _usernameController.text.trim(),
),
client.devToken(_usernameController.text.trim()), // Production: JWT
);

if (mounted) {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (_) => const ChannelListScreen()),
);
}
} on StreamChatException catch (e) {
setState(() => _error = e.message);
} catch (e) {
setState(() => _error = 'Connection failed: $e');
} finally {
if (mounted) setState(() => _isLoading = false);
}
}

@override
void dispose() {
_usernameController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Login')),
body: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _usernameController,
decoration: InputDecoration(
labelText: 'Username',
errorText: _error,
border: const OutlineInputBorder(),
),
enabled: !_isLoading,
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _isLoading ? null : _login,
child: _isLoading
? const SizedBox(
height: 20,
width: 20,
child: CircularProgressIndicator(strokeWidth: 2),
)
: const Text('Connect'),
),
if (_error != null)
Padding(
padding: const EdgeInsets.only(top: 8),
child: Text(_error!, style: const TextStyle(color: Colors.red)),
),
],
),
),
);
}
}

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'channel_screen.dart';
import 'login_screen.dart';

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Channels'),
actions: [
IconButton(
icon: const Icon(Icons.logout),
onPressed: () => _logout(context),
),
],
),
body: ChannelsBloc(
child: ChannelListView(
filter: Filter.in_(
'members',
[StreamChat.of(context).currentUser!.id],
),
sort: const [
SortOption('last_message_at', direction: SortOption.DESC),
],
limit: 20,
channelWidget: const ChannelTile(),
emptyBuilder: (context, createChannel) => Center(
child: ElevatedButton(
onPressed: createChannel,
child: const Text('Create General Channel'),
),
),
onChannelTap: (channel) => Navigator.of(context).push(
MaterialPageRoute(
builder: (_) => ChannelScreen(channel: channel),
),
),
),
),
);
}

Future<void> _logout(BuildContext context) async {
final client = StreamChat.of(context).client;
await client.disconnectUser();
if (context.mounted) {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (_) => const LoginScreen()),
);
}
}
}

import 'package:flutter/material.dart';
import 'package:stream_chat_flutter/stream_chat_flutter.dart';
import 'thread_page.dart';

class ChannelScreen extends StatelessWidget {
final Channel channel;
const ChannelScreen({super.key, required this.channel});

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: const StreamChannelHeader(),
body: StreamChannel(
channel: channel,
child: Column(
children: [
Expanded(
child: StreamMessageListView(
threadBuilder: (context, details, messages) {
return ThreadPage(
parentMessage: details.parentMessage!,
);
},
),
),
const StreamMessageInput(),
],
),
),
);
}
}

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

class ThreadPage extends StatefulWidget {
final Message parentMessage;
const ThreadPage({super.key, required this.parentMessage});

@override
State<ThreadPage> createState() => _ThreadPageState();
}

class _ThreadPageState extends State<ThreadPage> {
late final StreamMessageInputController _controller;

@override
void initState() {
super.initState();
_controller = StreamMessageInputController(
parentMessage: widget.parentMessage,
);
}

@override
void dispose() {
_controller.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: StreamThreadHeader(parent: widget.parentMessage),
body: Column(
children: [
Expanded(child: StreamMessageListView(parentMessage: widget.parentMessage)),
StreamMessageInput(messageInputController: _controller),
],
),
);
}
}