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

createState() => _LoginScreenState(); } class _LoginScreenState extends State { final _usernameController = TextEditingController(); bool _isLoading = false; String? _error; Future _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)), ), ], ), ), ); } } Channel List (channel_list_screen.dart) 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 _logout(BuildContext context) async { final client = StreamChat.of(context).client; await client.disconnectUser(); if (context.mounted) { Navigator.pushReplacement( context, MaterialPageRoute(builder: (_) => const LoginScreen()), ); } } } Chat Screen (channel_screen.dart) 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(), ], ), ), ); } } Thread Page (thread_page.dart) 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 createState() => _ThreadPageState(); } class _ThreadPageState extends State { 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), ], ), ); } } Run and Test the App Running & testing the app launches it to check if everything works as expected, from login to sending messages. This step helps spot problems early and ensures the app is ready for real end-users without surprises. Run the App : flutter run on 2 phones/emulators Login : User1 types name → ' Connect ' → See channels Create Chat : Tap ' Create General Channel ' → User1 joins Real-time Test : Login User2 → Send messages → Both see instantly Send Extras : Text + photo → Long-press message → Reply in thread Logout : Tap logout → Back to login (no errors)

Boost Campaign Performance Through Video