backdrop_widget

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

  @override
  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

 @override
  Widget build(BuildContext context) {
    final GlobalKey<BackdropScaffoldState> _key = GlobalKey(); //Use this for access state
    final destinations = [
      NavigationDestination(
          icon: //Icon
          title: //Title
          subTitle: //Subtitle
          actions: //Actions list widget
          child: (context){
                //Return Widget
          }
      ),
    ];
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      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.

Libraries

backdrop_material_widget