Wed Jul 25 2018 1 min read

Implement backdrop in flutter with less than 10 LOC

Quickest way to add Backdrop component to your Flutter app.

Backdrop component from Material Design Guideline.

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:

Backdrop Demo GIF

I have written a more detailed explaination about [**_backdrop_**](https://pub.dartlang.org/packages/backdrop)package and **BackdropScaffold** widget in another article. Have a look if want to know more options.

Quickly implement backdrop with flutter

Implement Backrop component from Material Design Guideline in Flutter.

bhikadia.com