Backdrop component for Material Components 2.0. Material Components 2.0 Backdrop Widget is implemented behavior and styling backdrop material component. This have two mode behavior:

  • Open page mode
  • Navigation mode

How use

One destination mode

One destination

  Widget build(BuildContext context) {
    return BackdropScaffold(
    titleAppBar: //Your title
    frontWidgetBuilder: (context){
        //Return your frontPanel widget
    }, backPanelBuilder: (context) {
          //Return your backPanel widget

Navigation mode

Demonstration navigation

  Widget build(BuildContext context) {
    final GlobalKey<BackdropScaffoldState> _key = GlobalKey(); //Use this for access state
    final destinations = [
          icon: //Icon
          title: //Title
          subTitle: //Subtitle
          actions: //Actions list widget
          child: (context){
                //Return Widget
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      home: BackdropScaffold.navigation(key: _key, titleAppBar: Text('Backdrop example'), destinations: destinations),

Navigation mode:

  • Dynamic action

    Page has list actions for visible on action bar

  • Dynamic title

    Page has subtitle and update title in AppBar

Persistent bottom sheet

For call bottom sheet use this code:

   Future<T> response = Backdrop.of(context).showPersistentBottomSheet<T>(context: context, background: Colors.greenAccent, builder: (context){
                    return Container(
                      child: Center(
                        child: RawMaterialButton(onPressed: (){
                          ControllerBottomSheet.of<T>(context).closeWithData(T); //Use Controller for close bottom  sheet inside
                        }, child: Text('Close'),),

ControllerBottomSheet - provide get data for processing future or programmably close this.

Other function

For fling front panel programmably use Backdrop.of(context).fling Front Panel() of if panel is closed this is not effect.