prism_master_detail

Adaptive master-detail layouts for Flutter — side-by-side panes on tablets and desktops, stacked navigation on phones, from a single widget. The companion to prism_adaptive_scaffold. Pure Flutter — no platform channels, works on all six platforms.

Features

✅ Side-by-side master + detail panes on medium/expanded windows
✅ Detail pushed onto the navigation stack on compact windows (free back gesture/button via the Navigator), or swapped in place — your choice
✅ Keyboard navigation on desktop: arrow keys move the selection, Enter opens the detail (opt-in autoFocus)
✅ Uncontrolled (default) or controlled selection
✅ Animated detail-pane transitions
✅ Wider master pane on extra-large windows (1200px+) — opt-in
✅ Master/detail pane background colors, custom divider, custom empty state
✅ Shares Material 3 breakpoints with prism_adaptive_scaffold
✅ All six Flutter platforms: Android, iOS, macOS, Windows, Linux, Web

Installation

dependencies:
  prism_master_detail: ^0.1.0

Usage

PrismMasterDetail<Mail>(
  items: mails,
  masterBuilder: (context, mail, selected) => ListTile(
    selected: selected,
    leading: Icon(mail.icon),
    title: Text(mail.subject),
    subtitle: Text(mail.preview, maxLines: 1, overflow: TextOverflow.ellipsis),
  ),
  detailBuilder: (context, mail) => MailView(mail: mail),
  empty: (context) => const Center(child: Text('Pick a message')),
)

Resize the window (or run on desktop) and watch the layout adapt.

Controlled selection

PrismMasterDetail<Mail>(
  items: mails,
  selectedIndex: _index,
  onSelectionChanged: (i) => setState(() => _index = i ?? 0),
  // builders…
)

Embedded layouts: swap instead of push

By default the detail is pushed onto the Navigator on phones. If this widget lives inside your own navigation structure, swap it in place instead:

PrismMasterDetail<Mail>(
  items: mails,
  compactBehavior: PrismCompactBehavior.replace,
  // The built-in back button reports null through onSelectionChanged.
  onSelectionChanged: (i) => setState(() => _index = i ?? -1),
  // builders…
)

PrismMasterDetail<Mail>(
  items: mails,
  autoFocus: true, // grab keyboard focus so arrows work immediately
  // builders…
)

The Prism package family

Package	What it does
prism_markdown	Markdown widget with full CommonMark + GFM support
prism_code_view	Syntax-highlighted code viewer (Dart/JSON/YAML built in)
prism_adaptive_scaffold	Responsive scaffolds: bottom bar → rail → extended rail
prism_adaptive_dialog	Dialogs that become bottom sheets on phones
prism_state_views	Empty, loading, error, and success states from one widget
prism_master_detail	Adaptive master-detail layouts

All pure Flutter, all six platforms, MIT licensed, built to work together.

License

MIT — see LICENSE.