backdrop 0.4.2

Flutter Android iOS web

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

Flutter Community: backdrop

backdrop #

pub.dev Gitter All Contributors analysis GitHub issues GitHub milestone GitHub stars GitHub forks Gitlab stars Gitlab forks

Backdrop implementation in flutter.

This widget is in active development. Any contribution, idea, criticism or feedback is welcomed.

packagehttps://pub.dev/packages/backdrop
Git Repohttps://github.com/fluttercommunity/backdrop
Issue Trackerhttps://github.com/fluttercommunity/backdrop/issues
Chat Roomhttps://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"),
  ),
)
BackdropScaffold example

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)},
      ),
    ),
  );
}
BackdropNavigationScaffold example

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

Contribute #

Check proposal documents for v1.0 and web&desktop milestones before you begin with any contibution.

  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

πŸ’» πŸ“–πŸ›πŸ‘€

Bringmos

πŸ›

Greg Spencer

πŸ›

Jorge A Peroza M

πŸ’»πŸ›

Matt Newell

πŸ›

Daniel Borges

πŸ’»πŸ›

Felix Wortmann

πŸ’»πŸ‘€

Pierre Grimaud

πŸ“–

Π’Π°Π΄ΠΈΠΌ

πŸ’»

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

52
likes
95
pub points
90%
popularity

Publisher

fluttercommunity.dev

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

Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on backdrop