The most complete Chat UI for flutter highly customizable and helps developing chat UI faster.

Related tags

UI chat flutter react-native-gifted-chat
Overview

⚠️ Dashchat v2 is available in v2 branch ⚠️

You can open issues for the v2 to indicate things we need to implement/fix. Also the API can change until I am satisfied the way it is.

💬 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

ChatMessage(
        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

[ Reply( title: "😋 Yes", value: "Yes", ), Reply( title: "😞 Nope. What?", value: "no", ), ], ), ), "> 
ChatMessage(
        text: "This is a quick reply example.",
        user: ChatUser(),
        createdAt: DateTime.now(),
        quickReplies: QuickReplies(
          values: <Reply>[
            Reply(
              title: "😋 Yes",
              value: "Yes",
            ),
            Reply(
              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) - 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.
  DashChat(
    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.

  • 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: Colors.pink,
        fontSize: 24,
      ),
      onTap: (String value) {}
    ),
  ]
);

  • messageContainerDecoration (BoxDecoration) - Provides a custom style to the message container.

  • leading (List ) - List of Widget to show before the TextField.

  • trailing (List ) - 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 ? Colors.red : Colors.blue, // example
      ...
    );
  },
  ...
);

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.

Comments
  • [v2] Dashchat v2 spec discussion

    [v2] Dashchat v2 spec discussion

    Dashchat v2.0

    Note: This document is just for discussion purposes only, nothing has been finalized yet, if you have any suggestions that could help in improving the package feel free to let us know.

    If you want to help with development do reach out to me or @SebastienBtr (you can find details on our Github profile)

    Goals

    1. Change the API to make it more modular (See below the new API)
    2. Video support.
    3. Audio support.
    4. Gif support.
    5. Multiple media support: Right now ChatMessage only has 2 properties: image & video instead we can have a new property media: List<ChatMedia> which will take care of handling all the media content associated with the message. show embedded URLs: In all modern chat applications when a URL is embedded the right representation is given that is what a user can expect from the website if they visit. The information relayed is the title, description & banner image in most cases. This can be easily achieved using open_graph_parser.
    6. Better default design.
    7. Using flutter_hooks to make code more readable: I am a big-time react_hooks user & when the flutter_hooks were introduced by Remi I immediately jumped to using it. I love them. The basic idea for using hooks for this package is that it will help abstract the code from widgets into more manageable functions, also at the same time making it easy for maintainers to easily debug or add more functions.
    8. Tests: Initially when I learned Flutter I just looked over tests as not needed as I was the only one maintaining & adding functionality to the package. As the package grew & more people started contributing to the project it has made people difficult to test each functionality after a PR manually which in most cases causes an error, so now that we are working on v2 we add more tests to help with maintaining the package easier.
    9. More option/ granular customization.
    10. Reply to message support.
    11. @ Mentions functionality.
    12. Composer actions (to attach photos, etc.)
    13. A new property to indicate someone is typing.
    14. New property for ChatMessage - sent, received & pending.
    15. Placeholder image for avatars.
    16. Better documentation: As most of you might know the current documentation is really confusing, So I would also like to have better documentation, maybe a separate docs site built using Docusaurus with examples.
    17. Add multiple examples with different databases.
    18. Use nanoid instead of UUID.

    Change the API to make it more modular.

    What is the need for changing the API? Right now DashChat is just a very huge single widget, which creates problems for new users to figure out all the functionality the widget provides. At the same time, any new property added must also be added to all the widgets down the tree with proper assertions for null safe type check which is a huge problem because it introduces new bugs in the code.

    Note: The API mentioned below is not final & will most likely change.

    Dashchat({
  @required ChatUser currentUser, 
  @required Function(ChatMessage) onSend,
  @required List<ChatMessage> messages,
  Key key,
  InputOptions inputOptions = InputOptions(),
  MessageOptions messageOptions = MessageOptions(),
  MessageListOptions messageListOptions = MessageListOptions(),
  QuickReplyOptions quickReplyOptions = QuickReplyOptions(),
  ScrollToBottomOptions scrollToBottomOptions = ScrollToBottomOptions(),
  bool readoOnly = false,
  DashchatStyle dashchatStyle,
  String Function() messageIdGenerator,
  List<ChatUser> typingUsers,
  // List<ChatUser> participants,  
  // could have a different field called participants with all the list of the users 
  // rather then having all user info in each message, 
  // might need to add a new property to the [ChatUser] called `currentUser: bool`
});

    DashchatStyle({
  double height,
  double width,
  EdgeInsets padding,
  EdgeInsets margin,
  Image backgroundImage,
  Color backgroundColor,
});

    InputOptions({
  TextEditingController textController = TextEditingController(),
  FocusNode focusNode = FocusNode(),
  TextDirection inputTextDirection = TextDirection.ltr,
  String hintText = 'Write a message...'
  TextStyle hintStyle,
  ChatUser Function(String) onMention,
  Function(String) onTextChange,
  bool inputDisabled = false,
  InputDecoration inputDecoration,
  TextCapitalization textCapitalization = TextCapitalization.none,
  bool alwaysShowSend = false,
  bool sendOnEnter = false, // Might not be needed because of textInputAction
  TextInputAction textInputAction,
  double maxInputLength,
  List<Widget> leading,
  List<Widget> trailing,
  Widget Function(Function) sendButtonBuilder,
  TextStyle inputTextStyle,
  BoxDecoration inputContainerStyle,
  int inputMaxLines = 5,
  InputDecoration inputDecoration,
  Widget Function() inputFooterBuilder,
  bool showTraillingBeforeSend = false,
  EdgeInsets inputToolbarPadding,
  EdgeInsets inputToolbarMargin,
  Widget Function(Function) sendButtonBuilder,
  CursorStyle cursorStyle,
});

    CursorStyle({
  Color color,
  bool hide,
  double width = 2.0,
});

    MessageListOptions({
  DateFormat dateSeparatorFormat = DateFormat('dd MMM yyyy'),
  Widget Function(String) dateSeparatorBuilder,
  SeparatorFrequency separatorFrequency = SeparatorFrequency.days,
  bool showAvatarForEveryMessage = false,
  ScrollController scrollController,
  Widget Function() chatFooterBuilder,
  bool showFooterBeforeQuickReplies = false,
  bool shouldStartMessagesFromTop = false,
  bool shouldShowLoadEarlier = true,
  Widget Function() showLoadEarlierBuilder,
  Function onLoadEarlier,
});

    MessageOptions({
  messageContainerFlex: 1,
  DateFormat timeFormat = DateFormat('HH:mm'),
  bool showTime = true,
  bool showCurrentUserAvatar = false,
  bool showOtherUsersAvatar = true,
  double avatarMaxSize = 30.0,
  Widget Function(ChatUser) avatarBuilder,
  Function(ChatUser) onPressAvatar,
  Function(ChatUser) onLongPressAvatar,
  Function(ChatMessage) onLongPressMessage,
  Color currentUserContainerColor, // Default to primary theme
  Color currentUserTextColor, // Default using theme
  Color containerColor = Colors.grey[100],
  Color textColor = Colors.black,
  Widget Function(ChatMessage, [ChatMessage,  ChatMessage]) messageBuilder, // currentMessage, [previousMessage, nextMessage]
  Widget Function(String, [ChatMessage] messageTextBuilder,
  Widget Function(String, [ChatMessage]) messageImageBuilder,
  Widget Function(String, [ChatMessage]) messageTimeBuilder,
  List<MatchText> parsePatterns // By default ParsedType.URL is defined using launchUrl,
  BoxDecoration messageContainerDecoration,
  EdgeInsets messageContainerPadding,
  List<Widget> Function(ChatMessage) messageButtonsBuilder,
  EdgeInsets messagePadding,
  bool textBeforeImage = true,
  BoxDecoration Function(ChatMessage, bool) messageDecorationBuilder,
  Widget Function(ChatMessage) top,
  Widget Function(ChatMessage) bottom,
});

    QuickReplyOptions({
  Function(Reply) onQuickReply,
  EdgeInsets quickReplyPadding,
  BoxDecoration quickReplyStyle,
  TextStyle quickReplyTextStyle,
  Widget Function(Reply) quickReplyBuilder,
  bool quickReplyScroll = false,
});

    ScrollToBottomOptions({
  bool disabled = false,
  Widget Function() scrollToBottomBuilder,
  Function onScrollToBottomPress,
  ScrollToBottomStyle scrollToBottomStyle,
});

    ScrollToBottomStyle({
  Color backgroundColor,
  Color textColor,
  double bottom = 70.0,
  double left = 0.0,
  double right: 20.0,
  double top = 0.0,
  double height = 45.0,
  double width = 45.0,
  IconData icon,
});

    ChatMessage({
  @required String text,
  @required ChatUser user,
  String id,
  List<ChatMedia> medias,
  List<QuickReply> quickReplies,
  bool keepQuickReplies = false,
  Map<String, dynamic> customProperties,
  DateTime createdAt,
  List<Widget> buttons,
  List<ChatUser> mentions,
  MessageStatus status = MessageStatus.none // read, received, pending
  List<ChatMessage> replies,
});

    QuickReply({
  @required String title,
  String value, // Use title by default
  String messageId,
});

    ChatMedia({
  @required String src,
  @required String mimeType, // "image | video | audio | other"
  Widget Function(src) builder,
  DateTime uploadedDate,
});

    ChatUser({
  String id,
  String profileImage,
  Map<String, dynamic> customProperties,
  String name, // Either name of firstName must be provided  
  String firstName,
  String lastName,
});
    documentation 
    opened by fayeed 53
  • IOS layout Issue

    IOS layout Issue

    I am using with IOS it gives different behaviour, input is hidden at the botton

    image

    Then i tried to added safearea image

    My code look like this

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text(
          "Messages",
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Color(0xff0052cc),
        leading: CupertinoNavigationBarBackButton(
          color: Colors.white,
        ),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Icon(
            Ionicons.ios_settings,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
      ),
      body: SafeArea(
        child: Container(
          color : Colors.white,
          //padding: EdgeInsets.only(bottom: 40),
          child: DashChat(
              scrollToBottom: false,
              onSend: onSend,
              messages: [
                ChatMessage(text: "Hello", user: user, id: "hello"),
              ],
              user: user,
              dateFormat: DateFormat('yyyy-MMM-dd'),
              timeFormat: DateFormat('HH:mm'),
              alwaysShowSend: false,
              messageContainerPadding: EdgeInsets.zero,
              inputContainerStyle: BoxDecoration(
                  border: Border.all(
                      width: 1.0,
                      color: CupertinoColors.lightBackgroundGray),
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25)
              ),
              shouldShowLoadEarlier: true,
              showTraillingBeforeSend: true,
              trailing: <Widget>[
                IconButton(
                  icon: Icon(Feather.camera),
                  onPressed: () {
                    print("object");
                  },
                )
              ],
              sendButtonBuilder: (Function click) {
                return IconButton(
                  icon: Icon(Feather.send),
                  onPressed: click,
                );
              },
              leading: <Widget>[
                IconButton(
                  icon: Icon(Feather.paperclip),
                  onPressed: () {
                    print("object");
                  },
                )
              ],
              inputDecoration: InputDecoration.collapsed(
                hintText: "Add message here...",
              ),
//                  inputFooterBuilder: () {
//                    return Padding(
//                      padding: EdgeInsets.only(bottom: 50),
//                    );
//                  }
          ),
        ),
      ),
    );
  }
    opened by poovarasanvasudevan 13
  • [Bug] DashChat is incompatible to Flutter v2.0.0

    [Bug] DashChat is incompatible to Flutter v2.0.0

    Describe the bug I upgraded to Flutter v2.0.0 and after that I get a version solving problem, since flutter_localizations depends on intl 1.7.0, which is currently not supported by dash_chat.

    To Reproduce Steps to reproduce the behavior:

    1. Install Flutter 2.0.0
    2. Create a project with at least this depencies: 
      dependencies:
  flutter:
    sdk: flutter
  flutter_localizations: 
    sdk: flutter

  intl: ^0.17.0 
  dash_chat: ^1.1.15
    3. Run flutter pub get
    4. See error
    Because dash_chat >=1.0.10 depends on intl ^0.16.0 and foo depends on intl ^0.17.0, dash_chat >=1.0.10 is forbidden.
So, because foo depends on dash_chat ^1.1.15, version solving failed.
Running "flutter pub get" in foo...                              
pub get failed (1; So, because foo depends on dash_chat ^1.1.15, version solving failed.)

    If I set intl to 1.16.0, which is supported by dash_chat, I get this error:

    Because foo depends on flutter_localizations any from sdk which depends on intl 0.17.0, intl 0.17.0 is required.
So, because foodepends on intl ^0.16.1, version solving failed. 
Running "flutter pub get" in foo...                              
pub get failed (1; So, because foo depends on intl ^0.16.1, version solving failed.)

    Expected behavior No version solving Problems with flutter pub get.

    Desktop (please complete the following information):

    • OS: Ubuntu
    • Flutter Version: 2.0.0
    • Dart Version: 2.1.12
    • Dash Chat Version: 1.1.15
    bug 
    opened by LostInDarkMath 11
  • Scroll to last index

    Scroll to last index

    The current implementation displays the first message then jumps to the last message. This breaks the user's focus and seems buggy but it's not. How can I prevent this and always show the latest messages. I've done this in a custom chat app but this plugin saves a lot of time.

    check out the unwanted behavior here: https://1drv.ms/v/s!AqyIwuPueLgbq36o4gxQSomsZy3o?e=9HmIFr

    opened by Marcosmaliki 11
  • [Bug] App crashes when opening chat in release mode

    [Bug] App crashes when opening chat in release mode

    Right now I’m having an issue that for the moment there is no way I could find the possible reason. The thing is that when I’m in debug mode, the chat works perfect, beautiful and swift, but when I upload my app to testflight, the chat crashes almost immediately, sometimes, does not crashes immediately, but the input box disappears, then I touch where the input should be, and then it crashes.

    I don’t really know what to do and I’m incredibly desperate because it only crashes release, so there's no way I could know why this is happening by seeing a print or something.

    Steps to reproduce the behavior:

    1. Add dash chat to a Flutter app
    2. Verify it works on debug mode in the simulator
    3. Deploy to Testflight
    4. See error when opening the chat
    • OS: [Mas OSX Catalina]
    • Device: working on iPhone 11/ iPhone 11 Pro Max simulator iOS 13(latest) and crashes on iPhone 11 (iOS 13 latest and iOS 14 beta)

    The rest of the app works perfect, I made even the release build process and everything.

    bug 
    opened by Andresdn14 10
  • ScrollController not attached to any scroll views

    ScrollController not attached to any scroll views

    When we set ScrollController property we have an exception telling us:

    [ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 110 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.
E/flutter (28833): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:40:39)
E/flutter (28833): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
E/flutter (28833): #2      ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:110:12)
E/flutter (28833): #3      DashChatState.initState.<anonymous closure> (package:dash_chat/src/chat_view.dart:331:48)
E/flutter (28833): #4      _rootRun (dart:async/zone.dart:1120:38)
E/flutter (28833): #5      _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter (28833): #6      _CustomZone.runGuarded (dart:async/zone.dart:923:7)
E/flutter (28833): #7      _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
E/flutter (28833): #8      _rootRun (dart:async/zone.dart:1124:13)
E/flutter (28833): #9      _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter (28833): #10     _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:947:23)
E/flutter (28833): #11     Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:21:15)
E/flutter (28833): #12     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:382:19)
E/flutter (28833): #13     _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:416:5)
E/flutter (28833): #14     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:12)

    We think that the problem is you use the default scrollController in chat_view.dart (initState) instead of our scrollController.

    Flutter doctor: Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Linux, locale es_AR.UTF-8)

    [✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3) [✓] Android Studio (version 3.5) [!] Android Studio ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. ✗ Unable to find bundled Java version. [✓] Connected device (2 available)

    bug 
    opened by lchoua 10
  • Add the ability to build messageContainerDecoration

    Add the ability to build messageContainerDecoration

    Describe the solution you'd like having a messageContainerDecorationBuilder will allow different bubbles to have different styles i think this can be helpful to get a better looking chat for example the current user can have different radius from the user he is chatting with.

    enhancement 
    opened by Dreamersoul 9
  • Added flag shouldStartMessagesFromTop to allow users to start message…

    Added flag shouldStartMessagesFromTop to allow users to start message…

    Here's the behavior when the flag is set to align to the top: Screen Shot 2020-05-12 at 11 19 37 PM

    Here's a behavior when the flag is set to align to the bottom: Screen Shot 2020-05-12 at 11 20 07 PM

    I think this is a good to have because sometimes, when the chat isn't filled, we should show from the top (as we can then show other views and interactions on top of it).

    opened by ngoctranfire 9
  • The following NoSuchMethodError was thrown building LayoutBuilder

    The following NoSuchMethodError was thrown building LayoutBuilder

    Describe the bug Getting error on the user B side when the message sent from user A.

    To Reproduce Steps to reproduce the behavior:

    1. Open both applications at the same time
    2. Send message from user A (left side - iOS)
    3. Getting error on user B (right side - Android)
    4. See error

    I/flutter (20091): The following NoSuchMethodError was thrown building LayoutBuilder: I/flutter (20091): The getter 'values' was called on null. I/flutter (20091): Receiver: null I/flutter (20091): Tried calling: values I/flutter (20091): I/flutter (20091): The relevant error-causing widget was: I/flutter (20091): LayoutBuilder I/flutter (20091):
    package:dash_chat/src/chat_view.dart:445 I/flutter (20091): I/flutter (20091): When the exception was thrown, this was the stack:

    Expected behavior "Hi" message should be visible on user B side (right side - Android) Screenshots Screenshot 2020-06-26 at 10 06 40 AM

    Desktop (please complete the following information): [✓] Flutter (Channel stable, v1.17.4, on Mac OS X 10.15.5 19F101, locale en-GB)

    [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 11.5) [✓] Android Studio (version 4.0) [✓] VS Code (version 1.46.1) [✓] Connected device (2 available)

    Additional context Add any other context about the problem here.

    bug 
    opened by ravivlb 7
  • Overflow exception

    Overflow exception

    Describe the bug There is an overflow exception when the chat doesn't take the full width of the screen

    To Reproduce Use chat dash in master detail view and send a very long message

    Expected behavior Not having overflow

    Screenshots Capture d’écran 2020-04-21 à 10 43 07

    opened by jaumard 7
  • scrollToBottom widget remains visible after leaving chat page

    scrollToBottom widget remains visible after leaving chat page

    I am using package version 1.0.15 and it seems the problem is back. The scrollToBottom widget stays on top of everything even when I leave the chat screen.

    This is the same problem that was brought up in issue: https://github.com/fayeed/dash_chat/issues/4

    I am using:

    dash_chat: ^1.0.15

    Flutter 1.12.13+hotfix.5 • channel stable • https://github.com/flutter/flutter.git Framework • revision 27321ebbad (3 months ago) • 2019-12-10 18:15:01 -0800 Engine • revision 2994f7e1e6 Tools • Dart 2.7.0

    From the .metadata file:

    version: revision: 27321ebbad34b0a3fafe99fac037102196d655ff channel: stable

    project_type: app

    bug 
    opened by StuartMesham 7
  • padding between messages

    padding between messages

    Hi

    Is there a way to change the padding between messages IN the list? I've tried all the other paddings but can't seem to get space between the actual messages.
    Am i overlooking something?

    Thanks

    opened by nholmvio 0
  • Null check operator used on a null value

    Null check operator used on a null value

    got this error after upgrading the app to NULL SAFETY. Issue is at chat_view.dart line 459

    ======== Exception caught by foundation library ==================================================== The following _CastError was thrown while dispatching notifications for ScrollController: Null check operator used on a null value

    When the exception was thrown, this was the stack: #0 DashChatState.widgetBuilt. (package:dash_chat/src/chat_view.dart:459:29) #1 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:308:24) #2 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:308:24) #3 ScrollPosition.notifyListeners (package:flutter/src/widgets/scroll_position.dart:969:11) #4 ScrollPosition.setPixels (package:flutter/src/widgets/scroll_position.dart:278:9) #5 ScrollPositionWithSingleContext.setPixels (package:flutter/src/widgets/scroll_position_with_single_context.dart:82:18) #6 BallisticScrollActivity.applyMoveTo (package:flutter/src/widgets/scroll_activity.dart:566:21) #7 BallisticScrollActivity._tick (package:flutter/src/widgets/scroll_activity.dart:553:10) #8 AnimationLocalListenersMixin.notifyListeners (package:flutter/src/animation/listener_helpers.dart:155:19) #9 AnimationController._tick (package:flutter/src/animation/animation_controller.dart:830:5) #10 Ticker._tick (package:flutter/src/scheduler/ticker.dart:238:12) #11 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15) #12 SchedulerBinding.handleBeginFrame. (package:flutter/src/scheduler/binding.dart:1057:11) #13 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:539:8) #14 SchedulerBinding.handleBeginFrame (package:flutter/src/scheduler/binding.dart:1055:17) #15 SchedulerBinding._handleBeginFrame (package:flutter/src/scheduler/binding.dart:974:5) #19 _invoke1 (dart:ui/hooks.dart:170:10) #20 PlatformDispatcher._beginFrame (dart:ui/platform_dispatcher.dart:286:5) #21 _beginFrame (dart:ui/hooks.dart:104:31) (elided 3 frames from dart:async) The ScrollController sending notification was: ScrollController#dbf76(one client, offset 0.0)

    opened by harithwick 0
  • [Feature request] ListView.custom to prevent widgets from rebuilding

    [Feature request] ListView.custom to prevent widgets from rebuilding

    Is your feature request related to a problem? Please describe. Whenever I add an item to the list of widgets the widgets rebuild including the one with an audio player causing it to stop playing. related to https://github.com/flutter/flutter/issues/58917

    Describe the solution you'd like Change the ListView.builder to ListView.custom to preserve the state of the old widgets.

    Additional context This solution might be the one needed

    enhancement 
    opened by Faaatman 0
  • [Bug] default DateBuilder is wrong when scrolling

    [Bug] default DateBuilder is wrong when scrolling

    Describe the bug Dates are shown correctly between messages but when scrolling their places change moving to the bottom.

    To Reproduce Steps to reproduce the behavior:

    1. Scroll up
    2. Scroll down back to the bottom
    3. Dates then will be wrong

    Expected behavior Dates shouldn't have changed.

    Screenshots correct dates and these are the dates after scrolling

    Desktop (please complete the following information):

    • OS: Mac
    • Device: iPhone 11 Pro real device
    • Flutter Version: 2.2.3 • channel stable
    • Dart Version: 2.13.4
    • Version 1.1.15-nullsafety
    bug 
    opened by Faaatman 1
Releases(1.0.1)
Owner
Fayeed Pawaskar
Creator of ChartNerd | Flutter | React Native | ReactJs
Fayeed Pawaskar
GitHub https://pub.dev/packages/dash_chat
The most complete flutter plugin packages for open various settings screen in Android and Ios

open_settings The most complete flutter plugin packages for open various settings screen in Android and Ios For Android: this plugin currently support

Ali Hoseinpoor 15 Dec 11, 2022
A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

A set of high-level Flutter UI components and stand-alone widgets for easier implementation of most used UI features

Evgeny Cherkasov 37 Jul 25, 2022
A highly customisable Flutter widget for entering pin code. Suitable for use cases such as login and OTP.

pin_code_text_field It's a beautiful and highly customizable Flutter widget for entering pin code. Suitable for use cases such as login and OTP. Usage

Liew Jun Tung 309 Dec 28, 2022
Flutter Complete E-Commerce app (UI by - 'The Flutter Way')

NOT COMPLETED YET! e_commerce A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

null 1 Mar 8, 2022
A complete, ready to use, Neumorphic ui kit for Flutter, 🕶️ dark mode compatible

flutter_neumorphic A complete, ready to use, Neumorphic ui kit for Flutter Try Flutter-Neumorphic on your browser : ?? https://flutter-neumorphic.fire

Idean 1.6k Jan 1, 2023
A complete Flutter E-Commerce Book Store application built using firebase as backend.

ecommerce A complete Flutter E-Commerce Book Store application built using firebase as backend. Features Add or remove item in cart Search products Ad

Fateh Singh 58 Sep 30, 2022
Complete project of simple xylophone

xylophone A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if

MD. ARIF ANZUM 0 Nov 26, 2021
Responsive Sizer helps implement are responsive layout by providing helper widgets and extensions

Responsive Sizer Responsive Sizer helps implement a responsive layout by providing helper widgets and extensions Content Installation Parameters Take

CoderUni 71 Jan 3, 2023
A customizable timer builder, with controller, animation, intervals, callbacks and custom actions for Flutter.

Custom Timer ⌛ A highly customizable timer builder, with controller, animation, intervals, callbacks, custom actions, and more! ?? Simple Usage @overr

Federico De Sía 27 Nov 23, 2022
A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience

A Flutter package consisting of pre animated cards(containers) with fluid animation for freely adding user customized cards to the app with heavy customizable options adding up to an incredible UI experience

Shantanu 12 Dec 30, 2022
A customizable shadow for any widget

simple_shadow A customizable shadow for any widget Getting Started import: import 'package:simple_shadow/simple_shadow.dart'; example: SimpleShadow(

Marcelo Pinheiro Montanher 27 Nov 23, 2022
A customizable segment tab control. Can be used with or without TabView.

A customizable segment tab control. Can be used with or without TabView. Features The package provides an advanced segmented control widget based on t

null 11 Nov 16, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Altaf Razzaque 25 Dec 20, 2022
Instagram UI designed with Flutter; it is compatible and responsive with any type of Android and iOS devices.

instagram Instagram clone UI designed with Flutter; it is compatible and responsive with any type of Android and iOS devices . Getting Started This pr

Mustafa Nabavi 4 Oct 28, 2021
A set of interesting and fun UI components, animations and routes for Flutter.

すごい ・ Sugoi A set of interesting and fun UI components, animations and routes for Flutter. By Jay (Jeroen) Meijer. This project was bootstrapped by Ve

Jeroen Meijer (Jay) 5 Jan 22, 2022
Tour guide App UI in Flutter Consist of Three Pages. First Screen is Splash Screen , Second is welcome screen routing to third Screen and Third screen consist of details , navigation, places, and responsive UI.

Tour Guide // Tourism App Ui in Flutter. Tour Guid App Ui in Flutter. Visit Website Features State Management Navigation Bar Responsive Design Hybrid

Habib ullah 2 Nov 14, 2022
I am trying to teach Responsive Ui design. This video for Web and Mobile. This design is suitable for Desktop, Tab, and Mobile platforms.

before clone the GitHub repository please give a star on the repository. I am trying to teach Responsive Ui design. This video for Web and Mobile. Thi

Blackshadow Software Ltd 22 Sep 1, 2022
Nice and clean Online Shop app UI by using #Flutter.

On our E-commerce app UI has two pages one for the product page which has a horizontal list of categories then a list of our products. Then on the details page, it shows the price and short description of the product with the Buy Now button. The best part of our E-commerce app is, each product has its own color which looks great.

Abu Anwar 1.7k Jan 3, 2023