1. Backlayer 2. Frontlayer 3. Subheader

Lets not waste time and get started with the code.

add dependecy:

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 {
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:

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.

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.


Anyone familiar with flutter will be aware of the magical Scaffold

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