Flutter BackDrop
This widget is in active development. Wait for the stable v1.0. Any contribution, idea, criticism or feedback is very much welcomed.
back_drop package
I recently got introduced to flutter and its implementation of material design. After going through some sample implementation on the internet I discovered the Backdrop component from material design guidelines. I found it to be a very useful UI element with many use-cases. Sadly, there isn’t a backdrop widget in the official material package.
According to Material.io; A backdrop appears behind all other surfaces in an app, displaying contextual and actionable content.
1. Back layer
2. Front layer
Hence, I decided to implement this component and published it as a package with supporting widgets. This post demonstrates how to use the package and its widgets to implement a basic backdrop component with flutter.
BackdropScaffold
Anyone familiar with flutter will be aware of the magical Scaffold
widget which builds the basic app structure for you. Similarly BackdropScaffold
widget of the backdrop package builds the layout for you with a given body and backlayer.
Add backdrop as dependecy
Add this to your package’s pubspec.yaml file:
dependencies: backdrop: ">=0.0.0 <0.1.0"
Install package from command line:
$ flutter packages get
Import backdrop in your Dart code:
import 'package:backdrop/backdrop.dart';
Implementation example
First, lets see what arguments can be passed to theBackdropScaffold
widget within the backdrop package.
title
– (default=null) title for appbarbackpanel
– (default=null) widget to be displayed in backlayerbody
– (default=null) widget to be displayed in frontlayeractions
– (default=null) list of widgets for appbarheaderHeight
– (default=32.0) height of frontlayer to be visible when backlayer is activecontroller
– (default=initialised internally) AnimationController object can be optionally passed from outside the widget
Finally, lets write down basic example for the backdrop using this widget.
import 'package:backdrop/backdrop.dart'; import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Backdrop Demo', home: BackdropScaffold( title: Text("Backdrop Example"), backpanel: Center( child: Text("Backpanel"), ), body: Center( child: Text("Body"), ), ), ); } }
That’s it!! BackdropScaffold
makes it really easy for you.
Contribution
Check proposal documents for v1.0 and web&desktop milestones before you begin with any contibution.
- 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!!