Flutter TwoPane widget

Important

This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft makes no warranties, express or implied, with respect to the information provided here.

This layout has two child widgets, which can be shown side-by-side, above-and-below, or a single widget can be prioritized. The relative size of the two widgets can be adjusted proportionally; and on dual-screen devices the boundary snaps to the hinge area.

Tip

The TwoPane PR is not yet merged. Review the TwoPane widget PR on GitHub to provide feedback. If you want to use it now, we provide simple steps to try it out.

Dual-screen rendering

When the app is spanned on Surface Duo, each widget fills an entire screen:

Flutter TwoPaneView on Surface Duo

Cross-platform rendering

When the app renders on larger screens like a tablet, desktop app, or web page, the widgets are shown but their sizing is set proportionally:

Flutter TwoPaneView on desktop

TwoPane API

class TwoPane extends StatelessWidget {
  Widget pane1;
  Widget pane2;
  double paneProportion;
  TwoPanePriority panePriority;
  Axis direction;
  TextDirection? textDirection;
  VerticalDirection verticalDirection;
}

Properties of TwoPane:

  • pane1 - First pane, which can sit on the left for left-to-right layouts, or at the top for top-to-bottom layouts. If panePriority is pane1, this is the only pane visible.
  • pane2 - Second pane, which can sit on the right for left-to-right layouts, or at the bottom for top-to-bottom layouts. If panePriority is pane2, this is the only pane visible.
  • paneProportion - Proportion of the screen occupied by the first pane. The second pane takes over the rest of the space. A value of 0.5 will make the two panes equal. This property is ignored for displays with a hinge, in which case each pane takes over one screen.
  • panePriority - Whether to show only one pane and which one, or both. This is useful for defining behavior on narrow devices, where the two panes cannot be shown at the same time. This property is ignored for displays with a hinge, in which case both panes are visible.
  • direction - Tells us layout is vertical or horizontal, similar to Flex direction. This property is ignored for displays with a hinge, in which case the direction is horizontal for vertical hinges and vertical for horizontal hinges.
  • textDirection - When panes are laid out horizontally, this determines which one goes on the left. Behaves the same as Flex textDirection
  • verticalDirection - When panes are laid out vertically, this determines which one goes at the top. Behaves the same as Flex verticalDirection

Example

Widget build(BuildContext context) {
  return TwoPane(
    pane1: _widgetA(),
    pane2: _widgetB(),
    paneProportion: 0.3,
    panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both :TwoPanePriority.pane1,
  );
}

This sample code produces the results at the beginning of this article:

  • On Surface Duo, widget A and widget B both take one screen. Flutter TwoPaneView on Surface Duo
  • On a tablet or desktop, widget A takes 30% of the screen while widget B takes the remaining 70%. Flutter TwoPaneView on desktop
  • On a small phone which is less than 500 logical pixels wide, only widget A is visible. Flutter TwoPaneView on a phone