master_detail_scaffold

master_detail_scaffold

A Flutter package that contains widgets that help implement a responsive master-detail layout. The widget is based on the material design scaffold and was based on exploring responsive layouts as covered in this article. As such, it may not suitable for all scenarios (e.g. nested/multiple master-detail layouts) as it has been shared in case there are other members of the community who may find it useful. Go here to see the example running on the web.

NOTE: this uses the imperative Navigator (1.0) APIs. There are currently no plans to migrate this to Navigator 2.0 so those that need Navigator 2.0 should look at forking this project

Getting started

The package exposes a MasterDetailScaffold widget that is built based on Flutter's Scaffold widget. Therefore, you can expect the majority of the properties you're familiar to exist and can be use it in a similar way you would normally do with a Scaffold widget. Create a class and use the MasterDetailScaffold widget within your build method

MasterDetailScaffold(
    onDetailsPaneRouteChanged:
        (String route, Map<String, String> parameters) {
    setState(() {
        if (route == RouteNames.itemDetails) {
        _selectedItem = content.items.firstWhere(
            (item) => item.id == parameters['id'],
            orElse: null);
        return;
        }
        _selectedItem = null;
    });
    },
    twoPanesWidthBreakpoint: 600,
    initialRoute: RouteNames.home,
    detailsRoute: RouteNames.itemDetails,
    initialAppBar: AppBar(
    title: Text('Master-detail Flow Demo'),
    ),
    masterPaneWidth: 400,
    masterPaneBuilder: (BuildContext context) => ItemsList(
    selectedItem: _selectedItem,
    ),
    detailsPaneBuilder: (BuildContext context) =>
        ItemDetails(item: _selectedItem),
    detailsAppBar: AppBar(
    // the [Builder] widget is needed to ensure that the widget for displaying the title gets rebuilt based on the selected item.
    // Without the [Builder] widget, the title is set to the value that was originally passed through
    title: Builder(
        builder: (context) => Text(_selectedItem.title),
    ),
    ),
    floatingActionButton: Visibility(
    visible: _selectedItem != null,
    child: Builder(
        builder: (context) => FloatingActionButton(
        child: Icon(Icons.reply),
        onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(
                content: Text('Replying to ${_selectedItem.title}'),
            ),
            );
        },
        ),
    ),
    ),
);

The key parts are

• twoPanesWidthBreakpoint: the width breakpoint for showing both the master and details pane together. The back button is hidden whe both panes are visible
• initialRoute: the name of the route use when no details are shown in the details pane
• detailsRoute: the name of the route to use when details are shown in the details pane
• masterPaneWidth: the width of the master pane. Applicable when both the master and details pane are shown
• masterPaneBuilder: determines what to show in the master pane. This is typically a list of items and is left to developers to implement what they should render here
• detailsPaneBuilder: determines what to show in the details pane. When both the master and details pane are shown, it is assumed to take the remaining of width of the screen
• onDetailsPaneRouteChanged: the callback trigger when the route in the details pane changes. Use this to find out get the route/path and query string parameters so you can display the appropriate content

To trigger navigation in the details pane, you can retrieve the navigator associated with the details pane by calling MasterDetailScaffold.of(context).detailsPaneNavigator. Normally, this wouldn't be needed and you would only need to call Navigator.of(context) but this doesn't appear to get the navigator associated with the details pane. URI-based navigation is expected via named routes. By default the page transition applied is the same as the MaterialPageRoute, though when both panes are shown no animation is used when the details change. Should you want to use a different transition style, this can be specified using the pageRouteBuilder property.

Note that I've found that entering a URL that should go to a specific details page doesn't work. This is likely due to the fact that Flutter's web support for web development isn't stable yet. Should you find a solution for this, please submit a pull request.

Should you want to see this running, a complete example can be found in the GitHub repository.