prism_master_detail 0.1.0

Adaptive master-detail layouts for Flutter — side-by-side panes on tablets/desktop, stacked navigation on phones, from one widget. Companion to prism_adaptive_scaffold. Pure Flutter, all six platforms.

example/lib/main.dart

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

void main() {
  runApp(const DemoApp());
}

class Mail {
  const Mail(this.subject, this.preview, this.icon);
  final String subject;
  final String preview;
  final IconData icon;
}

const _mails = [
  Mail(
    'Welcome to Prism',
    'The adaptive layout family for Flutter…',
    Icons.mail_outline,
  ),
  Mail(
    'pub.dev score 160',
    'Your package scored 160 points…',
    Icons.star_outline,
  ),
  Mail(
    'Roadmap 0.2',
    'Planned: keyboard navigation, pane resizing…',
    Icons.send_outlined,
  ),
];

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'prism_master_detail demo',
      theme: ThemeData.light(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: const DemoPage(),
    );
  }
}

class DemoPage extends StatelessWidget {
  const DemoPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('prism_master_detail demo')),
      body: PrismMasterDetail<Mail>(
        items: _mails,
        masterPaneWidth: 300,
        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) => Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                mail.subject,
                style: Theme.of(context).textTheme.headlineSmall,
              ),
              const SizedBox(height: 12),
              Text(mail.preview),
            ],
          ),
        ),
        empty: (context) => const Center(child: Text('Pick a message')),
      ),
    );
  }
}