backdrop_material_widget 1.0.6

  • Readme
  • Changelog
  • Example
  • Installing
  • 68

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.

[1.0.0] - 22.04.2020 #

  • Initial release.

[1.0.1] - 22.04.2020 #

  • Update documentation and example

[1.0.2] - 01.05.2020 #

  • Update docs
  • Fixed case where opened keyboard up backdrop widget.

[1.0.3] - 04.05.2020 #

  • Fix height front panel
  • Small change
  • Update example
  • Update docs
  • Update sdk version

[1.0.4] - 10.05.2020 #

  • Fix build context for page
  • Small refactoring
  • Update example

[1.0.5] - 10.05.2020 #

  • Hot fix

[1.0.6] - 02.06.2020 #

  • Fixed theme back tiles for navigation mode
  • Example fixed

example/lib/main.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:backdrop_material_widget/backdrop_material_widget.dart';

import 'one_page_screen.dart';

void main() => runApp(MyApp());

List<String> genList(int length) => List<String>.generate(length, (index) => 'Item $index');

class ProviderData extends InheritedWidget {
  const ProviderData({
    Key key,
    this.data,
    @required Widget child,
  }): assert(child != null),
        super(key: key, child: child);

  final String data;

  static ProviderData of(BuildContext context) => context.dependOnInheritedWidgetOfExactType<ProviderData>();

  @override
  bool updateShouldNotify(ProviderData old) => false;
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final GlobalKey<BackdropScaffoldState> _key = GlobalKey();
    final destinations = [
      NavigationDestination(
          icon: const Icon(Icons.title),
          title: const Text('Empty page'),
          child: (_) => const OnePage()
      ),
      NavigationDestination(
          icon: const Icon(Icons.title),
          title: const Text('Page list'),
          subTitle: const Text('With infinite list length'),
          child: (context){
            return FutureBuilder<List<String>>(
              future: compute<int, List<String>>(genList, 1000),
              builder: (context, snapshot){
                if(!snapshot.hasData)
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                if(snapshot.data.isEmpty)
                  return const Center(
                    child: Text('List is empty'),
                  );
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index) => ListTile(title: Text(snapshot.data[index]),),
                );
              },
            );
          }
      ),
      NavigationDestination(
          icon: const Icon(Icons.title),
          title: const Text('Test 3'),
          subTitle: const Text('Page with action'),
          actions: <Widget>[
            IconButton(icon: const Icon(Icons.settings), onPressed: () => _key.currentState.callSnackBar(const SnackBar(content: Text('Action!'))))
          ],
          child: (context){
            return Container(
              color: Colors.blueGrey,
              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 ProviderData(
      data: 'Backdroop inherited provide',
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.green,
          brightness: Brightness.dark
        ),
        home: BackdropScaffold.navigation(key: _key, titleAppBar: Text('Backdrop example'), destinations: destinations),
      ),
    );
  }
}

class OnePage extends StatelessWidget {
  const OnePage();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: FlatButton(onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => OnePageScreen())), child: Text(ProviderData.of(context).data)),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  backdrop_material_widget: ^1.0.6

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:backdrop_material_widget/backdrop_material_widget.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
42
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
86
Overall:
Weighted score of the above. [more]
68
Learn more about scoring.

We analyzed this package on Jul 11, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • backdrop_material_widget that is a package requiring null.

Health suggestions

Format lib/backdrop_material_widget.dart.

Run flutter format to format lib/backdrop_material_widget.dart.

Format lib/src/backdrop.dart.

Run flutter format to format lib/src/backdrop.dart.

Format lib/src/backdrop_page.dart.

Run flutter format to format lib/src/backdrop_page.dart.

Format lib/src/utility/persistent_bottom_sheet.dart.

Run flutter format to format lib/src/utility/persistent_bottom_sheet.dart.

Maintenance suggestions

The package description is too short. (-14 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.3.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test