DashChat - The most complete Chat UI for flutter

Overview

The most complete Chat UI for flutter

Easy to use, highly customizable and fully featured

License Pub version Contributors

Features

  • Fully customizable components
  • Multi-line TextInput
  • Touchable links using flutter_parsed_text
  • Avatar as user's initials or profile picture
  • Quick Reply messages
  • Load earlier messages
  • Scroll to bottom Widget
  • Multiple media support
  • @ Mention users - WIP
  • Reply to messages - WIP
  • Typing users
  • Message status - WIP

You need another feature? you can use the customProperties field of the models, it allows you to pass other data to the library that you can then use inside custom builders to implement any feature you need.

Of course, if you think this feature can be useful to other people, feel free to open an issue/pull-request to discuss including it "natively" in the package.

Basic Usage

import 'package:dash_chat_2/dash_chat_2.dart';
import 'package:flutter/material.dart';

class Basic extends StatefulWidget {
  @override
  _BasicState createState() => _BasicState();
}

class _BasicState extends State<Basic> {
  ChatUser user = ChatUser(
    id: '1',
    firstName: 'Charles',
    lastName: 'Leclerc',
  );

  List<ChatMessage> messages = <ChatMessage>[
    ChatMessage(
      text: 'Hey!',
      user: user,
      createdAt: DateTime.now(),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Basic example'),
      ),
      body: DashChat(
        currentUser: user,
        onSend: (ChatMessage m) {
          setState(() {
            messages.insert(0, m);
          });
        },
        messages: messages,
      ),
    );
  }
}

You can run the example project to see more complex ways of using the package

Parameters of DashChat

  • ChatUser currentUser - required: Basically "you", we need to know who is the current user to put their messages to right side

  • Function(ChatMessage message) onSend - required: Function to call when the user sends a message, that's where you handle the logic to send the message to your backend and append the list of messages

  • List<ChatMessage> messages - required: The list of messages of the channel, you would usually not load all the messages at once but use the onLoadEarlier param of MessageListOptions to trigger a lazy loading

  • InputOptions inputOptions - optional: Options to customize the behaviour and design of the chat input

  • MessageOptions messageOptions - optional: Options to customize the behaviour and design of the messages

  • MessageListOptions messageListOptions - optional: Options to customize the behaviour and design of the overall list of message

  • QuickReplyOptions quickReplyOptions - optional: Options to customize the behaviour and design of the quick replies

  • ScrollToBottomOptions scrollToBottomOptions - optional: Options to customize the behaviour and design of the scroll-to-bottom button

  • readOnly - optional (default to false): Option to make the chat read only, it will hide the input field

  • List<ChatUser> typingUsers - optional: List of users currently typing in the chat

Full documentation

You can browse the full Dart documentation here: Documentation

Found this project useful?

If you found this project useful, then please consider giving it a ⭐️ on Github: https://github.com/molteo-engineering-team/Dash-Chat-2

Issues and feedback

If you have any suggestions for including a feature or if something doesn't work, feel free to open a Github issue or to open a pull request, you are more than welcome to contribute!

Contributors


SebastienBtr

💻 🎨

Credits

Thanks to Fayeed who created the v1 of this package: https://github.com/fayeed/dash_chat and made that possible!

Comments
  • [Bug] - strange behavior with video messages

    [Bug] - strange behavior with video messages

    As you can see in the attached video, when i'm sending 2 videos one after another it behave's strangely, it doesn't happen with photos and regular text

    https://user-images.githubusercontent.com/21666953/190623982-12bb8a78-2f0c-416f-93d5-7e0192326c27.mp4

    opened by udcode 5
  • feat: add maxWidth msg option

    feat: add maxWidth msg option

    Signed-off-by: fufesou [email protected]

    For some apps, chat window is a popup widget. It may be not suitable to use device's screen size. Instead user may want to set specified message max width, which is adapted to widget width.

    opened by fufesou 3
  • Cache Network image plugin throws compile time errors

    Cache Network image plugin throws compile time errors

    After integrating dash chat 2 and firebase I am facing this error message on my terminal when do flutter run. Which was not available previously. I noticed that cached_network_image-3.2.0 is only from dash_chat_2

    ../../sdk/flutter/.pub-cache/hosted/pub.dartlang.org/cached_network_image-3.2.0/ lib/src/image_provider/multi_image_stream_completer.dart:152:22: Warning: Operand of null-aware operation '?.' has type 'SchedulerBinding' which excludes null.

    • 'SchedulerBinding' is from 'package:flutter/src/scheduler/binding.dart' ('../../sdk/flutter/packages/flutter/lib/src/scheduler/binding.dart'). SchedulerBinding.instance?.scheduleFrameCallback(_handleAppFrame); ^ ../../sdk/flutter/.pub-cache/hosted/pub.dartlang.org/cached_network_image-3.2.0/ lib/src/image_provider/cached_network_image_provider.dart:109:29: Warning: Operand of null-aware operation '?.' has type 'PaintingBinding' which excludes null.
    • 'PaintingBinding' is from 'package:flutter/src/painting/binding.dart' ('../../sdk/flutter/packages/flutter/lib/src/painting/binding.dart'). () => PaintingBinding.instance?.imageCache?.evict(key),

    can you provide any assistance to resolve this Environment

    • OS: [IOS, ANdroid]
    • Device: [ iPhone13 (IOS 15.5), Pixel 4a (Android 13)] | Emulator
    • Flutter: [2.10.4]
    • Xcode [latest]
    bug 
    opened by naasir27 3
  • [Bug] Android example broken

    [Bug] Android example broken

    Describe the bug

    One or more plugins requires compileSdkVersion 31

    Warning: The plugin path_provider_android requires Android SDK version 31.
    For more information about build configuration, see https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
    One or more plugins require a higher Android SDK version.
    Fix this issue by adding the following to /Users/ivan.semkin/Downloads/Dash-Chat-2-main/example/android/app/build.gradle:
    android {
      compileSdkVersion 31
      ...
    }
    

    To Reproduce

    Steps to reproduce the behavior:

    1. Open example project
    2. Try to build it on Android
    3. See error

    Expected behavior

    Android example builds and launches

    Environment

    • OS: macOS 12.4
    • Device: Android
    • Software/library Version 0.0.6 (latest)
    bug 
    opened by ivan-semkin-gismart 3
  • [Bug] Open URI's from the chat message

    [Bug] Open URI's from the chat message

    Describe the bug

    When a message contains an uri, i get a ERR_UNKNOWN_URL_SCHEME

    To Reproduce

    Send a message containing a link and open it up!

    Expected behavior

    Open a dynamic link and redirect to another screen

    Screenshots

    https://user-images.githubusercontent.com/63013314/192375206-c8c325bc-8138-4569-be3d-2d6bd8de85e5.mov

    Environment

    • OS: iOS, Android
    bug 
    opened by kirilllapshev 2
  • [Bug] Doesn't respond to observable value changes

    [Bug] Doesn't respond to observable value changes

    The DashChat widget doesn't reflect changes to observable values in a GetXController. In my instance, I'm using a settings controller to set MessageOptions.currentUserContainerColor and MessageOptions.currentUserTextColor. When I toggle between light and dark mode, other elements wrapped by an Obx(() => on the same page respond to this value change, but the DashChat doesn't.

       body: Obx(
              () => DashChat(
                messageOptions: MessageOptions(
                    showCurrentUserAvatar: true,
                    currentUserContainerColor:
                        _settingsController.currentListTheme.value.offsetColor,
                    currentUserTextColor:
                        _settingsController.currentListTheme.value.textColor),
                currentUser: user,
                onSend: (ChatMessage m) {
                  setState(() {
                    messages.insert(0, m);
                  });
                },
                messages: messages,
              ),
            ), 
    

    Steps to reproduce the behavior:

    1. Put DashChat on a widget page within a scaffold,
    2. Create a GetxController, and observable values for colors and apply them to DashChat,
    3. Make the controller's color values respond to light/dark mode changes,
    4. Toggle between light and dark mode,
    5. Notice that the colors do not change.

    Expected behavior

    It is expected that DashChat will respond to observable value changes.

    Environment

    • OS: macOS 12.4
    • Device: iOS Simulator
    • Language Version: Channel stable, 3.0.4
    • Software/library Version: DashChat ^0.0.10

    Additional context

    Great product, just need this.

    bug 
    opened by ScottWallace 2
  • [Bug] sendOnEnter doesn't seem to work

    [Bug] sendOnEnter doesn't seem to work

    Describe the bug

    Thanks for the great lib! I'm trying to use the sendOnEnter functionality, but it seems to have no effect. No matter what I do, the enter key always starts a new line. Looking through the code, I don't see this used at all except in the onSubmitted callback, and I can't seem to figure out where/if it's ever called.

    To Reproduce

    Steps to reproduce the behavior:

    1. Using the base demo.
    2. Add the sendOnEnter option to InputOptions.
    3. Run the app and hit enter.
    4. You'll see a new line instead of submitting the text as is.

    Expected behavior

    I expect the text to be sent when hitting the "return" key (and ideally this would be set to "enter" or "send" instead in this mode).

    Screenshots

    If applicable, add screenshots to help explain your problem.

    Environment

    • OS: Mac
    • Device: iPhone SE Emulator
    • Language Version: 2.17.5
    • Software/library Version 0.0.7

    Additional context

    Add any other context about the problem here.

    bug 
    opened by bennichols 2
  • Add `physics` parameter to `MessageListOptions`

    Add `physics` parameter to `MessageListOptions`

    When there are few chat messages in the screen, the list is not scrollable I want to have the ability to make the chat list always scrollable.

    I saw that there was a closed PR from DashChat v1. https://github.com/fayeed/dash_chat/pull/138/files

    Can we apply a similar PR to v2 please?

    opened by aytunch 2
  • [Bug] Mention User Overlay doesn't dismiss properly and stays on every screen sometimes.

    [Bug] Mention User Overlay doesn't dismiss properly and stays on every screen sometimes.

    I was checking out the example app provider by the team and when I try mentions feature there is unexpected behaviour from the overlay, it doesn't get closed properly ans stays through every screen.

    It works fine when :

    1. If I select any name from the list
    2. If I type @abc then continue typing.

    Fails when:

    1. type @absc and press backspace , then overlay don't get dismised and there's this issue as in screenshot.
    2. unexpectedly sometimes when writing mentioning names not in list or even names from the list (see video for ref )

    To Reproduce

    Steps to reproduce the behavior:

    1. Compile example app.
    2. go to mentions page
    3. type @anyName not in user list and dismiss keyboard without inputting any other character. or @(any name not in list or even from list and then continue typing) , try multiple times (see the attached video for ref)

    Expected behavior Overlay should get dismissed when keyboard is dismissed and when no user is selected from the list typing is going on.

    Screenshots Screenshot 2022-09-15 at 6 23 56 PM Screenshot 2022-09-15 at 6 23 34 PM

    simulator screens WhatsApp Image 2022-09-14 at 5 46 50 PM

    This happened a lot while testing (sometimes it happens and sometimes not)

    https://user-images.githubusercontent.com/61776980/190411386-f4fe0dd5-4797-4725-96b6-7ced300b574a.mp4

    Environment

    • OS: [e.g. Mac m1 pro 2021]
    • Device: [e.g. moto edge 20 fusion] | Emulator - pixel 4 a API 31
    • Language Version: [e.g 3.3.0]
    • Software/library Version [dash_chat_2 0.0.14]

    Additional context

    Suggestion - on mention callback should be called when trigger character is typed, so that we can show all user list.

    bug 
    opened by Noob-2-pro 1
  • Can we reconsider the name Dash-chat-2?

    Can we reconsider the name Dash-chat-2?

    Can we reconsider the name Dash-chat-2? Like chat-ui dash-chat-ui dash-ui im-ui or something better?

    Dash-Chat-2 这个名称能否再斟酌一下呢? 比如: chat-ui dash-chat-ui dash-ui im-ui 或者其他的更好的名称?

    question 
    opened by leeyisoft 1
  • [Bug] Chat scrolls to the bottom automatically when new message arrives/is sent

    [Bug] Chat scrolls to the bottom automatically when new message arrives/is sent

    As written in the title. In DashChat v1, this was not the case. Is there any way to disable this? When people read older messages, this is disruptive.

    bug 
    opened by instance01 0
  • [Question] What is improved from dash_chat (v1)?

    [Question] What is improved from dash_chat (v1)?

    I am guessing this package is related to https://pub.dev/packages/dash_chat, but i do not know what is the difference between the two. Is this an enhancement of the original package or a completely new package with a lot of the same features?

    If this package is suppose to be Dashchat´s v2 update, can you please update the documentation on the dash_chat package to reflect this, with a link to the new package? Also a small text with the reason of the new package name would be nice.

    question 
    opened by tobiasht 3
Owner
Molteo
Molteo is a digital workspace, which provides real-time overview of projects and construction sites, flexible resource capturing, and paperless billing
Molteo
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
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
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Habib ullah 3 May 15, 2022
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Urmish Patel 191 Dec 29, 2022
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. Made from Coolicons. ?? Installation In the dependencies: section of your pu

Stephen Joel 1 May 24, 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
Flutter-business-card-app - Flutter + Dart business card mobile app

Dart + Flutter Business Card Mobile Application

Mark Hellner 1 Nov 8, 2022
A Flutter project that gives basic flutter design to implement a login UI

Login UI Design A Flutter project that gives basic flutter design to implement a

CABREX 9 Nov 8, 2022
Flutter Shop UI - an e-commerce app using Flutter

If you are planning to create an e-commerce app using Flutter then this Shop UI Kit would be the perfect choice for you to make a gorgeous app for both Android & iOS.

Trần Văn Nguyên 21 Nov 21, 2022
A Flutter staggered grid view

flutter_staggered_grid_view A Flutter staggered grid view which supports multiple columns with rows of varying sizes. Features Configurable cross-axis

Romain Rastel 2.7k Dec 30, 2022
A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Victor Choueiri 434 Jan 7, 2023
Tinder like cards swipe effect with Flutter.

Tinder cards Hi! After showcasing Focus for Reddit, the app I am working on, people asked me how did I do the tinder like cards swipe (posts media are

Ivascu Adrian 733 Jan 7, 2023
The app to demo animation with Flutter by implement Facebook reactions

Facebook Reactions Animation Description The app to demo animation with Flutter by implement Facebook reactions. Watch the demo video for more clarity

Duy Tran 318 Jan 8, 2023
Custom widget for Flutter

Flushbar Use this package if you need more customization when notifying your user. For Android developers, it is made to substitute toasts and snackba

Andre Haueisen 899 Dec 30, 2022
flutter stepper_touch widget

stepper_touch the concept of the widget inspired from Nikolay Kuchkarov. i extended the functionality to be more useful in real world applications Tha

Raouf Rahiche 271 Dec 30, 2022