Can't see the app icon in the notification panel! Basically shows a clear grey circle instead of the app_icon.png

Hi when i use my googleservices.json file it hangs on google sign in how ever it works with yours and in my new json file only invite services are present while in yours analytics are present however i added with gradle but still unable to login it keeps on loading

Firestore.instance.runTransaction((transaction) async {
         await transaction.set(
          documentReference,
          {
            'idFrom': id,
            'idTo': peerId,
            'timestamp': DateTime.now().millisecondsSinceEpoch.toString(),
            'content': content,
            'type': type
          },
        );

Dosen't write to Firestore...

Hi, I'm trying to get the image in the chat box to be clickable and showed bigger on screen with the ability to zoom in/out. I've been trying to implement https://pub.dev/packages/photo_view without any success.

I also found a way to connect GestureDetector to any images in the chatbox but I need external help to continue.
//CODE
`
: document['type'] == 1
// Image

              ? Container(
        child: GestureDetector(
          onTap: () {


          },
          child: Material(

                    child: CachedNetworkImage(
                      placeholder: (context, url) => Container(
                        child: CircularProgressIndicator(
                          valueColor: AlwaysStoppedAnimation<Color>(themeColor),
                        ),
                        width: 200.0,
                        height: 200.0,
                        padding: EdgeInsets.all(70.0),
                        decoration: BoxDecoration(
                          color: greyColor2,
                          borderRadius: BorderRadius.all(
                            Radius.circular(8.0),
                          ),
                        ),
                      ),

                      errorWidget: (context, url, error) => Material(
                        child: Image.asset(
                          'images/img_not_available.jpeg',
                          width: 200.0,
                          height: 200.0,
                          fit: BoxFit.cover,
                        ),
                        borderRadius: BorderRadius.all(
                          Radius.circular(8.0),
                        ),
                        clipBehavior: Clip.hardEdge,
                      ),

                      imageUrl: document['content'],
                      width: 200.0,
                      height:200.0,
                      fit: BoxFit.fill,
                    ),
                    borderRadius: BorderRadius.all(Radius.circular(8.0)),
                    clipBehavior: Clip.hardEdge,
                  ),

                )
      ) `

Thank you.

Hello Team,
I like your project and it works well to use.

right now, i want to display a user list based on someone who has chat on me or vice versa.
I saw idFrom and idTo there.

how to do query it so that only those who ever chat have been displayed?

Hi,

i am making groupchat id like this.
if (currentUserId.hashCode <= peerId.hashCode) {
groupChatId = '$currentUserName-$peerName';
} else {
groupChatId = '$peerName-$currentUserName';
}

I want to delete entire chat history for user one side, not for both ends. Eg. I am current user, i want to delete my history only, not peer user history like whatsapp. If i use delete method, it will delete entire coversation of both ends. But i need only from my end, keeping at peer user conversation.

How can i acheive it ? Please help me on this.

Very good demo!

When I send a chat message, I got the below error.

java.lang.RuntimeException: An error occurred while executing doInBackground()
at android.os.AsyncTask$4.done(AsyncTask.java:399)
at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:383)
at java.util.concurrent.FutureTask.setException(FutureTask.java:252)
at java.util.concurrent.FutureTask.run(FutureTask.java:271)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:289)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641)
at java.lang.Thread.run(Thread.java:919)

Caused by: java.lang.AssertionError: INTERNAL ASSERTION FAILED: A transaction object cannot be used after its update callback has been invoked.
at com.google.firebase.firestore.util.Assert.fail(com.google.firebase:firebase-firestore@@21.3.0:46)
at com.google.firebase.firestore.util.Assert.hardAssert(com.google.firebase:firebase-firestore@@21.3.0:31)
at com.google.firebase.firestore.core.Transaction.ensureCommitNotCalled(com.google.firebase:firebase-firestore@@21.3.0:246)
at com.google.firebase.firestore.core.Transaction.write(com.google.firebase:firebase-firestore@@21.3.0:241)
at com.google.firebase.firestore.core.Transaction.set(com.google.firebase:firebase-firestore@@21.3.0:105)
at com.google.firebase.firestore.Transaction.set(com.google.firebase:firebase-firestore@@21.3.0:91)
at com.google.firebase.firestore.Transaction.set(com.google.firebase:firebase-firestore@@21.3.0:67)
at io.flutter.plugins.firebase.cloudfirestore.CloudFirestorePlugin$7.doInBackground(CloudFirestorePlugin.java:688)
at io.flutter.plugins.firebase.cloudfirestore.CloudFirestorePlugin$7.doInBackground(CloudFirestorePlugin.java:682)
at android.os.AsyncTask$3.call(AsyncTask.java:378)
at java.util.concurrent.FutureTask.run(FutureTask.java:266)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:289) 
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1167) 
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:641) 
at java.lang.Thread.run(Thread.java:919) 

How to set the large icon on a fcm message?

I set the small icon via <meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@drawable/ic_notification" />

But how to set the big one?

Hi, im new to flutter and was trying to change stream by loading more data on scroll top.
Since stream is listening to a firebase snapshots I couldn't find any way to modify it.
I know firebase can paginate by querying on the last document shown but I cannot update the changes on stream.
Is it possible?

Hi sir,
I imagine that definitely, I'm doing something wrong. I've followed all your steps and I get this error every time

Can you help me?
Thanks

D/Surface ( 6720): Surface::disconnect(this=0x713117a000,api=1)
E/flutter ( 6720): [ERROR:flutter/shell/common/shell.cc(184)] Dart Error: Unhandled exception:
E/flutter ( 6720): PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 12500: , null)
D/WindowClient( 6720): Remove from mViews: DecorView@5e372b2[SignInHubActivity], this = android.view.WindowManagerGlobal@c0f268f

console messages

Hi,

I know it's just a demo so wont have everything in, but wondered what you thought the best way would be to to open the specific chat from the notification itself.

The best I could think of would be to add the onSelectNotification parameter with:

Future onSelectNotification(String payload) async {
    if (payload != null) {
      debugPrint('notification payload: ' + payload);
    }
    await Navigator.push(
      context,
      new MaterialPageRoute(
          builder: (context) =>
              Chat(
                peerId: //find peerId,
                peerAvatar: //find peerAvatar,
                peerName: //find peerName,
              );
      ),
    );
  }

How do I find the specific document references that I require? Is there a way of linking it from the notification received and passing the data all the way through to the function?

Thanks!

Why cant i run the project ?

E/flutter ( 7521): [ERROR:flutter/shell/common/engine.cc(149)] Could not prepare to run the isolate.
E/flutter ( 7521): [ERROR:flutter/shell/common/engine.cc(114)] Engine not prepare and launch isolate.
E/flutter ( 7521): [ERROR:flutter/shell/platform/android/android_shell_holder.cc(136)] Could not launch engine in configuration.

the error message

Hi @duytq94

Can you please advise how can we add the message notifications using the firebase messaging? I guess it will get the messages we store right?

does not load further page after pressing "Sign in with google".
onPressed "Sign in with google does not work out and thus does not move to next page.....?

Uploaded images doesn't seem to show at the frontend simply at the Users end, but it does show at backend(firebase storage). Any thought why that's happening?

Hi! Do You know how it solves? Plse help me to find the solution. Many thnks!

When I sign-in with google it does not proceed. Please fix it

It would be better to add status of message, either unseen, delivered, seen

HI, I CANNOT EVEN BUILD THE PROJECT

What i want as a feature in your app.
Suppose we have 5 users.

1. Elon
2. Bill
3. Jeff
4. Tony
5. Richie(me)

When i open the app, all users are show.
When i tap on some user(suppose Elon), the chat activity appears.
But instead of direct access of the chat activity, first we have to send a notification to the user(Elon), if he accepts our invitation then the chat activity appears.

I'm suddenly getting is overflowed issue, never had this issue before. Not sure if it's to do with some packages.

W/IInputConnectionWrapper( 8626): getTextAfterCursor on inactive InputConnection
E/SpannableStringBuilder( 8626): SPAN_EXCLUSIVE_EXCLUSIVE spans cannot have a zero length
E/SpannableStringBuilder( 8626): SPAN_EXCLUSIVE_EXCLUSIVE spans cannot have a zero length
I/flutter ( 8626): screen: account home
I/flutter ( 8626): Flutter error caught by Crashlytics plugin:
I/flutter ( 8626): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 8626): The following assertion was thrown during layout:
I/flutter ( 8626): A RenderFlex overflowed by 11 pixels on the bottom.
I/flutter ( 8626):
I/flutter ( 8626): The relevant error-causing widget was:
I/flutter ( 8626): Column
�[38;5;248mI/flutter ( 8626):�[39;49m
lib\…\chat\chat2.dart
I/flutter ( 8626):
I/flutter ( 8626): The overflowing RenderFlex has an orientation of Axis.vertical.
I/flutter ( 8626): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 8626): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 8626): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 8626): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 8626): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 8626): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 8626): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 8626): like a ListView.
I/flutter ( 8626): The specific RenderFlex in question is: RenderFlex#ea483 relayoutBoundary=up2 OVERFLOWING:
I/flutter ( 8626): needs compositing
I/flutter ( 8626): creator: Column ← Stack ← WillPopScope ← ChatScreen ← _BodyBuilder ← MediaQuery ←
I/flutter ( 8626): LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← AnimatedBuilder ← DefaultTextStyle ←
I/flutter ( 8626): AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#24b59 ink renderer] ← ⋯
I/flutter ( 8626): parentData: not positioned; offset=Offset(0.0, 0.0) (can use size)
I/flutter ( 8626): constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=38.9)
I/flutter ( 8626): size: Size(411.4, 38.9)
I/flutter ( 8626): direction: vertical
I/flutter ( 8626): mainAxisAlignment: start
I/flutter ( 8626): mainAxisSize: max
I/flutter ( 8626): crossAxisAlignment: center
I/flutter ( 8626): verticalDirection: down
I/flutter ( 8626): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 8626): ════════════════════════════════════════════════════════════════════════════════════════════════════
I/flutter ( 8626): firebase_crashlytics: Error reported to Crashlytics.

Hi, I want to know the best possible way to implement message delivery report (like delivered, seen) which will be shown to sender for every message.
Please provide me an idea what I have to do in firestore and in client (user) side.

Is it possible from this data model to get a list of my previous chats with last message shown. Like the one in Messenger or WhatsApp after you login...

Right now you save the document in collection like idFrom - idTo ... But I am struggling to query it for a user with uid.

Hi sir, I liked your work and the messaging is working fine and I'm able to use it. But I have to know how to implement to show latest messages from users in main page(like all chat apps do) instead of showing just all users. If I send new message then peer user should see the latest message I send to user along with their display pic and rest messages should go a step down. I tried so much to do it by myself but I have user details like name display pic and etc. in other collections and messages in other collection. I'm unable to combine these two data and show users latest message from others with their pics and latest message.
Please help me out of this....

Hi,

How can we make the Text Container adapt to the height of a long text? Right now it crops and I can't find anything on web that resolves properly.

Please advise.

Hi,
Thanks for putting up this great project.
I'm a bit new to flutter(mobile app development) and seeing your project a bit surprised that you're not using any external package for state management. Like I've seen most people are using provider or redux or BLOC to decouple network logic from UI. And in this project most Firebase functionality is coupled with UI.
So, for a project which is supposed to scale what is the recommended way? Is the design which you've chosen is good for large scale apps too? Or are there any caveats?

Hi, I might be wrong but while testing I found that using List.addAll call is appending snapshots infinitely if the enclosed stateful widget is built too many times while scrolling through chat messages.

Hi,

I'm having an issue. I'm trying to get the online/offline status but I'm not beeing able and I think it's because the app don't listen to Firebase user status, because when I go to Firebase Auth console the last time I was connected was when I made the login last time (days).

Is this normal? How can we fix it?

Hi @duytq94

I have an issue and I need your help.

Notifications work nice BUT if you login with another user you will still get notified of that other user.

For example you login with A and logout, if you send a message from B to A, you will get both. In my case I'm using the same notification to display add requests.

Can you advise please?

I tried this on logout but don't work:

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = new FlutterLocalNotificationsPlugin();
    await flutterLocalNotificationsPlugin.cancelAll();

When a new message arrives, The list of users should show an icon with numbers (just like WhatsApp) and move it to the top in real-time.

Hi,

How can I get the uploaded image?

Basically I don't know how to get that specific image we uploaded (using the time since epoch) and delete it..

With text is easy but on firestorage I'm not being able, please advise and thank you.

Error when running application.

Flutter 2.5.0 • channel beta • https://github.com/flutter/flutter.git   
Framework • revision 4cc385b4b8 (5 days ago) • 2021-09-07 23:01:49 -0700
Engine • revision f0826da7ef
Tools • Dart 2.14.0

after sign in with my google account, there is nothing on main page, how to create one chat ?

error related to firebase storage

Hi,

what to change if I want to use email sign in instead of Google sign in?

Best regards
J

Launching lib/main.dart on Android SDK built for x86 in debug mode...

Compiler message:
../flutter/.pub-cache/hosted/pub.dartlang.org/cached_network_image-1.1.1/lib/src/cached_network_image_provider.dart:42:24: Error: The method 'CachedNetworkImageProvider.load' has fewer positional arguments than those of overridden method 'ImageProvider.load'.
ImageStreamCompleter load(CachedNetworkImageProvider key) {
^
../flutter/packages/flutter/lib/src/painting/image_provider.dart:403:24: Context: This is the overridden method ('load').
ImageStreamCompleter load(T key, DecoderCallback decode);
^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
build failed.

FAILURE: Build failed with an exception.

• Where:
  Script '/home/steve/google/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 780

• What went wrong:
  Execution failed for task ':app:compileFlutterBuildDebug'.

Process 'command '/home/steve/google/flutter/bin/flutter'' finished with non-zero exit value 1

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 6s
Gradle task assembleDebug failed with exit code 1
Exited (sigterm)

Hello Duy, first of all, thank you for sharing this project as it really helps me to learn more advanced Flutter development.

When I pulled the repository and opened the project, I, however, got the following error when trying to build the app on my Android phone with "Flutter run".

Finished with error: Gradle task assembleDebug failed with exit code 1

This error pops up on commit with index e2f0ef7.

The same error pops up if I open the project in Android Studio instead of Visual Studio Code.

Is there maybe something that I have missed or could this be a bug?

I'm having an error when trying to upload an image file, this is from iOS simulator.

"This file is not an image"

this is the Rules setup on Storage for firebase

service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read: if true;
allow write: if true && request.resource.contentType.matches('image/.*');
}
}
}

Thank you for sharing amazing work for chat on flutter.
Just suggestion, is there anyway you can giving sample on implement is same flutter chat with flutter_bloc ? since it is a very popular. :)

Hi @duytq94

How hard it would be to start allowing group chats? Can you advise?

Hi! I've tried to use your case but received some object related error. Please give me some explanation. Thnks!

Hello, I created a chat application using your code and used the firebase function but there is no notification when you send a message to each other. I get an error "Cannot find pushToken" on the console. How Can I Solve This?

Google login doesn't work.
I got following error:

[ERROR:flutter/lib/ui/ui_dart_state.cc(157)] Unhandled Exception: PlatformException(sign_in_failed, com.google.android.gms.common.api.ApiException: 10: , null)

and stuck on loading screen.

The way of circular progress indicator is placed while uploading an image causing user to wait till the upload finishes in mean time user can't send any message as input field and other widgets went (background) inactive.

I was changing the firebase configuration but the app cannot be login and the circle progress is rotating unlimitedly. How to overcome this error. The firebase db is updating.

Hey,
Thanks for the project; I'm using it while learning Flutter SDK.
I have a question - How can we get the older msgs as the fetched msgs is limited to 20 only.