feat: 🌟 use column instead of stack to remove arbitrary paddings by jonasbadstuebner · Pull Request #196 · SimformSolutionsPvtLtd/chatview

jonasbadstuebner · 2024-06-17T22:36:10Z

Description

Unless you have had a reason to make the setup stacked instead of a column in the first place, we can stop guessing the bottom inset for the chat message list now.
I don't like that you hardcoded the 100-height SizedBox.
Also I added the padding to the top of the Textfield, so we don't have to remember to put a bottom padding in all the other places.

Checklist

The title of my PR starts with a Conventional Commit prefix (fix:, feat:, docs: etc).
I have followed the Contributor Guide when preparing my PR.
I have updated/added tests for ALL new/updated/fixed functionality.
I have updated/added relevant documentation in docs and added dartdoc comments with ///.
I have updated/added relevant examples in examples or docs.

Breaking Change?

Yes, this PR is a breaking change.
No, this PR is not a breaking change.

Related Issues

part of #187

vatsaltanna-simformsolutions · 2024-06-18T11:57:33Z

We can't use a column due to the UI requirements. I have shared a screenshot for reference. Additionally, the 100px static height was a mistake made during debugging. I will update this in a separate PR.

jonasbadstuebner · 2024-06-18T11:58:40Z

The screenshot you showed me is using a Stack I guess.

jonasbadstuebner · 2024-06-18T12:09:56Z

Talking about this Stack:
https://github.com/SimformSolutionsPvtLtd/flutter_chatview/blob/34a29c82f58967d2f08bf411dea1f7a54ac2ee3f/lib/src/widgets/chat_view.dart#L223

You are putting/rendering the SendMessageWidget…
https://github.com/SimformSolutionsPvtLtd/flutter_chatview/blob/34a29c82f58967d2f08bf411dea1f7a54ac2ee3f/lib/src/widgets/chat_view.dart#L278
...on top of e.g. the ChatListWidget...
https://github.com/SimformSolutionsPvtLtd/flutter_chatview/blob/34a29c82f58967d2f08bf411dea1f7a54ac2ee3f/lib/src/widgets/chat_view.dart#L251
...only to push the latter out from underneath it with a SizedBox.
https://github.com/SimformSolutionsPvtLtd/flutter_chatview/blob/34a29c82f58967d2f08bf411dea1f7a54ac2ee3f/lib/src/widgets/chat_groupedlist_widget.dart#L248

There is no reason to do that.
Also this part does not have to come back after merging this PR:

https://github.com/SimformSolutionsPvtLtd/flutter_chatview/blob/2e3eccf96a94cd9e4e5cdf96b3d9159a211cfe8d/lib/src/widgets/chat_groupedlist_widget.dart#L211-L213
Because the TextField will push the chat further up when it grows due to a reply being initiated.

vatsaltanna-simformsolutions · 2024-06-18T12:30:33Z

I have shared a screenshot for your branch only.

vatsaltanna-simformsolutions · 2024-06-18T12:31:27Z

check this PR. #197

jonasbadstuebner · 2024-06-18T12:40:35Z

Are you talking about the padding above the text field? 😅

jonasbadstuebner · 2024-06-18T12:41:47Z

Or do you want to have the messages be shown behind the text field?

vatsaltanna-simformsolutions · 2024-06-18T13:08:02Z

Yes, it should be displayed behind the field, primarily behind the top corners of the text field. I initially tried using a column but then realized the reason for using a stack and reverted it back to a stack. 😅

jonasbadstuebner · 2024-06-18T14:07:12Z

I'm offering a better solution (and fixing a weird thing where I did not see any error or anything due to the config not having settings that would show anything).

jonasbadstuebner · 2024-06-18T14:11:15Z

I could make the overflow smaller, but it is working.

jonasbadstuebner · 2024-06-18T14:24:26Z

Please test my changes again and let me know what you think.

aditya-css · 2024-06-20T06:26:01Z

Hello @jonasbadstuebner,
Thanks for this PR. Nice Work.

I tested your code and have found following two things:

In the screenshot attached you can see that the texts are visible below the textfield as well. This is not desired. For reference, you can check the chat screen of Instagram and see that the texts are visible till the curve of the textfield only and not in the area below it.
The scrollbar on the right in the attached screenshot is quite long and misleading from user perspective. This seems primarily because of using MediaQuery.of(context).size.height in chat_groupedlist_widget.dart and chat_view.dart files in your changes.

Can you please address above mentioned changes and update your PR?

aditya-css

The issue 2 from previously mentioned issues is resolved, but the first issue of texts appearing below the textfield still exists.

This is the current version from this PR:
https://github.com/SimformSolutionsPvtLtd/flutter_chatview/assets/98031138/bc564f35-088d-4e41-bf92-057ff0ece64c

This is what we desire:
https://github.com/SimformSolutionsPvtLtd/flutter_chatview/assets/98031138/a75c44b0-fab6-4249-8cef-125f302a1395

lib/src/widgets/chat_groupedlist_widget.dart

aditya-css · 2024-06-20T08:59:48Z

lib/src/widgets/chat_view.dart

+                        clipBehavior: Clip.none,
+                        children: [
+                          Positioned.fill(
+                            bottom: -MediaQuery.of(context).size.height,


Ideally, this should be as big as the textfield is and not some large value like screen height.

I cannot know how large the Textfield is, because the Textfield is built after the chat list.

I found a different solution, let me know what you think after my next push.

lib/src/widgets/custom_scroll_behavior.dart

aditya-css · 2024-06-20T09:04:00Z

lib/src/widgets/custom_scroll_behavior.dart

+  @override
+  Widget buildScrollbar(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    switch (getPlatform(context)) {


Can you please convert this to switch expression?

This is the way it is implemented in the parent class. I don't think the switch expression would help here, considering I would have to be very verbose.

aditya-css · 2024-06-20T09:15:05Z

lib/src/widgets/custom_scroll_behavior.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class CustomScrollBehavior extends ScrollBehavior {


I believe a more specific name would make more sense than just using custom as prefix.

Do you have a recommendation?
BottomPaddedScrollBehavior?

lib/src/widgets/chat_view.dart

lib/src/widgets/chat_list_widget.dart

lib/src/widgets/chat_groupedlist_widget.dart

jonasbadstuebner · 2024-06-20T10:07:09Z

Yes, I am not done with the implementation yet. But I will address your comments later.

Gaurav-CareMonitor · 2024-11-01T11:14:59Z

@jonasbadstuebner any progess?

jonasbadstuebner force-pushed the remove-arbitrary-padding branch from 425f716 to 5624473 Compare June 18, 2024 14:06

jonasbadstuebner force-pushed the remove-arbitrary-padding branch from 5624473 to 83b5896 Compare June 18, 2024 14:24

feat: 🌟 use column instead of stack to remove arbitrary paddings

70e2cb5

jonasbadstuebner force-pushed the remove-arbitrary-padding branch from 83b5896 to 70e2cb5 Compare June 20, 2024 07:50

aditya-css requested changes Jun 20, 2024

View reviewed changes

jonasbadstuebner requested a review from aditya-css July 19, 2024 22:03

vatsaltanna added a commit that referenced this pull request Nov 1, 2024

fix: 🐛 issue #196 userReactionCallback not working

0c0b469

		@@ -0,0 +1,32 @@
		import 'package:flutter/material.dart';

		class CustomScrollBehavior extends ScrollBehavior {

Conversation

jonasbadstuebner commented Jun 17, 2024 • edited by jigar-s-simform Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Breaking Change?

Related Issues

Uh oh!

vatsaltanna-simformsolutions commented Jun 18, 2024

Uh oh!

jonasbadstuebner commented Jun 18, 2024

Uh oh!

jonasbadstuebner commented Jun 18, 2024

Uh oh!

vatsaltanna-simformsolutions commented Jun 18, 2024

Uh oh!

vatsaltanna-simformsolutions commented Jun 18, 2024

Uh oh!

jonasbadstuebner commented Jun 18, 2024

Uh oh!

jonasbadstuebner commented Jun 18, 2024

Uh oh!

vatsaltanna-simformsolutions commented Jun 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jonasbadstuebner commented Jun 18, 2024

Uh oh!

jonasbadstuebner commented Jun 18, 2024

Uh oh!

jonasbadstuebner commented Jun 18, 2024

Uh oh!

aditya-css commented Jun 20, 2024

Uh oh!

aditya-css left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

aditya-css Jun 20, 2024

Choose a reason for hiding this comment

Uh oh!

jonasbadstuebner Jun 20, 2024

Choose a reason for hiding this comment

Uh oh!

jonasbadstuebner Jun 20, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

aditya-css Jun 20, 2024

Choose a reason for hiding this comment

Uh oh!

jonasbadstuebner Jun 20, 2024

Choose a reason for hiding this comment

Uh oh!

aditya-css Jun 20, 2024

Choose a reason for hiding this comment

Uh oh!

jonasbadstuebner Jun 20, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jonasbadstuebner commented Jun 20, 2024

Uh oh!

Gaurav-CareMonitor commented Nov 1, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jonasbadstuebner commented Jun 17, 2024 •

edited by jigar-s-simform

Loading

vatsaltanna-simformsolutions commented Jun 18, 2024 •

edited

Loading