Building Chat UI with Stream Chat SDK in Flutter

dependencies:
  flutter:
    sdk: flutter
  stream_chat_flutter

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

final client = StreamChatClient(
  'YOUR_STREAM_API_KEY',
  logLevel: Level.INFO,
);

void main() {
  runApp(MyApp(client: client));
}

class MyApp extends StatelessWidget {
  final StreamChatClient client;
  MyApp({required this.client});

  @override
  Widget build(BuildContext context) {
    return StreamChat(
      client: client,
      child: MaterialApp(
        home: ChannelListPage(),
      ),
    );
  }
}

await client.connectUser(
  User(id: 'user-id', extraData: {'name': 'Alice'}),
  client.devToken('user-id'),
);

class ChannelListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChannelsBloc(
      child: ChannelListView(
        filter: Filter.in_('members', [StreamChat.of(context).currentUser!.id]),
        sort: [SortOption('last_message_at')],
        pagination: PaginationParams(limit: 20),
        channelPreviewBuilder: (_, channel) {
          return ListTile(
            title: Text(channel.extraData['name'] ?? 'No Name'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (_) => ChatScreen(channel: channel),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class ChatScreen extends StatelessWidget {
  final Channel channel;
  ChatScreen({required this.channel});

  @override
  Widget build(BuildContext context) {
    return StreamChannel(
      channel: channel,
      child: Scaffold(
        appBar: ChannelHeader(),
        body: Column(
          children: [
            Expanded(child: MessageListView()),
            MessageInput(),
          ],
        ),
      ),
    );
  }
}

MessageListView(
  messageBuilder: (context, details, messages, defaultMessage) {
    final isOwnMessage = details.message.user!.id == StreamChat.of(context).currentUser!.id;
    return Align(
      alignment: isOwnMessage ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 4, horizontal: 8),
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          color: isOwnMessage ? Colors.blueAccent : Colors.grey.shade200,
          borderRadius: BorderRadius.circular(16),
        ),
        child: Text(
          details.message.text ?? '',
          style: TextStyle(color: isOwnMessage ? Colors.white : Colors.black87),
        ),
      ),
    );
  },
  headerBuilder: (context, _) => Center(
    child: Text('Today', style: TextStyle(color: Colors.grey)),
  ),
),

final customAvatar = (BuildContext ctx, User user) {
  return CircleAvatar(
    backgroundImage: NetworkImage(user.image ?? ''),
    radius: 16,
  );
};

MessageListView(
  avatarBuilder: customAvatar,
  showUserAvatars: true,
  showMessageTimestamp: true,
);