Thursday, September 28, 2023

Chat UI in Flutter

The most complete Chat UI for flutter highly customizable and helps developing chat UI faster.Free and opensource .Look like WhatsApp typed chatting interface. Read and

The most complete Chat UI for flutter

Inspired by react-native-gifted-chat. Highly customizable and helps developing chat UI faster.


To use this package, add dash_chat as a dependency in your pubspec.yaml file.


  • Fully customizable components
  • Copy messages to clipboard
  • Multi-line TextInput
  • Touchable links using flutter_parsed_text
  • Avatar as user’s initials
  • Quick Reply messages
  • Load earlier messages
  • Scroll to bottom Widget
  • Composer actions (to attach photos, etc.) – WIP

Message object 

example, Chat Message

        text: "Hello",
        user: ChatUser(
          name: "Fayeed",
          uid: "123456789",
          avatar: "",
        image: "",

example, Chat Message with Quick Replies

        text: "This is a quick reply example.",
        user: ChatUser(),
        quickReplies: QuickReplies(
          values: <Reply>[
              title: "😋 Yes",
              value: "Yes",
              title: "😞 Nope. What?",
              value: "no",


  • messageContainerFlex (int) – Flex value for the messeage container defaults to 1
  • height (double) – Height for the Dash chat Widget.
  • width (double) – Width for the Dash chat Widget.
  • messages (List) – List of messages to display in the chat.
  • text (String) – [optional parameter] If provided will stop using the default controller.
  • onTextChange (Function(String)) – If the text parameter is passed then onTextChange must also be passed.
  • inputDecoration (InputDecoration) – Used to provide input decoration to the text.
  • messageIdGenerator (String Function) – Usually new message added by the user gets UUID v4 String generater by uuid.
  • user (ChatUser) – The current user object.
    user: ChatUser(
      name: "Jhon Doe",
      uid: "xxxxxxxxx",
      avatar: "",
  • onSend (Function(ChatMessage)) – Callback when sending a message.
  • alwaysShowSend (bool) – Should the send button be always active defaults to false.
  • avatarMaxSize (double) – Sets the default Avatar’s max size, default is 30.0.
  • dateFormat (DateFormat) – Format to use for rendering date default is yyyy-MM-dd.
  • timeFormat (DateFormat) – Format to use for rendering time default is HH:mm:ss.
  • showUserAvatar (bool) – Should the user avatar be shown.
  • showAvatarForEveryMessage (bool) – Should the avatar be shown for every message defaults to false.
  • onPressAvatar (Function(ChatUser)) – Callback funtion when avatar is tapped on.
  • onLongPressAvatar (Function(ChatUser)) – Callback funtion when avatar is long pressed on.
  • onLongPressMessage (Function(ChatUser)) – Callback funtion when message is long pressed on.
  • inverted (bool) – Should the messages be shown in reversed order
  • avatarBuilder (Widget Function(ChatUser)) – Will override the the default avatar.
  • messageBuilder (Widget Function(ChatMessage)) – Will override the the default message widget.
  • messageTextBuilder (Widget Function(String)) – Will override the the default message text widget.
  • messageImageBuilder (Widget Function(String)) – Will override the the default message imaeg widget
  • messageTimeBuilder (Widget Function(String)) – Will override the the default message time widget.
  • dateBuilder (Widget Function(String)) – Will override the the default chat view date widget.
  • sendButtonBuilder (Widget Function(Function)) – Will override the the default send button widget.
  • chatFooterBuilder (Widget Function) – A Widget that will be shown below the MessageListView like you can a “tying…” Text Widget at the end.
  • inputFooterBuilder (Widget Function) – A Widget that will be shown below the ChatInputToolbar.
  • maxInputLength (int) – Main input length of the input text box defaulst to no limit.
  • parsePatterns (List) – Used to parse text to make a linkified text uses flutter_parsed_text.DashChat( parsePatterns: <MatchText>[ MatchText( type: “email”, onTap: (String value) {} ), MatchText( pattern: r”\B#+([\w]+)\b”, style: TextStyle( color:, fontSize: 24, ), onTap: (String value) {} ), ] );
  • messageContainerDecoration (BoxDecoration) – Provides a custom style to the message container.
  • leading (List<Widget>) – List of Widget to show before the TextField.
  • trailing (List<Widget>) – List of Widget to show after the TextField will remove the send button.
  • readOnly (bool) – Hides the input bar, defaults to false.
  • showTraillingBeforeSend – Should the trailling widgets be shown before the send button defaults to true.
  • inputTextStyle (TextStyle) – Style for the TextField.
  • inputContainerStyle (BoxDecoration) – TextField container style.
  • inputMaxLines (int) – Max length of the input lines default to 1.
  • showInputCursor (bool) – Should the input cursor be shown defaults to true.
  • inputCursorWidth (double) – Width of the text input defaults to 2.0.
  • inputCursorColor (Color) – Color of the input cursor defaults to theme.
  • scrollController (ScrollController) – ScrollController for the MessageListView.
  • messageContainerPadding (EdgeInsetsGeometry) – Padding for the MessageListView.
  • messagePadding (EdgeInsets) – Padding for the MessageContainer.
  • onQuickReply (Funtion(Reply)) – Callback method when the quickReply was tapped on.
  • quickReplyStyle (BoxDecoration) – Container style for the QuickReply Container.
  • quickReplyTextStyle (TextStyle) – QuickReply text style.
  • quickReplyBuilder (Widget Function(Reply)) – Will override the the default QuickReply Widget.
  • scrollToBottom (bool) – Should the scroll to bottom widget be shown defaults to true.
  • scrollToBottomStyle (ScrollToBottomStyle) – sets the style & position for the scrollToBottom widget.
  • scrollToBottomWidget (Widget Function()) – Overrides the default scrollToBottomWidget with a custom widget.
  • onScrollToBottomPress (Function) – override the default behaviour of the onScrollToBottom Widget.
  • shouldShowLoadEarlier (bool) – Should the LoadEarlier Floating widget be shown or use load as you scroll scheme whcih will call the onLoadEarlier defaults to false which is this scheme.
  • showLoadEarlierWidget (Widget Function()) – Override the default behaviour of the onScrollToBottom Widget.
  • onLoadEarlier (Function) – Override the default behaviour of the onLoadEarleir Widget or used as a callback when the listView reaches the top.
  • inputToolbarPadding (EdgeInsets) – Can be used to add padding to the input toolbar.
  • inputToolbarMargin (EdgeInsets) – Can be used to add margin to the input toolbar.
  • shouldStartMessagesFromTop (bool) – Can be used to align messages so that it starts from top to bottom instead of the default bottom to top.
  • textBeforeImage (bool) – Can be used to set the order of the text and the image inside a message defaults to true.
  • quickReplyScroll (bool) – Should the quick reply options be horizontally scrollable
  • quickReplyPadding (EdgeInsetsGeometry) – Padding for QuickReply
  • inputDisabled (bool) – Should the input TextField be disabled, defaults to false
  • messageDecorationBuilder (BoxDecoration Function(ChatMessage, isUser) – Override the message container decoration. [Note: This will override the messageContainerDecoration ]DashChat( … messageDecorationBuilder: (ChatMessage msg, bool isUser){ return BoxDecoration( … color: isUser ? :, // example … ); }, … );