Image for post
Image for post
1. Backlayer 2. Frontlayer 3. Subheader

Lets not waste time and get started with the code.

add dependecy:

dependencies:
backdrop: ">=0.0.0 <0.1.0"

run get package:

$ flutter packages get

drop in BackdropScaffold widget in your code:

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

),
);
}
}

this is how it should look:

Image for post
Image for post

I have writter a more detailed explaination about backdroppackage and BackdropScaffold widget in another article. Have a look if want to know more options.


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.

Image for post
Image for post
1. Backlayer 2. Frontlayer 3. Subheader

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. …

About

Harsh Bhikadia

Curious Mind. www.bhikadia.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store