Add auto-scroll behavior to chat message list
Implemented auto-scrolling in the chat message list to ensure that the view scrolls down to the most recent message when a new chat is added. This behavior only triggers if the user is already at the bottom of the list, providing a seamless user experience.pull/5169/head
parent
04054bfde4
commit
17f284a9ac
|
@ -19,16 +19,45 @@ class ChatView extends StatefulWidget {
|
||||||
}
|
}
|
||||||
|
|
||||||
class _ChatViewState extends State<ChatView> {
|
class _ChatViewState extends State<ChatView> {
|
||||||
|
final ScrollController _scrollController = ScrollController();
|
||||||
|
bool _isAtBottom = true;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
super.initState();
|
super.initState();
|
||||||
|
|
||||||
|
// Listen for scroll events and determine whether the scroll is at the bottom
|
||||||
|
_scrollController.addListener(() {
|
||||||
|
if (_scrollController.position.atEdge) {
|
||||||
|
if (_scrollController.position.pixels == 0) {
|
||||||
|
_isAtBottom = false;
|
||||||
|
} else {
|
||||||
|
_isAtBottom = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Schedule the fetchTasks call for after the initial build
|
// Schedule the fetchTasks call for after the initial build
|
||||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
widget.viewModel.fetchChatsForTask();
|
widget.viewModel.fetchChatsForTask();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
// Dispose of the ScrollController when the widget is removed
|
||||||
|
_scrollController.dispose();
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
void _scrollToBottom() {
|
||||||
|
_scrollController.animateTo(
|
||||||
|
_scrollController.position.maxScrollExtent,
|
||||||
|
duration: const Duration(milliseconds: 200),
|
||||||
|
curve: Curves.easeOut,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
// TODO: Do we want to have a reference to task view model in this class?
|
// TODO: Do we want to have a reference to task view model in this class?
|
||||||
|
@ -39,9 +68,18 @@ class _ChatViewState extends State<ChatView> {
|
||||||
// Chat messages list
|
// Chat messages list
|
||||||
Expanded(
|
Expanded(
|
||||||
child: ListView.builder(
|
child: ListView.builder(
|
||||||
|
controller: _scrollController,
|
||||||
itemCount: widget.viewModel.chats.length,
|
itemCount: widget.viewModel.chats.length,
|
||||||
itemBuilder: (context, index) {
|
itemBuilder: (context, index) {
|
||||||
final chat = widget.viewModel.chats[index];
|
final chat = widget.viewModel.chats[index];
|
||||||
|
|
||||||
|
// If the last message has been built and we're at the bottom of the list, scroll down
|
||||||
|
if (index == widget.viewModel.chats.length - 1 && _isAtBottom) {
|
||||||
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
|
_scrollToBottom();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
if (chat.messageType == MessageType.user) {
|
if (chat.messageType == MessageType.user) {
|
||||||
return UserMessageTile(message: chat.message);
|
return UserMessageTile(message: chat.message);
|
||||||
} else {
|
} else {
|
||||||
|
|
Loading…
Reference in New Issue