backdrop 0.2.14

Backdrop implementaion in dart. (https://material.io/design/components/backdrop.html)

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

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(
    title: Text("Backdrop Example"),
    backLayer: Center(
        child: Text("Back Layer"),
    ),
    frontLayer: Center(
        child: Text("Front Layer"),
    ),
    iconPosition: BackdropIconPosition.leading,
)

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.

class _MyAppState extends State<MyApp> {
  int _currentIndex = 0;
  final List<Widget> _frontLayers = [Widget1(), Widget2()];

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

For more information, check out sample code in the example directory

Contribute

1. You'll need a GitHub account.
2. Fork the repository.
3. Pick an issue to work on from issue tracker.
4. Implement it.
5. Add your name and email in authors section in pubspec.yaml file.
6. Send merge request.
7. Star this project.
8. Become a hero!!

Features and bugs

Please file feature requests and bugs at the issue tracker.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Harsh Bhikadia 💻 🤔

Felix Wielander 💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!