dart - Data coming in chunks positioning issue flutter - Stack Overflow

admin管理员组

文章数量:1125589

I am working on a Flutter app where messages are displayed in a ListView.builder. The list scrolls in reverse to mimic a chat interface, and when new messages are added, I want the scroll position to maintain the same behavior as in ChatGPT—i.e., the latest messages should be visible without unexpected jumps or scroll movements.

However, currently, my app doesn't maintain the scroll position properly. When a new message is added or when the "isTyping" value changes, the list scroll position is affected. Here's a snippet of my ListView.builder implementation:

Expanded(
          child: ListView.builder(
            controller: controller.scrollController,
            reverse: true,
            itemCount: controller.messages.length +
                (controller.isTyping.value ? 1 : 0),
            itemBuilder: (context, index) {
              if (controller.isTyping.value && index == 0) {
                return Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    constraints: BoxConstraints(
                      maxWidth: 80.w(context),
                    ),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        const CircleAvatar(
                          backgroundColor: Colors.transparent,
                          child: SizedBox(
                            height: 31,
                            child: Image(image: AppImages.splashLogo),
                          ),
                        ).paddingOnly(right: 16),
                        Obx(
                          () => Expanded(
                            child: (controller.displayText.value != "")
                                ? MarkdownBody(
                                    selectable: true,
                                    onTapLink: (text, href, title) async {
                                      if (href != null) {
                                        final uri = Uri.parse(href);
                                        if (await canLaunchUrl(uri)) {
                                          await launchUrl(uri,
                                              mode: LaunchMode
                                                  .externalApplication);
                                        } else {
                                          debugPrint(
                                              'Could not launch $href');
                                        }
                                      }
                                    },
                                    data: controller.displayText.value,
                                    styleSheet: MarkdownStyleSheet(
                                      p: GoogleFonts.inter(
                                        fontSize: 14,
                                        fontWeight: FontWeight.w500,
                                        color: AppColors.blackText(
                                            context), // Your custom color method
                                      ),
                                    ),
                                  )

Problem: When new messages are added, or when isTyping changes, the scroll position doesn't behave like I want it to. I want it to maintain the same positioning for the existing messages (similar to how ChatGPT's chat interface works).

Desired Outcome: I would like the ListView.builder to:

Stay at the bottom when a new message is added. Maintain the relative position of existing messages when the "isTyping" indicator is displayed or hidden.

Visual References: Here’s a GIF of the current behavior in my app:

And here's the behavior I want to achieve, like ChatGPT:

Attempts and Research: I have tried using ScrollController.animateTo() and ScrollController.jumpTo() but haven't been able to fine-tune the behavior. I have also looked into ScrollPosition and NotificationListener for scroll updates, but it hasn't resolved the issue. How can I achieve this functionality in Flutter? Any suggestions or best practices would be appreciated!

本文标签： dartData coming in chunks positioning issue flutterStack Overflow