Skip to content

fluttercommunity/backdrop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Flutter Community: backdrop

backdrop

pub.dev ci Demo Awesome Flutter Gitter All Contributors pub points popularity likes 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.

Quick links

Package https://pub.dev/packages/backdrop
API Docs https://pub.dev/documentation/backdrop/latest/backdrop/backdrop-library.html
Live Demo https://fluttercommunity.github.io/backdrop/demo/#/
Git Repo https://github.com/fluttercommunity/backdrop
Issue Tracker https://github.com/fluttercommunity/backdrop/issues
Chat Room https://gitter.im/flutter-backdrop

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

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

Accessing underlying backdrop functionalities

To access backdrop related functionalities, use Backdrop.of(context) to get underlying BackdropScaffoldState.

BackdropScaffoldState exposes various properties and methods like:

  • properties
    • animationController -> AnimationController
    • scaffoldKey -> GlobalKey<ScaffoldState>
    • isBackLayerConcealed -> bool
    • isBackLayerRevealed -> bool
  • methods
    • fling()
    • concealBackLayer()
    • revealBackLayer()

Note: Backdrop is an InheritedWidget and therefore like Scaffold.of, Theme.of and MediaQuery.of, the BuildContext context passed to Backdrop.of(context) should be of a Widget that is under the BackdropScaffold in the "widget tree". In other words, Backdrop.of called inside a widget where the BackdropScaffold is initalized will not work explicitly, since the context passed is of the widget that will build BackdropScaffold therefore above BackdropScaffold. This can be solved by either making a seperate Widget where Backdrop.of needs to be used and make it the "child" of BackdropScaffold or wrap the Backdrop.of usage around Builder widget so that the "correct" context (from Builder) is passed to Backdrop.of. This answere on SO and FWotW video on Builder gives a very good idea of how and why Builder works in later case.

For more information, check out sample code in the example directory, demo app with use-cases and code for it and API references generated by pub.dev.

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. Send merge request.
  6. Star this project.
  7. 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
Harsh Bhikadia

πŸ’» πŸ€” πŸ‘€ πŸ“– πŸš‡ 🚧
Felix
Felix

πŸ’» πŸ“– πŸ› πŸ‘€ πŸ’‘ πŸš‡ 🚧
Bringmos
Bringmos

πŸ›
Greg Spencer
Greg Spencer

πŸ›
Jorge A Peroza M
Jorge A Peroza M

πŸ› πŸ’»
Matt Newell
Matt Newell

πŸ›
Daniel Borges
Daniel Borges

πŸ› πŸ’»
Felix Wortmann
Felix Wortmann

πŸ’» πŸ‘€ πŸ›
Pierre Grimaud
Pierre Grimaud

πŸ“–
Π’Π°Π΄ΠΈΠΌ
Π’Π°Π΄ΠΈΠΌ

πŸ’»
Danial Agh
Danial Agh

πŸ›
PembaTamang
PembaTamang

πŸ›
hassan
hassan

πŸ›
Yaroslav Pronin
Yaroslav Pronin

πŸ› πŸ’» πŸ‘€
Enikuomehin Adejuwon
Enikuomehin Adejuwon

πŸ’»
Nwachi ifeanyichukwu Victor
Nwachi ifeanyichukwu Victor

πŸ’»
mockturtl
mockturtl

πŸ’» πŸ“– πŸ›
ritar
ritar

πŸ›
LorenzoVianello
LorenzoVianello

πŸ›
Scott
Scott

πŸ’»
Sachin Dahal
Sachin Dahal

πŸ“–
Jan Hendrych
Jan Hendrych

πŸ›
Pascal Wild
Pascal Wild

πŸ›
Jens Reinemuth
Jens Reinemuth

πŸ’»
tobolski
tobolski

πŸ›
Mahdi Pishguy
Mahdi Pishguy

πŸ›

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