ChatText

A Flutter package for sending text messages, featuring a "scroll to bottom" button and real-time unread message count display.

Created by mohamed abd elgwad

Installing

1. Add dependency to pubspec.yaml

dependencies:
  chat_text_package: <latest-version>

2. Import the package

import 'package:chat_text_package/chat_text_package.dart';

3. Adding a ChatScreen widget.

ChatScreen(
                  messages: messages,
                  scrollController: scrollController,
                  otherUserName: 'Mohamed Abd El.Gwad',
                  textHint: 'Enter your message',
                  otherUserImage:
                      'https://www.euroschoolindia.com/wp-content/uploads/2023/08/cartoons-for-kids.jpg',
                  onSubmitMessage: (msg) {
                    messages.insert(
                        0,
                        Message(
                            id: 1,
                            body: msg,
                            fromLoggedUser: true,
                            createdAt: '2024-12-11 03:45 PM'));
                    setState(() {});
                  })

4. Adding a messageList with Message class.

List<Message> messageList = [
  Message(
        id: 1,
        body: 'messsage',
        fromLoggedUser: false,
        createdAt: '2024-12-11 03:45 PM')),
   Message(
        id: 2,
        body: 'messsage',
        fromLoggedUser: true,
        createdAt: '2024-12-11 03:45 PM'),
];

5. Adding a ScrollController to ChatScreen for pagination and scroll to bottom.

ScrollController scrollController = ScrollController();
ChatScreen(
scrollController: scrollController)

6. Adding a onSubmitMessage : When you press the send message button, this function is called.

 onSubmitMessage: (String msg) {
        messages.insert(
          0,
          Message(
              id: 1,
              body: msg,
              fromLoggedUser: true,
              createdAt: '2024-12-11 03:45 PM'));
      setState(() {});
    };  
}

7. Adding an appbar : if you need to add the default appBar to ChatScreen , you must add otherUserName, otherUserImage, or both.

ChatScreen(
  otherUserName: 'Mohamed Abd El.Gwad',
  otherUserImage:
      'https://www.euroschoolindia.com/wp-content/uploads/2023/08/cartoons-for-kids.jpg',                
)

if you need use custom appBar , don't add otherUserName or otherUserImage

8. If you want to display the number of unread messages when a real time message arrives and chat is scrolling up.

int unreadMsgRealTime =0;
ChatScreen(            
unreadMsgRealTime : unreadMsgRealTime                          
 )

Main Contributors

Mohamed abd elgwad

Ahmed fayek