TreeSliver data disappears when scrolling #153149

stoneLee81 · 2024-08-09T08:06:02Z

Steps to reproduce

in treesliver demo, add more testing data to let it fill the screen, and scrolling

Expected results

normal

Actual results

In the demo of the treesliver component, when the data fills the screen, the data disappears and reappears as you drag the scrollbar.

Code sample

[Paste your code here]

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[Paste your output here]

huycozy · 2024-08-09T10:33:04Z

Thank you for the report. I can reproduce this issue using the first sample code on TreeSliver widget.

Demo

Screen.Recording.2024-08-09.at.17.20.17.mov

Sample code

import 'package:flutter/material.dart';

/// Flutter code sample for [TreeSliver].

void main() => runApp(const TreeSliverExampleApp());

class TreeSliverExampleApp extends StatelessWidget {
  const TreeSliverExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: TreeSliverExample(),
    );
  }
}

class TreeSliverExample extends StatefulWidget {
  const TreeSliverExample({super.key});

  @override
  State<TreeSliverExample> createState() => _TreeSliverExampleState();
}

class _TreeSliverExampleState extends State<TreeSliverExample> {
  TreeSliverNode<String>? _selectedNode;
  final TreeSliverController controller = TreeSliverController();
  final List<TreeSliverNode<String>> _tree = <TreeSliverNode<String>>[
    TreeSliverNode<String>('First'),
    TreeSliverNode<String>(
      'Second',
      children: <TreeSliverNode<String>>[
        TreeSliverNode<String>(
          'alpha',
          children: <TreeSliverNode<String>>[
            TreeSliverNode<String>('uno'),
            TreeSliverNode<String>('dos'),
            TreeSliverNode<String>('tres'),
          ],
        ),
        TreeSliverNode<String>('beta'),
        TreeSliverNode<String>('kappa'),
      ],
    ),
    TreeSliverNode<String>(
      'Third',
      expanded: true,
      children: <TreeSliverNode<String>>[
        TreeSliverNode<String>('gamma'),
        TreeSliverNode<String>('delta'),
        TreeSliverNode<String>('epsilon'),
      ],
    ),
    TreeSliverNode<String>('Fourth'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TreeSliver Demo'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          TreeSliver<String>(
            tree: _tree,
            controller: controller,
            treeNodeBuilder: (
              BuildContext context,
              TreeSliverNode<Object?> node,
              AnimationStyle animationStyle,
            ) {
              Widget child = GestureDetector(
                behavior: HitTestBehavior.translucent,
                onTap: () {
                  setState(() {
                    controller.toggleNode(node);
                    _selectedNode = node as TreeSliverNode<String>;
                  });
                },
                child: TreeSliver.defaultTreeNodeBuilder(
                  context,
                  node,
                  animationStyle,
                ),
              );
              if (_selectedNode == node as TreeSliverNode<String>) {
                child = ColoredBox(
                  color: Colors.purple[100]!,
                  child: child,
                );
              }
              return child;
            },
          ),
        ],
      ),
    );
  }
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.24.0, on macOS 14.6 23G80 darwin-x64, locale en-VN)
    • Flutter version 3.24.0 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 80c2e84975 (7 days ago), 2024-07-30 23:06:49 +0700
    • Engine revision b8800d88be
    • Dart version 3.5.0
    • DevTools version 2.37.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode15.4.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.91.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.94.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 14.6 23G80 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 127.0.6533.89

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.24.0-1.0.pre.525, on macOS 14.6 23G80 darwin-x64, locale en-VN)
    • Flutter version 3.24.0-1.0.pre.525 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 76107bdf50 (4 hours ago), 2024-08-08 16:50:40 -0700
    • Engine revision 0520889683
    • Dart version 3.6.0 (build 3.6.0-130.0.dev)
    • DevTools version 2.38.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode15.4.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2023.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)

[✓] VS Code (version 1.92.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.94.0

[✓] Connected device (3 available)
    • Pixel 7 (mobile) • 2B171FDH20084L • android-arm64  • Android 14 (API 34)
    • macOS (desktop)  • macos          • darwin-x64     • macOS 14.6 23G80 darwin-x64
    • Chrome (web)     • chrome         • web-javascript • Google Chrome 127.0.6533.100

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

OguzAytar · 2024-12-10T10:49:33Z

Any progress on the problem? I'm having the same problem

DMyachin · 2024-12-14T12:45:32Z

The bug can be reproduce in the official documentation: https://api.flutter.dev/flutter/widgets/TreeSliver-class.html

demo.mp4

whoistobias · 2025-04-16T00:12:07Z

I've just run into this as well. Interesting enough, I attempted to use this sliver in the middle of a custom scroll view and The result was the correct amount of space was taken up, but the items are rendered in the wrong place. The culling feature works, items disappear when the scroll amount would result in them being off screen, but they don't move.

I've attached my photo where you can see the items are rendered at the top of the list when they should begin after the search bar.

Is there a workaround for this? I'm unsure how to continue.

Fixes: #153149 ## Pre-launch Checklist - [x] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [x] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [x] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [x] I signed the [CLA]. - [x] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [x] I added new tests to check the change I am making, or this PR is [test-exempt]. - [x] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

huycozy added the in triage Presently being triaged by the triage team label Aug 9, 2024

huycozy changed the title ~~treesliver， data disappears when scrolling~~ TreeSliver data disappears when scrolling Aug 9, 2024

Piinks added p: two_dimensional_scrollables Issues pertaining to the two_dimensional_scrollables package triaged-framework Triaged by Framework team P2 Important issues not at the top of the work list labels Aug 20, 2024

darshankawar mentioned this issue Dec 10, 2024

TreeSliver scroll and Expand #160017

Closed

yiiim mentioned this issue Apr 28, 2025

Fix the SliverTree scrolling rendering issue. #167921

Merged

9 tasks

Piinks added the waiting for PR to land (fixed) A fix is in flight label Apr 30, 2025

auto-submit bot closed this as completed in #167921 May 1, 2025

huycozy added the r: fixed Issue is closed as already fixed in a newer version label May 5, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TreeSliver data disappears when scrolling #153149

TreeSliver data disappears when scrolling #153149

stoneLee81 commented Aug 9, 2024

huycozy commented Aug 9, 2024

OguzAytar commented Dec 10, 2024 •

edited

Loading

DMyachin commented Dec 14, 2024

whoistobias commented Apr 16, 2025

TreeSliver data disappears when scrolling #153149

TreeSliver data disappears when scrolling #153149

Comments

stoneLee81 commented Aug 9, 2024

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented Aug 9, 2024

OguzAytar commented Dec 10, 2024 • edited Loading

DMyachin commented Dec 14, 2024

whoistobias commented Apr 16, 2025

OguzAytar commented Dec 10, 2024 •

edited

Loading