Simple Chat UI Documentation

GitHub

Introduction

The simple_chat_ui library is a Flutter package that provides a collection of widgets to help you create a chat user interface for your mobile application. This library allows you to easily display text messages, images, and custom content in a chat-like format.

The library is intended to simplify the process of creating chat interfaces by providing pre-designed components for messages and chat bubbles. You can use these components to build chat interfaces quickly and efficiently.

Installation

To use the simple_chat_ui library in your Flutter project, you need to add it to your pubspec.yaml file. Open the pubspec.yaml file and add the following line under the dependencies section:

dependencies:
 simple_chat_ui:
 git:
 url: https://github.com/tacticalninj4/simple_chat_ui.git

Then, run flutter pub get to fetch and install the package.

Usage

Import the Library

To use the simple_chat_ui library in your Dart file, import it as follows:

import 'package:simple_chat_ui/simple_chat_ui.dart';

Widgets

SimpleChatUI.message

This widget is used to display chat messages, including text and images, in a chat-like format. It provides options to display the sender’s avatar, message content, and a timestamp.

Parameters:

  • message (String?): The message text to display. Set to null if you want to display an image instead.
  • image (Image?): An optional image widget to display instead of a text message. Set to null if you want to display a text message.
  • avatar (CircleAvatar?): The sender’s avatar.
  • onImageTap (GestureTapCallback?): A callback function to execute when the image is tapped.
  • width (double): The maximum width of the chat bubble.
  • time (DateTime): The timestamp of the message.
  • senderID (String): The unique identifier of the sender.
  • isMe (bool): Set to true if the message is sent by the current user, false otherwise.
  • displayName (String): The display name of the sender.
  • isContinue (bool): Set to true if the message continues from the previous one in the same chat, false if it’s a new message.
SimpleChatUI.custom

This widget is used to display custom content in a chat-like format. It provides options to display the sender’s avatar, custom content, and a timestamp.

Parameters:

  • avatar (CircleAvatar?): The sender’s avatar.
  • width (double): The maximum width of the chat bubble.
  • body (Widget): The custom content to display.
  • time (DateTime): The timestamp of the message.
  • senderID (String): The unique identifier of the sender.
  • isMe (bool): Set to true if the message is sent by the current user, false otherwise.
  • displayName (String): The display name of the sender.
  • isContinue (bool): Set to true if the message continues from the previous one in the same chat, false if it’s a new message.

Example

Here’s an example of how to use the SimpleChatUI widgets in a Flutter application:

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

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: Scaffold(
 appBar: AppBar(
 title: Text('Simple Chat UI Example'),
 ),
 body: ChatScreen(),
 ),
 );
 }
}

class ChatScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return ListView(
 children: [
 SimpleChatUI.message(
 message: 'Hello, how are you?',
 width: MediaQuery.sizeOf(context).width * (2 / 3),
 time: DateTime.now(),
 senderID: 'user123',
 isMe: true,
 displayName: 'User',
 isContinue: false,
 ),
 SimpleChatUI.message(
 image: Image.network('https://example.com/image.jpg'),
 width: MediaQuery.sizeOf(context).width * (2 / 3),
 time: DateTime.now(),
 senderID: 'user123',
 isMe: false,
 displayName: 'Other User',
 isContinue: true,
 ),
 SimpleChatUI.custom(
 avatar: CircleAvatar(
 backgroundImage: AssetImage('assets/avatar.jpg'),
 ),
 width: MediaQuery.sizeOf(context).width * (2 / 3),
 body: Text('This is a custom message.'),
 time: DateTime.now(),
 senderID: 'user123',
 isMe: true,
 displayName: 'User',
 isContinue: false,
 ),
 ],
 );
 }
}

This example demonstrates how to use the SimpleChatUI widgets to create a chat interface with text messages, images, and custom content.

Conclusion

The simple_chat_ui library simplifies the process of creating chat interfaces in Flutter applications. You can use the provided widgets to display messages, images, and custom content in a chat-like format, saving you time and effort in UI development.