One context.duo that knows if the phone is folded, open, sideways or sharing the screen.
Widgets that lay out, navigate and keep state the way iOS 27 does on Apple's first foldable.
Pure Dart. Works today on iOS, Android, web and desktop, in English, Arabic and every other language.

English #

See it in action #

Every clip below is the real example app running this package, rendered frame by frame. Nothing is mocked up.

1. Fold and unfold #

What happens: closed, the email fills the 466 pt outer screen. Open the phone and the list slides back in beside the same email, still scrolled where you left it.
Why: Apple treats continuity across a fold as a requirement. People fold in the middle of reading and expect to land exactly where they were. Nothing here rebuilds from scratch: the package moves the same widget element to its new place.
Code: DuoListDetail inside DuoNavigationScaffold, nothing else.

2. Split View #

What happens: a second app joins. Yours shrinks live from 951 to 475 pt. The moment it becomes a Split View slice, its rail jumps from the island side to its own outer edge, and the list collapses to one pane.
Why: that's where iOS 27 puts the bars of the left-hand app. Every intermediate width is laid out for real, so there's no snapping between a few hand-picked sizes.
Code: nothing extra. context.duo.isSplit tells you when it happens.

3. Half open: tabletop and book #

What happens: on a table, the video jumps above the fold and the controls drop to the bottom half. Held like a book, the controls slide to the trailing half.
Why: a bent screen has two surfaces. Content that straddles the crease is hard to read and hard to tap, and Apple's guidance says the same.
Code: DuoSplit for the two halves, DuoAvoidFold for floating controls, context.duo.posture to decide.

4. Rotation #

What happens: closed and turned sideways, the island moves to the top and the rail stays on the side. Open and turned upright, the rail becomes a bottom bar, the one pose where iOS keeps horizontal bars.
Why: the Duo's inner screen ignores orientation locks, so your layout has to follow the window, not the device orientation.
Code: DuoNavigationScaffold decides with context.duo.prefersRail.

5. Resizable windows #

What happens: a desktop window is dragged from 360 to 1240 pt. The mode, the number of panes and the navigation all update on every frame.
Why: the same rules that handle the Duo handle iPad Stage Manager, web browsers and desktop windows. One set of layout decisions covers every screen.
Code: the same app, with no platform checks.

6. English and Arabic #

What happens: the app switches to Arabic. The list moves to the right and the detail to the left, while the split stays exactly on the physical fold.
Why: reading direction decides where the primary pane goes; the hinge decides where the split goes. Mixing those two up would put content on the crease.
Code: automatic from your app's Directionality. Override with textDirection: and railSide:.

7. Media fit #

What happens: the same 16:9 video cycles through contain (bars), cover (cropped) and smart, which crops only when it loses less than 15%.
Why: the inner screen is √2 shaped, so 16:9 video leaves 134 pt of black bars. Sometimes a small crop is the better trade, and sometimes it isn't.
Code: DuoMedia(aspectRatio: 16 / 9, child: player).

iPhone Duo, every pose #

And every other screen #

On Android foldables the package reads the real fold from MediaQuery.displayFeatures. Phones, tablets, web and desktop get the same widgets, driven by window size.

Install #

flutter pub add duo_dynamic_sizing

Needs Flutter 3.41+ (Dart 3.11+). There's no setup, no platform code and no permissions.

Minimal example #

A complete app in about 40 lines: a mail list that becomes list + detail when there's room, with the right navigation on every screen. It's example/lib/minimal.dart; run it with flutter run -t lib/minimal.dart.

import 'package:duo_dynamic_sizing/duo_dynamic_sizing.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Inbox()));

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

  @override
  State<Inbox> createState() => _InboxState();
}

class _InboxState extends State<Inbox> {
  int tab = 0;
  int? open;

  @override
  Widget build(BuildContext context) {
    return DuoNavigationScaffold(
      appBar: AppBar(title: Text(context.duo.mode.name)),
      selectedIndex: tab,
      onDestinationSelected: (i) => setState(() => tab = i),
      destinations: const [
        DuoDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
        DuoDestination(icon: Icon(Icons.star), label: 'Starred'),
      ],
      body: DuoListDetail<int>(
        selected: open,
        onClose: () => setState(() => open = null),
        empty: (_) => const Center(child: Text('Pick a message')),
        list: (_) => ListView.builder(
          itemCount: 30,
          itemBuilder: (_, i) => ListTile(
            title: Text('Message $i'),
            selected: i == open,
            onTap: () => setState(() => open = i),
          ),
        ),
        detail: (_, i) => Center(child: Text('Message $i')),
      ),
    );
  }
}

The same code gives you all of this:

Reading the window yourself works anywhere:

final duo = context.duo; // rebuilds on fold, rotation and Split View

if (duo.isExpanded) { /* two panes */ }
duo.mode;             // DuoMode.openLandscape
duo.safe.right;       // 59, the Dynamic Island side
duo.gridColumns(160); // even across the fold

Why it's built this way #

The short version is below. The full reasoning, with the alternatives we rejected, is in DESIGN.md (العربية).

• Sizes never scale. Both Duo screens have the same physical point size, about 153 points per inch. Width-scaled 16 pt text would jump to 33 pt when you unfold, so layouts gain panes, not bigger widgets.
• Everything comes from MediaQuery. That makes it reactive, testable and simulator-friendly, and it only rebuilds when the window really changes.
• Pure Dart. It works today on every Flutter version from 3.41 and every platform, with no Xcode 27.1 or pods required.
• The iPhone Duo is detected by its exact screen sizes at 3x on iOS, so iPads, Android phones and desktop windows are never mistaken for it.
• State survives every fold because the package moves widgets instead of rebuilding them.
• Tested hard: 97 unit, widget, edge-case and golden tests, plus 9 integration tests on the real macOS app.

What's inside #

context.duo #

Change the thresholds for a subtree with DuoScope(expandedWidth: 700, child: ...).

Widgets #

Two layouts, one state. DuoKeep moves the same element between layouts instead of rebuilding it:

DuoLayout(
  closed: (_) => DuoKeep(id: 'feed', child: const Feed()),
  open: (_) => Row(children: [
    Expanded(child: DuoKeep(id: 'feed', child: const Feed())),
    const Expanded(child: Trends()),
  ]),
)

Panes that follow the fold:

DuoSplit(primary: const Player(), secondary: const UpNext())

Controls that dodge the crease:

Stack(children: [
  const VideoPlayer(),
  const DuoAvoidFold(
    child: Align(alignment: Alignment.bottomCenter, child: Controls()),
  ),
])

Video that fits the screen:

DuoMedia(aspectRatio: 16 / 9, child: player) // smart: crops up to 15%, else letterboxes

RTL and LTR #

Everything follows your app's Directionality, so Arabic, Hebrew and Persian apps get mirrored layouts with no extra code. When panes swap sides, the split still lands exactly on the physical fold.

You choose where the navigation rail goes with railSide:

DuoNavigationScaffold(railSide: DuoRailSide.start, ...) // follow the reading direction everywhere
DuoListDetail(textDirection: TextDirection.ltr, ...)     // pin one layout, whatever the app uses

Test every pose without a device #

testWidgets('unfolding keeps the draft', (tester) async {
  await tester.pumpWidget(
    const DuoSimulator(pose: DuoPose.closedPortrait, child: MyApp()),
  );
  await tester.enterText(find.byType(TextField), 'draft');

  await tester.pumpWidget(
    const DuoSimulator(pose: DuoPose.openLandscape, child: MyApp()),
  );
  expect(find.text('draft'), findsOneWidget);
});

Built-in poses: closedPortrait, closedLandscape, openLandscape, openPortrait, splitLeft, splitRight, foldableBook, foldableTabletop, iPhone, iPad. You can also build your own with DuoPose(...).

To see the live values while you develop:

MaterialApp(
  builder: (context, child) =>
      DuoDebugOverlay(enabled: kDebugMode, child: child!),
)

Shipping on the iPhone Duo #

• Build with the iOS 27.1 SDK (Xcode 27.1). Apps built with older SDKs run letterboxed on the inner screen.
• Adopt the UIScene lifecycle. Xcode 27 builds crash at launch without it. Flutter 3.41+ migrates an unmodified AppDelegate for you; see Flutter's UIScene guide.
• Don't count on orientation locks. The inner screen ignores SystemChrome.setPreferredOrientations.
• Never cache sizes in State. Read MediaQuery or context.duo in build.
• Treat left and right insets separately. The Dynamic Island runs down one side.
• Pause media on paused, not inactive. In Split View your app stays visible while inactive.
• Keep taps off the fold when half open. Use DuoAvoidFold and DuoSplit.

The iPhone Duo at a glance #

Apple announced it on 9 September 2026, and it ships on 23 October 2026 with iOS 27.1. It measures 164.6 × 117.8 mm open, 84.1 × 117.8 mm closed, and weighs 254 g.

Limitations #

• No hinge angle or half-open posture on iOS yet. Flutter's iOS engine doesn't forward the iPhone Duo hinge to Dart (flutter#192515). Until it does, posture on the Duo is closed or unknown, and the fold is the known physical centre line. When the engine starts reporting it, this package picks it up automatically through displayFeatures. For live hinge angles today, pair it with a native plugin such as foldable.
• Simulator safe areas are estimates. Apple hasn't published the Duo's inset values, so DuoPose uses 59 pt and 21 pt. Real devices always use the live values.
• The Split View side is inferred from which side has the Dynamic Island inset.
• Native vertical bars have no Flutter equivalent. DuoNavigationScaffold mirrors their placement with Material widgets.

Example #

cd example
flutter run                    # the full showcase with a pose picker
flutter run -t lib/minimal.dart # the 40-line app above

In the showcase, pick any pose from the chip bar to simulate it on whatever device you're using, turn on RTL for the Arabic version, or choose This device to run it for real.

Contributing #

Bug reports and pull requests are welcome in the issue tracker. If something looks off on a real iPhone Duo, a screenshot with DuoDebugOverlay turned on helps a lot.

↑ Back to top  ·  اقرأ بالعربية

flutter pub add duo_dynamic_sizing

import 'package:duo_dynamic_sizing/duo_dynamic_sizing.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: Inbox()));

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

  @override
  State<Inbox> createState() => _InboxState();
}

class _InboxState extends State<Inbox> {
  int tab = 0;
  int? open;

  @override
  Widget build(BuildContext context) {
    return DuoNavigationScaffold(
      appBar: AppBar(title: Text(context.duo.mode.name)),
      selectedIndex: tab,
      onDestinationSelected: (i) => setState(() => tab = i),
      destinations: const [
        DuoDestination(icon: Icon(Icons.inbox), label: 'Inbox'),
        DuoDestination(icon: Icon(Icons.star), label: 'Starred'),
      ],
      body: DuoListDetail<int>(
        selected: open,
        onClose: () => setState(() => open = null),
        empty: (_) => const Center(child: Text('Pick a message')),
        list: (_) => ListView.builder(
          itemCount: 30,
          itemBuilder: (_, i) => ListTile(
            title: Text('Message $i'),
            selected: i == open,
            onTap: () => setState(() => open = i),
          ),
        ),
        detail: (_, i) => Center(child: Text('Message $i')),
      ),
    );
  }
}

final duo = context.duo; // يُعاد البناء عند الطي والتدوير والعرض المقسّم

if (duo.isExpanded) { /* لوحتان */ }
duo.mode;             // DuoMode.openLandscape
duo.safe.right;       // 59، جهة الجزيرة الديناميكية
duo.gridColumns(160); // عدد زوجي من الأعمدة حول خط الطي

DuoLayout(
  closed: (_) => DuoKeep(id: 'feed', child: const Feed()),
  open: (_) => Row(children: [
    Expanded(child: DuoKeep(id: 'feed', child: const Feed())),
    const Expanded(child: Trends()),
  ]),
)

DuoSplit(primary: const Player(), secondary: const UpNext())

Stack(children: [
  const VideoPlayer(),
  const DuoAvoidFold(
    child: Align(alignment: Alignment.bottomCenter, child: Controls()),
  ),
])

DuoMedia(aspectRatio: 16 / 9, child: player) // smart: يقص حتى 15% وإلا أضاف أشرطة

DuoNavigationScaffold(railSide: DuoRailSide.start, ...) // اتبع اتجاه القراءة في كل مكان
DuoListDetail(textDirection: TextDirection.ltr, ...)     // ثبّت تخطيطاً واحداً مهما كانت لغة التطبيق

testWidgets('unfolding keeps the draft', (tester) async {
  await tester.pumpWidget(
    const DuoSimulator(pose: DuoPose.closedPortrait, child: MyApp()),
  );
  await tester.enterText(find.byType(TextField), 'draft');

  await tester.pumpWidget(
    const DuoSimulator(pose: DuoPose.openLandscape, child: MyApp()),
  );
  expect(find.text('draft'), findsOneWidget);
});

MaterialApp(
  builder: (context, child) =>
      DuoDebugOverlay(enabled: kDebugMode, child: child!),
)

cd example
flutter run                    # العرض الكامل مع أداة اختيار الوضعيات
flutter run -t lib/minimal.dart # التطبيق ذو الأربعين سطراً أعلاه

↑ العودة إلى الأعلى  ·  Read in English

_{MIT © Mohammad Othman
iPhone and iPhone Duo are trademarks of Apple Inc. This package isn't affiliated with or endorsed by Apple.}