Add TwoPane widget by andreidiaconu · Pull Request #92910 · flutter/flutter

andreidiaconu · 2021-11-02T12:24:36Z

This PR adds the TwoPane widget which helps with creating layouts on foldable and large screen devices. The goal is to provide an easy way to write two-pane layouts that show less or more content according to available space, while at the same time reacting to existing display features on the device.

Here is an image of what the simplest usage of the widget will produce on 3 different platforms and available screen space:

This is split from a larger PR for foldable support in order to make it easier to review (#77156).

Issues that will be fixed by this PR:

[android] support android 12L #49411

Depends on:

Foldable MediaQuery support Add display features to MediaQuery #92906
Engine support: Reland Display Features support (Foldable and Cutout) engine#29447
Framework integration of the engine support: Reland engine display features #89511

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.
All existing and new tests are passing.

Piinks · 2021-11-30T21:33:13Z

cc @HansMuller, I mentioned this in a meeting today

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

PieterAelse · 2022-02-11T19:44:56Z

@andreidiaconu I've watched your talk at Flutter Vikings, which was very informative and well presented!, and tried out TwoPane today. Was a bit surprised by the easiness (simple but flexible API) and results/benefit one would get from it. So I have to say; nice work and thanks! 😄

skia-gold · 2022-02-17T19:28:05Z

Gold has detected about 38 new digest(s) on patchset 15.
View them at https://flutter-gold.skia.org/cl/github/92910

andreidiaconu · 2022-02-17T20:08:12Z

@Piinks This is also ready for review now. Thank you

andreidiaconu · 2022-02-17T20:08:31Z

@PieterAelse Thank you for having a look at this. I refactored most of what you saw last time as I was not happy with a number of things. Thank you

Piinks

I am wondering if this may be better served as a package on pub.dev, WDYT @andreidiaconu?

Piinks · 2022-02-17T21:43:53Z

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

+import 'framework.dart';
+import 'media_query.dart';
+
+/// A widget that positions two panes side by side on uninterrupted screens or


This does not appear true based on the mobile phone image in OP.

Piinks · 2022-02-17T21:48:27Z

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

+///   * it obstructs the screen, meaning the area it occupies is not 0. Display
+///     features of type [DisplayFeatureType.fold] can have height 0 or width 0
+///     and not be obstructing the screen.


Does this mean the TwoPane will not work with devices that fold without a hinge?

It means it works, but the separation between the two panes does not need to coincide with the folding feature since the screen is continuous.

Piinks · 2022-02-17T21:50:06Z

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

+/// On screens that have multiple separating [DisplayFeature]s, [textDirection]
+/// and [verticalDirection] parameters are used to decide which one is first and
+/// is used as a separator between the two panes. If both horizontal and
+/// vertical [DisplayFeature]s exist, the [direction] parameter is used to
+/// ignore the [DisplayFeature]s that would conflict with it.
+///
+/// This widget is similar to [Flex] and also takes [textDirection] and
+/// [verticalDirection] parameters, which are used for deciding in what order
+/// the panes are laid out (e.g [TextDirection.ltr] would position [startPane]
+/// on the left and [endPane] on the right).


These two paragraphs seem redundant

Piinks · 2022-02-17T21:51:45Z

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

+  /// If [panePriority] is [TwoPanePriority.start], this is the only pane
+  /// visible.


Why? What happens to the second pane then?

If TwoPanePriority is start or end, then only one pane is part of the tree. In this case endPane is not part of the tree.

Piinks · 2022-02-17T21:52:00Z

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

+  /// If [panePriority] is [TwoPanePriority.end], this is the only pane
+  /// visible.


Same question, but reversed for pane. :)

Piinks · 2022-02-17T21:53:30Z

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

+  /// [DisplayFeature], in which case each pane takes over one sub-screen.
+  final double paneProportion;
+
+  /// Same as [Flex.textDirection].


You could template some docs from Flex for these following parameters and use a macro. Just saying they are the same isn't super helpful if folks don't know what they are.

Piinks · 2022-02-17T21:55:11Z

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

+  /// measures the distance between TwoPane and the ambient MediaQuery.
+  ///
+  /// Defaults to [EdgeInsets.zero].
+  final EdgeInsets inset;


This should probably be padding to remain consistent with the framework

Ok, it was padding but at the last minute I found it confusing and renamed it. Will change back 👍

Piinks · 2022-02-17T21:57:14Z

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

+  /// Returns only the display features that separate the screen into
+  /// sub-screens.
+  ///
+  /// A [DisplayFeature] separates the screen into sub-screens when both these


This seems to leave out foldable devices with a continuous screen, but I may be misunderstanding

If the screen is continuous the two panes don't need to split on the folding feature, so they are free to take the proportions provided to the widget, the same way they would on a tablet or larger screen.

andreidiaconu · 2022-02-18T14:37:32Z

I am wondering if this may be better served as a package on pub.dev, WDYT @andreidiaconu?

Our hope was to have everything related to foldable support in the framework in order to make it a seamless dev experience - but TwoPane is not used in any other part of the framework, so I understand the advantages of moving it to a separate package.

goderbauer · 2022-02-23T23:33:44Z

I agree with @Piinks that this widget would be better suited in a separate package.

andreidiaconu · 2022-03-01T13:50:48Z

Ok, closing this and moving the widget to a separate package.

flutter-dashboard bot added a: tests "flutter test", flutter_test, or one of our tests framework flutter/packages/flutter repository. See also f: labels. labels Nov 2, 2021

google-cla bot added the cla: yes label Nov 2, 2021

This was referenced Nov 2, 2021

Add display features to MediaQuery #92906

Merged

Foldable support & TwoPane Widget #77156

Closed

HansMuller requested a review from goderbauer November 6, 2021 00:03

Piinks self-requested a review November 11, 2021 21:59

Piinks added c: new feature Nothing broken; request for a new capability a: layout SystemChrome and Framework's Layout Issues labels Nov 11, 2021

PieterAelse reviewed Feb 11, 2022

View reviewed changes

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

PieterAelse reviewed Feb 11, 2022

View reviewed changes

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

PieterAelse reviewed Feb 11, 2022

View reviewed changes

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

PieterAelse reviewed Feb 11, 2022

View reviewed changes

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

andreidiaconu force-pushed the foldable_support_twopane branch from 30c70f5 to 4acaa23 Compare February 17, 2022 19:21

andreidiaconu added 4 commits February 17, 2022 21:29

Add TwoPane widget

b90443d

Remove padding and refactor documentation for TwoPane

e27538a

Refactor TwoPane to take startPane, endPane and inset parameters

e149e1e

Remove imports

b738bd3

andreidiaconu force-pushed the foldable_support_twopane branch from 4acaa23 to b738bd3 Compare February 17, 2022 19:30

andreidiaconu marked this pull request as ready for review February 17, 2022 20:06

Piinks reviewed Feb 17, 2022

View reviewed changes

andreidiaconu closed this Mar 1, 2022

andreidiaconu mentioned this pull request Mar 14, 2022

Move Two pane widget from framework microsoft/flutter-dualscreen#2

Merged

		/// If [panePriority] is [TwoPanePriority.start], this is the only pane
		/// visible.

Conversation

andreidiaconu commented Nov 2, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

Piinks commented Nov 30, 2021

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

PieterAelse commented Feb 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

skia-gold commented Feb 17, 2022

Uh oh!

andreidiaconu commented Feb 17, 2022

Uh oh!

andreidiaconu commented Feb 17, 2022

Uh oh!

Piinks left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andreidiaconu commented Feb 18, 2022

Uh oh!

goderbauer commented Feb 23, 2022

Uh oh!

andreidiaconu commented Mar 1, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

andreidiaconu commented Nov 2, 2021 •

edited

Loading

PieterAelse commented Feb 11, 2022 •

edited

Loading