SwiftChat: A Real-Time Chat UI for Flutter #

A highly customizable and easy-to-use chat UI package for Flutter. SwiftChat provides a complete, responsive chat screen designed to be powered by a real-time backend like WebSockets, making it simple to build modern chat applications.

Features #

• 💬 Complete Chat UI: A beautiful, pre-built chat screen with message bubbles and a message composer.
• 🔌 Backend Agnostic: Designed to work with any WebSocket backend via a simple stream-based architecture.
• 🎨 Highly Customizable: Easily change colors, text styles, and input decorations using the SwiftChatTheme class.
• 🚀 Lightweight & Performant: Built with a focus on performance and a minimal footprint.
• 📱 Responsive Design: Adapts gracefully to different screen sizes and orientations.

Installation #

1. Add swift_chat and web_socket_channel to your pubspec.yaml file:

   dependencies:
     flutter:
       sdk: flutter
     swift_chat: ^1.1.0 # Use the latest version from pub.dev
     web_socket_channel: ^2.4.0 # For WebSocket communication
   

2. Install the packages from your terminal:

   flutter pub get
   

How to Use #

Here is a complete, well-commented example of a chat screen that connects to a WebSocket server.

import 'package:flutter/material.dart';
import 'package:swift_chat/swift_chat.dart';
import 'package:web_socket_channel/web_socket_channel.dart';
import 'dart:convert';
import 'dart:math';

// Your main app setup...

class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  // 1. Define the current user
  final _currentUser = ChatUser(id: 'user_${Random().nextInt(999)}', name: 'You');
  
  // 2. Manage the list of messages
  final List<ChatMessage> _messages = [];
  
  // 3. Establish the WebSocket connection
  final _channel = WebSocketChannel.connect(
    Uri.parse('ws://localhost:8080'), // Use your server's address
  );

  @override
  void initState() {
    super.initState();
    // 4. Listen for incoming messages
    _channel.stream.listen((data) {
      final decoded = jsonDecode(data);
      final user = ChatUser(id: decoded['userId'], name: decoded['userName']);
      final incomingMessage = ChatMessage(
        id: decoded['id'],
        text: decoded['text'],
        user: user,
        createdAt: DateTime.parse(decoded['createdAt']),
      );

      if (mounted) {
        setState(() {
          _messages.add(incomingMessage);
        });
      }
    });
  }

  // 5. Handle sending messages
  void _handleSend(String text) {
    final message = ChatMessage(
      id: 'msg_${Random().nextInt(9999)}',
      text: text,
      user: _currentUser,
      createdAt: DateTime.now(),
    );

    // Add to UI immediately for a responsive feel
    setState(() {
      _messages.add(message);
    });

    // Send to the server
    final messageData = {
      'id': message.id,
      'text': message.text,
      'userId': message.user.id,
      'userName': message.user.name,
      'createdAt': message.createdAt.toIso8601String(),
    };
    _channel.sink.add(jsonEncode(messageData));
  }

  @override
  void dispose() {
    // 6. Close the connection
    _channel.sink.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Global Chat')),
      // 7. Use the SwiftChat widget!
      body: SwiftChat(
        currentUser: _currentUser,
        messages: _messages,
        onSend: _handleSend,
      ),
    );
  }
}# swift-chat

# swift-chat