search

Chat page

The Chat Page in FlexDash has a responsive layout that changes depending on whether the user is on desktop (web) or mobile. This ensures an optimal user experience across devices, but it also means that the logic must be managed separately for each layout.

hashtag
General Setup

When working on this page, always start by locating the ResponsiveConditionalBuilder widget.

  • Collapse the layout section you are not working on (desktop or mobile) to avoid confusion.

  • Use the eye icon to hide or show each version when editing.

hashtag
Desktop Layout

On desktop, the page uses a Row layout divided into two sections:

  • Left side:

    • Contains a TabBar widget with two tabs:

      • Chats

      • Contacts

    • Selecting a chat or contact here should update the conversation shown on the right.

  • Right side:

    • Displays the chat window with all messages from the selected chat/contact on the left.

    • The chat section is always visible in this layout, ensuring quick navigation between multiple chats.

This design allows the user to always see the chat list while reading or sending messages.

hashtag
Mobile Layout

On mobile, the layout is slightly different to provide a better responsive experience:

  • Collapse the desktop version in the ResponsiveConditionalBuilder and work only in the mobile section.

  • The mobile view is based on a PageView widget with two pages:

    1. Page 1:

      • Shows the list of chats and contacts, also using a TabBar widget to switch between them.

      • When the user selects a chat or contact, the PageView automatically moves to page 2.

    2. Page 2:

      • Displays the list of messages for the selected chat/contact.

      • In this mode, the user only sees the messages, not the list of chats.

This ensures that on mobile, the user always sees only one thing at a time: either the chat/contact list or the messages.

circle-exclamation

hashtag
Important Notes

  • Any logic changes made in the desktop version must also be replicated in the mobile version, since both layouts are independent.

  • Always verify that interactions (such as selecting a chat, switching tabs, or loading messages) work consistently across both versions.

This dual-layout approach guarantees a fully responsive chat experience for users on both web and mobile devices.

PreviousSidebarNextTroubleshooting & Frequently Asked Questions

Last updated