Skip to main content

Chat Template

Introduction​

The Chat Template provides a ready-to-use chat interface, saving you time in building chat functionality from scratch. With this template, you get a fully functional chat screen that supports message sending and display, structured message bubbles, and easy customization. Whether you're building a real-time chat app or adding a messaging feature, this template gives you a solid starting point with well-structured components that can be integrated with APIs, Firebase, or any backend service.

Adding the Chat Template​

To drop the chat template into your project:

  1. Click on the Screens icon.
  2. Select Chat Template.
  3. You will see a list of files that will be added (explained later).
  4. Click Import.
  5. In the Files Panel, a new folder named chat_template will appear, containing the three chat-related files.
  6. Drag and drop chat_page.dart (the screen) and chat_bubble.dart (the message bubble) onto the board.
  7. Set the height of chat_bubble.dart to auto so that it dynamically adjusts to the message size.

Testing the Chat Template​

  • Select the chat_page.dart screen and click Play.
  • Type a message and press send.
  • The message will be added to the chat list and displayed.

What’s Inside the Chat Template?​

The chat template allows you to quickly implement a full chat interface. It consists of:

  • chat_bubble.dart: Defines the chat bubble component.
  • chat_page.dart: The main chat screen containing a ListView to display chat bubbles.
  • message_model.dart: A data model representing a single chat message.

Breakdown of Each Component​

message_model.dart​

Defines a custom type (object) with three fields:

  • msg: The message text (String).
  • time: The timestamp (String).
  • isMe: A boolean indicating whether the message was sent (true) or received (false).

chat_bubble.dart​

  • Contains a parameter message of type message_model.
  • Uses the fields from message_model (msg and time) to populate the Text widgets inside the chat bubble.
  • Uses isMe to determine the bubble’s background color, differentiating between sent and received messages.

chat_page.dart​

  • FullChat: A List<message_model> that holds the chat history. Adding a message to this list updates the chat view.
  • TextController (text variable): Controls the TextField where users type messages. Extracts the message text and clears it after sending.
  • send() function:
    • Adds a new message_model object to FullChat.
    • Clears the text field.
    • Refreshes the screen to display the new message.
  • Send Button:
    • Calls send() when pressed, adding the new message to the chat.

Customizing the Chat Template​

Sending Messages via API or Firebase​

  • Modify the Send function inside the screen to send messages through a network request (e.g., API, Firebase).

Receiving Messages​

  • When a message is received from an API:
    1. Add the message to FullChat.
    2. Create a new message_model object and set:
      • msg: The received message text.
      • time: The message timestamp.
      • isMe: false (indicating a received message).
    3. Call refresh() to update the UI.
    4. The message will appear in a different color, distinguishing it from sent messages.

This chat template provides a solid foundation for implementing real-time chat functionality while allowing flexibility for custom integration.