backdrop_material_widget 1.0.0

Backdrop component of Material Components 2.0.

backdrop_widget

Backdrop component for Material Components 2.0

Usage

Backdrop has two mode view

One destination mode: [One destination]

  import 'package:backdrop_scaffold/backdrop_widget.dart';
  import 'package:backdrop_scaffold/backdrop_page.dart';

  final GlobalKey<_CounterWidgetState> _keyCounter = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return BackdropScaffold(
        titleAppBar: 'Fulldriver',
        frontWidget: (context){
          return BackdropPage(
            subTitle: 'Increment/decrement',
            widget: CounterWidget(
              key: _keyCounter,
            ),
          );
        },
        backPanelBuilder: (context){
          return Column(
            mainAxisSize: MainAxisSize.min, //Set min for panel close not in full
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.arrow_upward, color: Colors.white,),
                title: Text('Open panel', style: TextStyle(color: Colors.white),),
                onTap: (){
                  Backdrop.of(context).flingFrontPanel();
                },
              ),
              ListTile(
                leading: Icon(Icons.plus_one, color: Colors.white,),
                title: Text('Increment', style: TextStyle(color: Colors.white),),
                onTap: (){
                  _keyCounter.currentState.increment();
                },
              ),
              ListTile(
                leading:  Icon(Icons.remove, color: Colors.white),
                title: Text('Increment', style: TextStyle(color: Colors.white),),
                onTap: (){
                  _keyCounter.currentState.decrement();
                },
              ),
              ListTile(
                leading:  Icon(Icons.open_in_new, color: Colors.white),
                title: Text('Open bottom sheet', style: TextStyle(color: Colors.white),),
                onTap: (){
                  Backdrop.of(context).callBottomSheet(Colors.white, Text('Options', textAlign: TextAlign.start, style: Theme.of(context).textTheme.title,)).closed.then((_){
                    Backdrop.of(context).callSnackBar(SnackBar(content: Text(_keyCounter.currentState._count.toString())));
                  });
                  Backdrop.of(context).flingFrontPanel();
                },
              )
            ],
          );
        },
      bottomSheetBuilder: (context){
          return Column(
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.plus_one, color: Colors.green,),
                title: Text('Increment'),
                onTap: (){
                  _keyCounter.currentState.increment();
                  Navigator.of(context).pop();
                },
              ),
              ListTile(
                leading:  Icon(Icons.remove, color: Colors.deepOrange),
                title: Text('Decrement'),
                onTap: (){
                  _keyCounter.currentState.decrement();
                  Navigator.of(context).pop();
                },
              ),
              ListTile(
                leading:  Icon(Icons.close, color: Colors.red),
                title: Text('Close bottom sheet'),
                onTap: (){
                  Navigator.of(context).pop();
                },
              )
            ],
          );
      },
    );
  }

Navigation mode: [Demonstration navigation]

    import 'package:backdrop_scaffold/backdrop_widget.dart';

    List<String> menu = List.generate(3, (index) => 'Item $index');
        var list = menu.map<NavigationDestination>((item) => NavigationDestination(
                icon: Icons.title,
                title: item,
                page: BackdropPage(
                    contentBuilder: (context) {
                      return Center(child: Column(
                        children: <Widget>[
                          RaisedButton(child: Text('Bottom sheet'), onPressed: () {
                            Backdrop.of(context).callBottomSheet(Colors.white, Text('Bottom sheet', textAlign: TextAlign.start, style: Theme.of(context).textTheme.title,));
                          }),
                          RaisedButton(child: Text('Snack bar'), onPressed: () {
                            Backdrop.of(context).callSnackBar(SnackBar(content: Text('SnackBar')));
                          })
                        ],
                      )
                      );
                }))).toList();
    return BackdropScaffold.navigation(
      destinations: list,
      actions: <Widget>[
        IconButton(icon: Icon(Icons.android,), onPressed: (){})
      ],
      bottomSheetBuilder: (context){
        return Container(
          height: 300,
          color: Colors.blue,
        );
      },
      itemBuilder: (context, index){
        return ListTile(
          leading: Icon(list[index].icon, color: Colors.white,),
          title: Text(list[index].title, style: Theme.of(context).textTheme.title.copyWith(color: Colors.white),),
        );
      },
    );

##Features

Use GlobalKey for getting state and calling his methods. Provide: -Persistent bottom sheet -Snackbar For call bottom sheet or snackbar use this code:

   Backdrop.of(context).callBottomSheet({backgroundColor, customTitle});
   Backdrop.of(context).callBottomSheet(Snakbar());

Navigation mode: -Dynamic action > Page has list actions for visible on action bar -Dynamic title >Page has subtitle and update title in AppBar

Getting Started

Material Components 2.0 Backdrop

This project is a starting point for a Dart package, a library module containing code that can be shared easily across multiple Flutter or Dart projects.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.