SANELY EXCEL

For your technical solution!

Flutter UI: Creating a chatbox

By Dipan Polley on May 26, 2022





Flutter helps to develop native applications for android, ios, web, and desktop. With the increase in applications on flutter, the community is expanding vastly. Mostly all applications these days use chatting applications for customer support services. Hence this Chatbox package helps developers to focus more on the functionality rather than the UI.


Chatbox

  




Sending or receiving messages or images and GIFs the UI can be easily created by a simple function call. Also when the link is sent within a message it automatically identifies it and shows metadata to the user. It returns a card with proper alignment and padding. This can be called from a streamer in chatting applications.


Properties

  • chatBoxColor > This is a required field where you can customize the chatbox colour.
  • message > This accepts a string which is the message to be displayed.
  • received > Boolean value is provided here which finally aligns whether someone has received or sent the chat.
  • textColor > It's the only field that is optional. The text colour is set to black by default.
  • imageURL > It takes a string input of URL and fetches any images or GIFs from it.


Implementing Dart Code

Receiving

const ChatBox(
message: "Text message here",
imageURL:"https://docs.flutter.dev/assets/images/dash/dash-fainting.gif",//Receiving GIF or Image
recieved: true,
chatBoxColor: Colors.greenAccent,
textColor: Colors.black,
),

Sending

const ChatBox(
message: "Text message here",
imageURL: "https://picsum.photos/250?image=9",//Sending GIF or Image
recieved: false,
chatBoxColor: Colors.greenAccent,
textColor: Colors.black,
),

HyperLinks

const ChatBox(
message: "https://pub.dev/packages/chatbox",
recieved: false,
chatBoxColor: Colors.greenAccent,
textColor: Colors.black,
),

Conclusion

This package is still in the developing stage as of today. New features like sending voice messages, documents, and videos will be introduced ahead. You can even add on new functionalities by creating a pull request in this repository. Also if anyone faces any issue they can raise bugs in the same repository.



No comments:

Post a Comment