127 lines
4.9 KiB
Markdown
127 lines
4.9 KiB
Markdown
---
|
||
name: flutter-master-detail-view
|
||
description: Learn how to implement a responsive Master-Detail interface in Flutter that adapts to different screen sizes, leveraging multi-column layouts on larger screens and pushing to detail screens on mobile.
|
||
metadata:
|
||
url: https://rodydavis.com/posts/snippets/flutter-master-detail-view
|
||
last_modified: Tue, 03 Feb 2026 20:04:30 GMT
|
||
---
|
||
|
||
# Flutter Master-detail view
|
||
|
||
|
||
When building mobile, desktop and web applications with Flutter often times you are faced with what to do with lists and the content when selected. Depending on the data you may have a list that renders another list before resolving to a detail view. On tablet or desktop this can be achieved with multi-column layouts.
|
||
|
||
> On mobile you will still need to push to the details screen since the space is constrained.
|
||
|
||
How to build a [Master-detail](https://en.wikipedia.org/wiki/Master%E2%80%93detail_interface) view with Flutter:
|
||
|
||
```
|
||
import 'package:flutter/material.dart';
|
||
|
||
class MasterDetail<T> extends StatefulWidget {
|
||
const MasterDetail({
|
||
Key? key,
|
||
required this.listBuilder,
|
||
required this.detailBuilder,
|
||
required this.onPush,
|
||
this.emptyBuilder,
|
||
}) : super(key: key);
|
||
|
||
final Widget Function(BuildContext, ValueChanged<T?>, T?) listBuilder;
|
||
final Widget Function(BuildContext, T, bool) detailBuilder;
|
||
final void Function(BuildContext, T) onPush;
|
||
final WidgetBuilder? emptyBuilder;
|
||
|
||
@override
|
||
State<MasterDetail<T>> createState() => _MasterDetailState<T>();
|
||
}
|
||
|
||
class _MasterDetailState<T> extends State<MasterDetail<T>> {
|
||
final selected = ValueNotifier<T?>(null);
|
||
double? detailsWidth;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
primary: false,
|
||
body: LayoutBuilder(
|
||
builder: (context, dimens) {
|
||
const double minWidth = 350;
|
||
final maxWidth = dimens.maxWidth - minWidth;
|
||
if (detailsWidth != null) {
|
||
if (detailsWidth! > maxWidth) {
|
||
detailsWidth = maxWidth;
|
||
}
|
||
if (detailsWidth! < minWidth) {
|
||
detailsWidth = minWidth;
|
||
}
|
||
}
|
||
return ValueListenableBuilder<T?>(
|
||
valueListenable: selected,
|
||
builder: (context, item, child) {
|
||
final canShowDetails = dimens.maxWidth > 800;
|
||
final showDetails = item != null && canShowDetails;
|
||
return Row(
|
||
children: [
|
||
Expanded(
|
||
child: widget.listBuilder(context, (item) {
|
||
if (canShowDetails) {
|
||
selected.value = item;
|
||
} else {
|
||
selected.value = null;
|
||
if (item != null) widget.onPush(context, item);
|
||
}
|
||
}, selected.value),
|
||
),
|
||
if (canShowDetails)
|
||
MouseRegion(
|
||
cursor: SystemMouseCursors.resizeLeftRight,
|
||
child: GestureDetector(
|
||
behavior: HitTestBehavior.opaque,
|
||
onHorizontalDragUpdate: (details) {
|
||
if (mounted) {
|
||
setState(() {
|
||
double w = detailsWidth ?? maxWidth;
|
||
w -= details.delta.dx;
|
||
// Check for min width
|
||
if (w < minWidth) {
|
||
w = minWidth;
|
||
}
|
||
// Check for max width
|
||
if (w > maxWidth) {
|
||
w = maxWidth;
|
||
}
|
||
detailsWidth = w;
|
||
});
|
||
}
|
||
},
|
||
child: const SizedBox(
|
||
width: 5,
|
||
height: double.infinity,
|
||
child: VerticalDivider(),
|
||
),
|
||
),
|
||
),
|
||
if (canShowDetails)
|
||
SizedBox(
|
||
width: detailsWidth ?? maxWidth,
|
||
height: double.infinity,
|
||
child: showDetails
|
||
? widget.detailBuilder(context, item, false)
|
||
: widget.emptyBuilder?.call(context) ??
|
||
const Center(
|
||
child: Text('Select a item to view details'),
|
||
),
|
||
),
|
||
],
|
||
);
|
||
},
|
||
);
|
||
},
|
||
),
|
||
);
|
||
}
|
||
}
|
||
```
|
||
|
||
This widget will size itself after layout and try to size the list as small as possible with the details filling up the rest. This is important for later when we nest multiple of these to create progressively adapting layouts. |