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

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:

flutter_chatview/lib/src/widgets/chat_view.dart

Line 223 in 34a29c8

child: Stack(

You are putting/rendering the SendMessageWidget…

flutter_chatview/lib/src/widgets/chat_view.dart

Line 278 in 34a29c8

SendMessageWidget(

...on top of e.g. the ChatListWidget...

flutter_chatview/lib/src/widgets/chat_view.dart

Line 251 in 34a29c8

return ChatListWidget(

...only to push the latter out from underneath it with a SizedBox.

flutter_chatview/lib/src/widgets/chat_groupedlist_widget.dart

Line 248 in 34a29c8

const SizedBox(height: 100),

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

flutter_chatview/lib/src/widgets/chat_groupedlist_widget.dart

Lines 211 to 213 in 2e3eccf

    
           height: (MediaQuery.of(context).size.width * 
        
                   (widget.replyMessage.message.isNotEmpty ? 0.3 : 0.14)) + 
        
               (widget.chatTextFieldTopPadding),

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jonasbadstuebner commented Jun 17, 2024 •

edited by jigar-s-simform

Loading

vatsaltanna-simformsolutions commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

vatsaltanna-simformsolutions commented Jun 18, 2024

vatsaltanna-simformsolutions commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

vatsaltanna-simformsolutions commented Jun 18, 2024 •

edited

Loading

jonasbadstuebner commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

aditya-css commented Jun 20, 2024

aditya-css left a comment

aditya-css Jun 20, 2024

jonasbadstuebner Jun 20, 2024

jonasbadstuebner Jun 20, 2024

aditya-css Jun 20, 2024

jonasbadstuebner Jun 20, 2024

aditya-css Jun 20, 2024

jonasbadstuebner Jun 20, 2024

jonasbadstuebner commented Jun 20, 2024

Gaurav-CareMonitor commented Nov 1, 2024

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

		class CustomScrollBehavior extends ScrollBehavior {

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

Are you sure you want to change the base?

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

Conversation

jonasbadstuebner commented Jun 17, 2024 • edited by jigar-s-simform Loading

Description

Checklist

Breaking Change?

Related Issues

vatsaltanna-simformsolutions commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

vatsaltanna-simformsolutions commented Jun 18, 2024

vatsaltanna-simformsolutions commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

vatsaltanna-simformsolutions commented Jun 18, 2024 • edited Loading

jonasbadstuebner commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

jonasbadstuebner commented Jun 18, 2024

aditya-css commented Jun 20, 2024

aditya-css left a comment

Choose a reason for hiding this comment

aditya-css Jun 20, 2024

Choose a reason for hiding this comment

jonasbadstuebner Jun 20, 2024

Choose a reason for hiding this comment

jonasbadstuebner Jun 20, 2024

Choose a reason for hiding this comment

aditya-css Jun 20, 2024

Choose a reason for hiding this comment

jonasbadstuebner Jun 20, 2024

Choose a reason for hiding this comment

aditya-css Jun 20, 2024

Choose a reason for hiding this comment

jonasbadstuebner Jun 20, 2024

Choose a reason for hiding this comment

jonasbadstuebner commented Jun 20, 2024

Gaurav-CareMonitor commented Nov 1, 2024

jonasbadstuebner commented Jun 17, 2024 •

edited by jigar-s-simform

Loading

vatsaltanna-simformsolutions commented Jun 18, 2024 •

edited

Loading