master_detail_scaffold 1.1.1+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 88

master_detail_scaffold #

pub package Build Status

A Flutter package that contains widgets that help implement a responsive master-detail layout. The widget is based on the material design scaffold. Go here to see the example running on the web

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: () {
            Scaffold.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.

[1.1.1+2] #

  • Minor updates to example app

[1.1.1+1] #

  • Add link to example running on the web
  • Mention behaviour of back button in readme when both panes are visible

[1.1.1] #

  • Fix example to use relative imports

[1.1.0] #

  • BREAKING CHANGE remove default value for twoPanesWidthBreakpoint property
  • Add description about twoPanesWidthBreakpoint to readme

[1.0.0] #

  • Initial release

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:master_detail_scaffold/master_detail_scaffold.dart';
import 'package:provider/provider.dart';
import 'constants/route_names.dart';
import 'models/dummy_item.dart';
import 'widgets/item_details.dart';
import 'widgets/items_list.dart';
import 'models/dummy_content.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  DummyItem _selectedItem;

  @override
  Widget build(BuildContext context) {
    return Provider<DummyContent>(
      create: (_) => DummyContent(),
      child: MaterialApp(
        title: 'Master-detail Flow Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Consumer<DummyContent>(
          builder: (_, content, __) {
            return 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) => _selectedItem == null
                      ? SizedBox(
                          height: 0,
                          width: 0,
                        )
                      : Text(_selectedItem.title),
                ),
              ),
              floatingActionButton: Visibility(
                visible: _selectedItem != null,
                child: Builder(
                  builder: (context) => FloatingActionButton(
                    child: Icon(Icons.reply),
                    onPressed: () {
                      Scaffold.of(context).showSnackBar(
                        SnackBar(
                          content: Text('Replying to ${_selectedItem.title}'),
                        ),
                      );
                    },
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  master_detail_scaffold: ^1.1.1+2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:master_detail_scaffold/master_detail_scaffold.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
75
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
88
Learn more about scoring.

We analyzed this package on Apr 7, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test