master_detail_flow

Description:

master detail flow

master_detail_flow #






master_detail_flow is a Flutter package designed to help you easily create sleek, responsive master-detail flows. Whether on mobile or larger screens, this package adapts to display a list of items with detailed views in a fast and user-friendly manner.

Installation #
To use this package, add master_detail_flow as a dependency using:
flutter pub add master_detail_flow
copied to clipboard
Getting started #
The MDScaffold widget is your entry point to building master-detail flows with this package. It provides a simple and efficient way to set up a flow with just a few lines of code.
Usage #
Here’s a basic example of how to use MDScaffold:
MDScaffold(
title: const Text('Simple flow'),
items: [
DrawerHeader(
child: Center(
child: Text('A flow'),
),
),
MDItem(
title: const Text('Master item 1'),
pageBuilder: (_) => const HomePageOne(),
),
MDItem(
title: const Text('Master item 2'),
pageBuilder: (_) => const HomePageTwo(),
),
// This padding aligns the divider with the edges of the tiles
const MDPadding(child: Divider()),
MDItem(
title: const Text('Master item 3'),
pageBuilder: (_) => const HomePageThree(),
),
],
)
copied to clipboard
Creating custom flow parts #
The logic is divided among MDScaffold, MDController, MDFlowView, and DetailsPanelProvider. The default MDScaffold uses a MDFlowView wrapped in a MDController to manage the display of the master and detail panels.. For more information about every piece and how you can rewrite them read the documentation.
Key components #

MDScaffold: Handles layout.
MDController: Manages state.
MDFlowView: Displays master-detail panels.
DetailsPanelProvider: Supplies detail pages with information like background color and view mode.

Using MDController & DetailsPanelProvider #
To create a custom item for the master list that can react to information like the view mode, or to open pages, the widget needs to interact with the MDController.
Get the view mode #
MDController.viewModeOf(context);
copied to clipboard
Open a page #
MDController.of(context, listen: false)
.selectPage(
'page id',
builder: (context) => DetailsPageScaffold(),
);
copied to clipboard
Page id #
The page id is stored in the controller, and can be used to show a widget as being selected.
Widget(
selected: controller.selectedPageId == ownId,
),
copied to clipboard
For more code examples explore the example app or the code for MDItem and MDPadding.
Details pages #
If DetailsPageScaffold and DetailsPageSliverList don't fit your needs, you can use DetailsPanelProvider to make sure your custom layout has access to the info it needs.
A custom details page needs to adapt to the ViewMode. In ViewMode.lateral AppBars should have autoImplyLeading and primary set to false so they don't pop the MDScaffold nor try to use safe area.
final panel = DetailsPanelProvider.of(context);
final isPageMode = panel.viewMode == MDViewMode.page;
final backgroudColor = backgroundColor ?? panel.backgroundColor;
copied to clipboard
More #
In the example app you can find examples of how to:

Make a settings page
Load a MDScaffold inside a Future
Create a custom item for the master list
Customize the MDScaffold
Push routes from the details page

For further details, visit the documentation.




License #
This project is licensed under the MIT License. See the LICENSE file for more details.