SliverTreeList #147171

Piinks · 2024-04-22T16:07:41Z

FYI for Reviewers: Much of the API surface matches that of the 2D TreeView in flutter/packages#6592. If it changes here, it should change there, and vice versa.

📜 Design Document

This adds classes and associated callbacks and controllers for SliverTree. Core components:

SliverTree
RenderSliverTree
SliverTreeNode
SliverTreeController
TreeStateMixin
SliverTreeIndentationType
SliverTreeTraversalOrder

Fixes #114299

sliver_0.mov

sliver_1.mov

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

packages/flutter/lib/src/widgets/sliver_tree.dart

examples/api/lib/widgets/sliver/sliver_tree.0.dart

packages/flutter/lib/src/material/sliver_tree.dart

Piinks · 2024-04-22T23:52:07Z

For tomorrow:

Move SliverTree back to widgets from material once Update icon tree shaker to allow system font fallback #147202 lands
More name collisions, see Google testing

Piinks · 2024-04-24T22:48:05Z

packages/flutter/lib/src/widgets/sliver_tree.dart

+///
+/// ** See code in examples/api/lib/widgets/sliver/sliver_tree.1.dart **
+/// {@end-tool}
+class SliverTreeList<T> extends StatefulWidget {


I do not love this name, but SliverTree and SliverAnimatedTree are taken. Open to other ideas. I think this works because the tree itself is flattened to a list of active nodes.
And it subclasses SliverVariedExtentList. So.. it's list-y.

TahaTesser · 2024-04-25T08:26:46Z

packages/flutter/lib/src/widgets/sliver_tree.dart

+  /// the [SliverTreeList.defaultAnimationCurve], which is [Curves.linear].
+  ///
+  /// To disable the tree animation, use [AnimationStyle.noAnimation].
+  final AnimationStyle? animationStyle;


animationStyle could be named toggleAnimationStyle, which makes it easier to understand what type of animation this property customizes. In this case it used for toggle animation based on the docs. (Noticed this when reviewing examples)

E.g. expansionAnimationStyle is used to customize ExpansionTile expand/collapse animation.

bleroux

LGTM for the examples!

Spotted minor typos in the non-examples files.

bleroux · 2024-04-25T07:45:33Z

packages/flutter/lib/src/widgets/sliver_tree.dart

+      // unpack.
+      return true;
+    }
+    // If we are not animating, respect node.isExpanded;


Suggested change

// If we are not animating, respect node.isExpanded;

// If we are not animating, respect node.isExpanded.

bleroux · 2024-04-25T07:55:31Z

packages/flutter/lib/src/rendering/sliver_multi_box_adaptor.dart

+    _currentLayoutDimensions = SliverLayoutDimensions(
+        scrollOffset: constraints.scrollOffset,
+        precedingScrollExtent: constraints.precedingScrollExtent,
+        viewportMainAxisExtent: constraints.viewportMainAxisExtent,
+        crossAxisExtent: constraints.crossAxisExtent
+    );


indentation + missing comma at the end

bleroux · 2024-04-25T08:44:57Z

packages/flutter/lib/src/widgets/sliver_tree.dart

+///
+/// It can be useful to expand or collapse nodes of the tree
+/// programmatically, for example to reconfigure an existing node
+/// based on a system event. To do so, create an [SliverTreeList]


an -> a (same on lines 158, 178, 231, 266 and 293)

TahaTesser · 2024-04-25T08:46:26Z

examples/api/lib/widgets/sliver/sliver_tree.0.dart

+          SliverTreeList<String>(
+            tree: _tree,
+            controller: controller,
+            treeNodeBuilder: (


Is there a way to customize the padding between the nodes and the labels?
It looks like gap between the nodes and labels is bit too high when you see something like GitHub or VS Code tree list.

Preview 1 Preview 2 Preview 3

TahaTesser · 2024-04-25T08:46:38Z

examples/api/lib/widgets/sliver/sliver_tree.0.dart

+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('SliverTree demo'),


Suggested change

title: const Text('SliverTree demo'),

title: const Text('SliverTree Demo'),

TahaTesser · 2024-04-25T09:02:19Z

examples/api/lib/widgets/sliver/sliver_tree.1.dart

+              ? Icons.file_open_outlined
+              : Icons.folder_outlined,
+        ),
+        const SizedBox(height: 25.0),


Suggested change

const SizedBox(height: 25.0),

const SizedBox(height: 16.0),

Reduced the padding between selection icon and label.

TahaTesser · 2024-04-25T09:03:59Z

examples/api/test/widgets/sliver/sliver_tree.0_test.dart

+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('SliverTree example', (WidgetTester tester) async {


Suggested change

testWidgets('SliverTree example', (WidgetTester tester) async {

testWidgets('Can toggle nodes in SliverTree', (WidgetTester tester) async {

TahaTesser · 2024-04-25T09:04:23Z

examples/api/test/widgets/sliver/sliver_tree.1_test.dart

+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  testWidgets('SliverTree example', (WidgetTester tester) async {


Suggested change

testWidgets('SliverTree example', (WidgetTester tester) async {

testWidgets('Can toggle nodes in SliverTree', (WidgetTester tester) async {

TahaTesser · 2024-04-25T09:04:30Z

examples/api/test/widgets/sliver/sliver_tree.1_test.dart

+    );
+    expect(find.text('lib'), findsOneWidget);
+    expect(find.text('src'), findsNothing);
+    // Toggle tree node


Suggested change

// Toggle tree node

// Toggle tree node.

TahaTesser · 2024-04-25T09:04:38Z

examples/api/test/widgets/sliver/sliver_tree.0_test.dart

+    );
+    expect(find.text('Second'), findsOneWidget);
+    expect(find.text('alpha'), findsNothing);
+    // Toggle tree node


Suggested change

// Toggle tree node

// Toggle tree node.

Piinks added c: new feature Nothing broken; request for a new capability framework flutter/packages/flutter repository. See also f: labels. f: scrolling Viewports, list views, slivers, etc. labels Apr 22, 2024

github-actions bot added d: api docs Issues with https://api.flutter.dev/ d: examples Sample code and demos labels Apr 22, 2024

Piinks changed the title ~~Sliver tree 2~~ SliverTree Apr 22, 2024

Piinks force-pushed the sliverTree-2 branch from 86051c1 to 5defdf3 Compare April 22, 2024 17:29

github-actions bot added the f: material design flutter/packages/flutter/material repository. label Apr 22, 2024

Piinks mentioned this pull request Apr 22, 2024

[two_dimensional_scrollables] TreeView flutter/packages#6592

Open

11 tasks

navaronbracke reviewed Apr 22, 2024

View reviewed changes

packages/flutter/lib/src/widgets/sliver_tree.dart Outdated Show resolved Hide resolved

examples/api/lib/widgets/sliver/sliver_tree.0.dart Show resolved Hide resolved

Piinks commented Apr 22, 2024

View reviewed changes

packages/flutter/lib/src/material/sliver_tree.dart Outdated Show resolved Hide resolved

Piinks force-pushed the sliverTree-2 branch from 80f7f5e to 9a5c1f4 Compare April 23, 2024 16:25

github-actions bot removed the f: material design flutter/packages/flutter/material repository. label Apr 23, 2024

Piinks changed the title ~~SliverTree~~ SliverTreeList Apr 23, 2024

Piinks added 15 commits April 23, 2024 12:22

Copy over sans custom render object

0acdd91

Updates

0df4034

++

5a48c85

Switching branches

661ed35

Progress

e5dbc32

Stopping, stuck on clip issue

43e5d2f

Updates

543cbb7

Tweaks, going off to make premliminary changes

9c5d901

++

3a08db5

Tweaks

897c717

Nits

26b99dc

Tweaks to align better with 2D

700e7c6

Test progress

fbe3202

++

f751473

Progress

b26e6b2

Piinks added 11 commits April 23, 2024 12:22

More progress

4cc7785

More tests

83fb8f3

Nits

b3a6f32

Fix doc references

34d43a7

Move sliver_tree to material for stinkin icon

4075437

++

bbf7d1f

Imports

94da5ed

Move back to widgets, rename collisions

7e244c7

++

33adac4

doc nit

cda78c5

Doc references and analyzer

c35db71

Piinks force-pushed the sliverTree-2 branch from 9a5c1f4 to c35db71 Compare April 23, 2024 17:22

Piinks added 3 commits April 23, 2024 14:59

Fix precision error in test

95b988c

Fix precision error in test - more

a389767

Self review

c72ac53

Piinks marked this pull request as ready for review April 24, 2024 22:36

Piinks requested review from bleroux, goderbauer, HansMuller, QuncCccccc and TahaTesser April 24, 2024 22:37

Piinks commented Apr 24, 2024

View reviewed changes

Tweak node.isExpanded for toggle animation

2a74d0f

TahaTesser requested changes Apr 25, 2024

View reviewed changes

bleroux approved these changes Apr 25, 2024

View reviewed changes

bleroux reviewed Apr 25, 2024

View reviewed changes

TahaTesser reviewed Apr 25, 2024

View reviewed changes

TahaTesser requested changes Apr 25, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SliverTreeList #147171

SliverTreeList #147171

Piinks commented Apr 22, 2024 •

edited

Piinks commented Apr 22, 2024

Piinks Apr 24, 2024

TahaTesser Apr 25, 2024 •

edited

bleroux left a comment

bleroux Apr 25, 2024

bleroux Apr 25, 2024

bleroux Apr 25, 2024

TahaTesser Apr 25, 2024 •

edited

TahaTesser Apr 25, 2024

TahaTesser Apr 25, 2024

TahaTesser Apr 25, 2024

TahaTesser Apr 25, 2024

TahaTesser Apr 25, 2024

TahaTesser Apr 25, 2024

	// If we are not animating, respect node.isExpanded;
	// If we are not animating, respect node.isExpanded.

	title: const Text('SliverTree demo'),
	title: const Text('SliverTree Demo'),

	testWidgets('SliverTree example', (WidgetTester tester) async {
	testWidgets('Can toggle nodes in SliverTree', (WidgetTester tester) async {

SliverTreeList #147171

Are you sure you want to change the base?

SliverTreeList #147171

Conversation

Piinks commented Apr 22, 2024 • edited

Pre-launch Checklist

Piinks commented Apr 22, 2024

Choose a reason for hiding this comment

TahaTesser Apr 25, 2024 • edited

Choose a reason for hiding this comment

bleroux left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TahaTesser Apr 25, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Piinks commented Apr 22, 2024 •

edited

TahaTesser Apr 25, 2024 •

edited

TahaTesser Apr 25, 2024 •

edited