chat_ui_flex

A comprehensive Flutter chat UI package with customizable bubbles, input fields, and typing indicators. Designed for flexibility and premium aesthetics.

Features

  • 🎨 Premium Design: Ready-to-use glassmorphism and modern UI components.
  • 🛠 Highly Customizable: Flexibly override headers, bubbles, inputs, and more.
  • âš¡ Performance: Optimized message list with support for infinite scrolling.
  • 🌗 Theme Support: Built-in support for light and dark modes.

Getting Started

Add the dependency to your pubspec.yaml:

dependencies:
  chat_ui_flex: ^0.2.0

Usage

Basic Usage

Use the core components to build a standard chat interface.

import 'package:chat_ui_flex/chat_ui_flex.dart';

class ChatScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ChatHeader(
            onThemeToggle: () {},
          ),
          Expanded(
            child: MessageList(
              messages: messages, // List<ChatMessage>
            ),
          ),
          InputField(
            onSend: (text) {
              print('Sent: $text');
            },
          ),
        ],
      ),
    );
  }
}

Advanced Customization

Override builders and styles to match your brand.

Custom Header

ChatHeader(
  title: Text('Support Team', style: TextStyle(fontWeight: FontWeight.bold)),
  subtitle: Text('Online', style: TextStyle(color: Colors.green)),
  leading: CircleAvatar(backgroundImage: NetworkImage('...')),
  actions: [
    IconButton(icon: Icon(Icons.settings), onPressed: () {}),
  ],
  backgroundColor: Colors.white,
  elevation: 4,
)

Flexible Message List

MessageList(
  messages: messages,
  dateSeparatorBuilder: (context, date) => Text(date.toString()),
  messageBuilder: (context, message) {
    return CustomBubble(text: message.text, isMe: message.isSentByMe);
  },
  enableInfiniteScroll: true,
  onLoadMore: () => fetchMoreMessages(),
)

Custom Input Field

InputField(
  onSend: handleSend,
  hintText: 'Type your query...',
  leading: IconButton(icon: Icon(Icons.add), onPressed: () {}),
  trailing: IconButton(icon: Icon(Icons.mic), onPressed: () {}),
  backgroundColor: Colors.grey[100],
  borderRadius: BorderRadius.circular(12),
)

Libraries

chat_ui_flex