message list shifted up if extendBodyBehindAppBar is true
Closed this issue · 10 comments
When I set the extendBodyBehindAppBar parameter to true all the messages in the message list are moved up. They should not shift up and should stay in place the same way they are when extendBodyBehindAppBar is false.
The entire bug with screen shots and code samples are posted on stackoverflow.
Can you replicate this with the Dash-Chat-2 example? I was unable to replicate what your screenshots are showing. I even copied your code directly into one of the examples (without GetBuilder surrounding Dash Chat) and I don't see it.
Also, what version of Flutter/Dash-Chat-2?
Left is extendBodyBehindAppBar: true and the right is extendBodyBehindAppBar: false. You can see how the bottom is pushed up when it is true. I have also removed GetBuilder for this example (show in screenshots above) and the code is running only as the child in the Expanded widget still producing this layout issue.
Flutter 3.7.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 90c64ed42b (7 weeks ago) • 2023-03-21 11:27:08 -0500
Engine • revision 9aa7816315
Tools • Dart 2.19.5 • DevTools 2.20.1
dash_chat_2: ^0.0.15
return Container(
decoration: const BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: AssetImage('assets/images/bg_chat_invert.jpg'),
fit: BoxFit.cover,
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
title: _buildHeader(channelMessagesController),
// leading: BackButton(
// onPressed: () => _channelMessagesController.closePage(),
// ),
//elevation: 0.0,
),
extendBodyBehindAppBar: false, //****Toggle this between true and false to reproduce the issue ****///
extendBody: true,
body: Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 14),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: DashChat(
currentUser: channelMessagesController.chatSender,
onSend: (ChatMessage m) {
_sendMessage(context, channelMessagesController);
},
messages: channelMessagesController.messages,
inputOptions: InputOptions(
textController: channelMessagesController.inputTextController,
inputTextStyle: const TextStyle(color: Colors.black),
sendButtonBuilder: defaultSendButton(color: palette.kButtonColor!),
),
),
// child: GetBuilder<ChannelMessagesPageController>(
// tag: uid.toString(),
// builder: (controller) {
// return DashChat(
// currentUser: channelMessagesController.chatSender,
// onSend: (ChatMessage m) {
// _sendMessage(context, channelMessagesController);
// },
// messages: channelMessagesController.messages,
// inputOptions: InputOptions(
// textController: channelMessagesController.inputTextController,
// inputTextStyle: const TextStyle(color: Colors.black),
// sendButtonBuilder: defaultSendButton(color: palette.kButtonColor!),
// ),
// );
// },
// ),
),
],
),
),
),
);
Thank you for the test code. I was not able to reproduce this on a physical iPhone 14 Pro or on the simulator using the same device. Here are some videos.
Simulator:
Screen.Recording.2023-05-11.at.2.42.42.AM.mov
Physical:
RPReplay_Final1683787158.MP4
Here is the code I ended up using because when I copy + pasted yours I was missing some functions.
import 'package:dash_chat_2/dash_chat_2.dart';
import 'package:examples/data.dart';
import 'package:flutter/material.dart';
class Basic extends StatefulWidget {
@override
State<Basic> createState() => BasicState();
}
class BasicState extends State<Basic> {
List<ChatMessage> messages = basicSample;
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: AssetImage('assets/images/bg_chat_invert.jpg'),
fit: BoxFit.cover,
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
title: Text('Test'),
// leading: BackButton(
// onPressed: () => _channelMessagesController.closePage(),
// ),
//elevation: 0.0,
),
extendBodyBehindAppBar:
false, //****Toggle this between true and false to reproduce the issue ****///
extendBody: true,
body: Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 14),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: DashChat(
currentUser: user,
onSend: (ChatMessage m) {
setState(() {
messages.insert(0, m);
});
},
messages: messages,
inputOptions: InputOptions(
inputTextStyle: const TextStyle(color: Colors.black),
),
),
// child: GetBuilder<ChannelMessagesPageController>(
// tag: uid.toString(),
// builder: (controller) {
// return DashChat(
// currentUser: channelMessagesController.chatSender,
// onSend: (ChatMessage m) {
// _sendMessage(context, channelMessagesController);
// },
// messages: channelMessagesController.messages,
// inputOptions: InputOptions(
// textController: channelMessagesController.inputTextController,
// inputTextStyle: const TextStyle(color: Colors.black),
// sendButtonBuilder: defaultSendButton(color: palette.kButtonColor!),
// ),
// );
// },
// ),
),
],
),
),
),
);
}
}
I am curious what the disconnect could be between what I am seeing and what you are seeing. 🤔
Curious as to what it looks like in the app we are developing, it seemingly works with no issue as well. 😭
I'm also not able to reproduce it, @Trennum are you able to reproduce it in basic.dart example? and share the code here
Hey guys. Thanks for continuing to look at this. So, I can repro it with Basic. I took the code from basic (above) and created the following StatefulWidget (code below) and am still having the same problem. My next step is to create a clean project and only add DashChat as a dependency and see what happens.
import 'package:dash_chat_2/dash_chat_2.dart';
import 'package:flutter/material.dart';
class Basic extends StatefulWidget {
const Basic({super.key});
@override
State<Basic> createState() => BasicState();
}
class BasicState extends State<Basic> {
List<ChatMessage> messages = [
ChatMessage(
text: 'Hello Venom',
user: ChatUser(id: '1', firstName: 'Peter', lastName: 'Parker'),
createdAt: DateTime.now(),
),
ChatMessage(
text: 'Hello Spiderman',
user: ChatUser(id: '2', firstName: 'Eddie', lastName: 'Brock'),
createdAt: DateTime.now(),
),
ChatMessage(
text: 'I know you tried to steal my girl you punk',
user: ChatUser(id: '1', firstName: 'Peter', lastName: 'Parker'),
createdAt: DateTime.now(),
),
ChatMessage(
text: 'She\'s so fine and totally digs my black tights',
user: ChatUser(id: '2', firstName: 'Eddie', lastName: 'Brock'),
createdAt: DateTime.now(),
),
ChatMessage(
text:
'blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda',
user: ChatUser(id: '1', firstName: 'Peter', lastName: 'Parker'),
createdAt: DateTime.now(),
),
ChatMessage(
text:
'blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda blah da da blah blah yadda yadda yadda yadda',
user: ChatUser(id: '2', firstName: 'Eddie', lastName: 'Brock'),
createdAt: DateTime.now(),
),
];
@override
Widget build(BuildContext context) {
return Container(
decoration: const BoxDecoration(
color: Colors.black,
image: DecorationImage(
image: AssetImage('assets/images/bg_chat_invert.jpg'),
fit: BoxFit.cover,
),
),
child: Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
title: const Text('Test'),
),
extendBodyBehindAppBar: false, //****Toggle this between true and false to reproduce the issue ****///
extendBody: true,
body: Padding(
padding: const EdgeInsets.fromLTRB(10, 0, 10, 14),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: DashChat(
currentUser: ChatUser(id: '1', firstName: 'Peter', lastName: 'Parker'),
onSend: (ChatMessage m) {
setState(() {
messages.insert(0, m);
});
},
messages: messages,
inputOptions: const InputOptions(
inputTextStyle: TextStyle(color: Colors.black),
),
),
),
],
),
),
),
);
}
}
Not super thrilled to report this but a clean project with only DashChat added does not reproduce the issue. It works as expected. Not sure what would be causing this? If you have any suggestions or ideas please share, otherwise it looks like I'll start off by adding all my dependencies back in and seeing if that has anything to do with it. Thank you again for your time and attention and if/when I figure this out I'll report back on this thread with my findings. Thanks again.
Not sure what would be causing this
Yes really strange, I'll close the issue but don't hesitate to comment here if you find out what was your issue