dash_chat 1.0.9

  • Readme
  • Changelog
  • Example
  • Installing
  • 92

💬 Dash Chat

The most complete Chat UI for flutter

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

Usage 💻 #

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

Features 🔮 #

  • 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: "https://www.wrappixel.com/ampleadmin/assets/images/users/4.jpg",
        createdAt: DateTime.now(),
        image: "http://www.sclance.com/images/picture/Picture_753248.jpg",

example, Chat Message with Quick Replies

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

Parameters ⚙️ #

  • 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
  • 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: "https://www.wrappixel.com/ampleadmin/assets/images/users/4.jpg",
  • onSend (Function(ChatMessage)) - Callback when sending a message.
  • alwaysShowSend (bool) - Should the send button be always active defaults to false.
  • 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
  • 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.
  • 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.
  • 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.
  • 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.

Credits 👨🏻‍💻 #

Found this project useful? ❤️ #

If you found this project useful, then please consider giving it a ⭐️ on Github and sharing it with your friends via social media.

License ⚖️ #

API details 📝 #

See the dash_chat.dart for more API details

Issues and feedback 💭 #

If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github issue for us to have a discussion on it.


  • ScrollController not attached issue fixed.


  • Made the default avatar responsive for the current user.


  • Made the default avatar responsive.
  • Two new property inputToolbarPadding & inputToolbarMargin added.


  • Change the default message container size to fix the overflowing of text.
  • Added a new feature to close the keyboard if tap anywhere else on the screen.


  • Fixed an issue where scrollToBottom widget was not disabled.
  • Fixed an issue where message container was not resized properly based on screen width.
  • Fixed a performance issue when scroll down.
  • Fixed an issue where onLoadEarlier was being called every time the listview moved.


  • Models updated


  • Small fixes to the InputToolbar and ChatMessage class


  • ChatMessage serialization added


  • Description updated and small fix


  • Minor fixes and first release


  • LoadEarlier Widget functionality added


  • ScrollToBottom Widget functionality added


  • showTraillingBeforeSend property added


  • Quick Reply functionality added.


  • Chat Bubble are more customizable now.


  • User avatar now show user initials while loading & if not avatar is passed


  • Initial Release


example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  dash_chat: ^1.0.9

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:dash_chat/dash_chat.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Dec 12, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.1+4
  • Flutter: 1.12.13+hotfix.4

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (intl).


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.2 <3.0.0
flutter 0.0.0
flutter_parsed_text ^1.1.0 1.2.3
intl ^0.15.8 0.15.8 0.16.0
transparent_image ^1.0.0 1.0.0
uuid ^2.0.1 2.0.4
Transitive dependencies
charcode 1.1.2
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.4
meta 1.1.8
path 1.6.4
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies