backdrop #

Backdrop implementation in flutter.

This widget is in active development. Wait for the stable v1.0. Any contribution, idea, criticism or feedback is welcomed.

Quick links #


package	https://pub.dev/packages/backdrop
Git Repo	https://github.com/fluttercommunity/backdrop
Issue Tracker	https://github.com/fluttercommunity/backdrop/issues
Chat Room	https://gitter.im/flutter-backdrop

Getting started #

Follow the medium article to Quickly Implement Backdrop in Flutter.

Usage #

BackdropScaffold #

Use BackdropScaffold instead of the standard Scaffold in your app. A backLayer and a frontLayer have to be defined for the backdrop to work.

BackdropScaffold(
  appBar: BackdropAppBar(
    title: Text("Backdrop Example"),
    actions: <Widget>[
      BackdropToggleButton(
        icon: AnimatedIcons.list_view,
      )
    ],
  ),
  backLayer: Center(
    child: Text("Back Layer"),
  ),
  frontLayer: Center(
    child: Text("Front Layer"),
  ),
)

Navigation with backdrop #

To use backdrop for navigation, use the provided BackdropNavigationBackLayer as backLayer.

The BackdropNavigationBackLayer contains a property items representing the list elements shown on the back layer. The front layer has to be "manually" set depending on the current index, which can be accessed with the onTap callback.

int _currentIndex = 0;
final List<Widget> _pages = [Widget1(), Widget2()];

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Backdrop Demo',
    home: BackdropScaffold(
      appBar: BackdropAppBar(
        title: Text("Navigation Example"),
        actions: <Widget>[
          BackdropToggleButton(
            icon: AnimatedIcons.list_view,
          )
        ],
      ),
      stickyFrontLayer: true,
      frontLayer: _pages[_currentIndex],
      backLayer: BackdropNavigationBackLayer(
        items: [
          ListTile(title: Text("Widget 1")),
          ListTile(title: Text("Widget 2")),
        ],
        onTap: (int position) => {setState(() => _currentIndex = position)},
      ),
    ),
  );
}