Backdrop implementation in flutter.
This widget is in active development. Wait for the stable v1.0. Any contribution, idea, criticism or feedback is welcomed.
package | https://pub.dev/packages/backdrop |
Git Repo | https://github.com/fluttercommunity/backdrop |
Issue Tracker | https://github.com/fluttercommunity/backdrop/issues |
Follow the medium article to Quickly Implement Backdrop in Flutter.
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"),
),
)
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)},
),
),
);
}
For more information, check out sample code in the example directory
- You'll need a GitHub account.
- Fork the repository.
- Pick an issue to work on from issue tracker.
- Implement it.
- Add your name and email in
authors
section inpubspec.yaml
file. - Send merge request.
- Star this project.
- Become a hero!!
Please file feature requests and bugs at the issue tracker.
Thanks goes to these wonderful people (emoji key):
Harsh Bhikadia π» π€ |
Felix Wielander π» ππ |
Jorge A Peroza M π»π |
This project follows the all-contributors specification. Contributions of any kind welcome!