Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fluttercommunity/backdrop

Backdrop implementation in flutter.
https://github.com/fluttercommunity/backdrop

flutter flutter-demo flutter-examples flutter-material flutter-widget pub widget

Last synced: 4 days ago
JSON representation

Backdrop implementation in flutter.

Host: GitHub
URL: https://github.com/fluttercommunity/backdrop
Owner: fluttercommunity
License: mit
Created: 2018-07-25T14:24:30.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-09-23T23:11:18.000Z (over 1 year ago)
Last Synced: 2025-01-11T00:06:48.114Z (11 days ago)
Topics: flutter, flutter-demo, flutter-examples, flutter-material, flutter-widget, pub, widget
Language: Dart
Homepage: https://pub.dev/packages/backdrop
Size: 24.8 MB
Stars: 339
Watchers: 8
Forks: 36
Open Issues: 16
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-flutter - Backdrop - [Backdrop](https://material.io/design/components/backdrop.html) implementation for flutter. (Components / UI)

README

        [![Flutter Community: backdrop](https://fluttercommunity.dev/_github/header/backdrop)](https://github.com/fluttercommunity/community)

# backdrop









  

























[Backdrop](https://material.io/design/components/backdrop.html) 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.

```dart

BackdropScaffold(

  appBar: BackdropAppBar(

    title: Text("Backdrop Example"),

    actions: [

      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.

```dart

int _currentIndex = 0;

final List _pages = [Widget1(), Widget2()];

@override

Widget build(BuildContext context) {

  return MaterialApp(

    title: 'Backdrop Demo',

    home: BackdropScaffold(

      appBar: BackdropAppBar(

        title: Text("Navigation Example"),

        actions: [

          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)},

      ),

    ),

  );

}

```







### 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 `

  - `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](https://stackoverflow.com/a/52123080/2554745) and [FWotW video on Builder](https://www.youtube.com/watch?v=xXNOkIuSYuA) 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](https://github.com/fluttercommunity/backdrop/tree/master/example), [demo app](https://fluttercommunity.github.io/backdrop/demo/#/) with use-cases and code for it and [API references](https://pub.dev/documentation/backdrop/latest/backdrop/backdrop-library.html) generated by pub.dev.

## Contribute

Check proposal documents for [v1.0](https://github.com/fluttercommunity/backdrop/issues/5) and [web&desktop](https://github.com/fluttercommunity/backdrop/issues/34) milestones before you begin with any contibution.

1. You'll need a GitHub account.

2. Fork the [repository](https://github.com/fluttercommunity/backdrop).

3. Pick an issue to work on from [issue tracker](https://github.com/fluttercommunity/backdrop/issues).

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](https://github.com/fluttercommunity/backdrop/issues).

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    

      
_{Harsh Bhikadia}
💻 🤔 👀 📖 🚇 🚧

      
_Felix
💻 📖 🐛 👀 💡 🚇 🚧

      
_Bringmos
🐛

      
_{Greg Spencer}
🐛

      
_{Jorge A Peroza M}
🐛 💻

      
_{Matt Newell}
🐛

      
_{Daniel Borges}
🐛 💻

    

    

      
_{Felix Wortmann}
💻 👀 🐛

      
_{Pierre Grimaud}
📖

      
_Вадим
💻

      
_{Danial Agh}
🐛

      
_PembaTamang
🐛

      
_hassan
🐛

      
_{Yaroslav Pronin}
🐛 💻 👀

    

    

      
_{Enikuomehin Adejuwon}
💻

      
_{Nwachi ifeanyichukwu Victor}
💻

      
_mockturtl
💻 📖 🐛

      
_ritar
🐛

      
_{LorenzoVianello}
🐛

      
_Scott
💻

      
_{Sachin Dahal}
📖

    

    

      
_{Jan Hendrych}
🐛

      
_{Pascal Wild}
🐛

      
_{Jens Reinemuth}
💻

      
_tobolski
🐛

      
_{Mahdi Pishguy}
🐛

    

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!