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

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(),
    ),
  ],
)

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);

Open a page

MDController.of(context, listen: false)
            .selectPage(
              'page id',
              builder: (context) => DetailsPageScaffold(),
            );

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,
),

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;

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.