backdrop_material_widget 1.0.2

Backdrop component of Material Components 2.0.

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: Text('Backdrop example'), frontWidgetBuilder: (context){
      return Column(
        children: <Widget>[
          Text('Testing one page', style: Theme.of(context).textTheme.headline,),
          RaisedButton(child: Text('Tap me'), onPressed: (){
            Backdrop.of(context).callSnackBar(SnackBar(content: Text('I\'m snack phhhh')));
          }),
          Expanded(
            child:  ListView(
              children: List.generate(10, (index){
                return ListTile(title: Text('Item $index'),);
              }),
            ),
          )
        ],
      );
    }, backPanelBuilder: (context) {
      return Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: Column(
                  children: <Widget>[
                    ListTile(title: Text('Bla'),),
                    ListTile(title: Text('Bla'),),
                  ],
                ),
              ),
              Expanded(
                child: Column(
                  children: <Widget>[
                    ListTile(title: Text('Bla'),),
                    ListTile(title: Text('Bla'),),
                  ],
                ),
              )
            ],
          )
        ],
      );
    });
  }

Navigation mode

[Demonstration navigation]

 @override
  Widget build(BuildContext context) {
    final GlobalKey<BackdropScaffoldState> _key = GlobalKey();
    final destinations = [
      NavigationDestination(
          icon: Icon(Icons.title),
          title: Text('Test'),
          child: (context){
            return FlatButton(onPressed: (){
              Navigator.push(context, MaterialPageRoute(builder: (context){
                return OnePageScreen();
              }));
            }, child: Text('To one page screen'));
          }
      ),
      NavigationDestination(
          icon: Icon(Icons.title),
          title: Text('Test 2'),
          subTitle: Text('List'),
          child: (context){
            return SingleChildScrollView(
              child: Column(
                children: List.generate(10, (index){
                  return ListTile(title: Text('Item $index'),);
                }),
              ),
            );
          }
      ),
      NavigationDestination(icon: Icon(Icons.title),
          title: Text('Test 3'),
          subTitle: Text('With actions'),
          actions: <Widget>[
            IconButton(icon: Icon(Icons.settings), onPressed: () {
              _key.currentState.callSnackBar(SnackBar(content: Text('Action!')));
            })
          ],
          child: (context){
            return Container(
              child: Center(
                child: FlatButton(child: Text('Open persisten bottom sheet') , onPressed: () {
                  Backdrop.of(context).showPersistentBottomSheet(context: context, background: Colors.greenAccent, builder: (context){
                    return Container(
                      child: Center(
                        child: RawMaterialButton(onPressed: (){
                          ControllerBottomSheet.of(context).close();
                        }, child: Text('Close'),),
                      ),
                    );
                  });
                }),
              ),
            );
          }
      )
    ];
    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

Features

Provide: - Persistent bottom sheet - Snackbar

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.

Snackbar

For call snackbar use this code either default method (Scaffold.of(context).showSnackBar):

   Backdrop.of(context).callSnackBar(Snakbar());