backdrop_modal_route 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • new50

Backdrop Modal Route #

pub package GitHub Stars Platform

Get best of both worlds, backdrop with actual backdrop unlike material design and non sticky bottom sheet

This flutter package will help you create backdrop modal route or non sticky bottom sheet with minimal code and efforts with dynamic content.

  • Android and IOS
  • simple and easy
  • no other dependencies
  • well documented
  • production-ready

This package was created as a need for our in-production app, as there is no single solution which gives you a route enabled bottom-sheet or backdrop which is route enabled and a new page with an actual backdrop unlike material design.

Getting Started #

Add the dependency backdrop_modal_route: ^0.1.0 to your project and start using Backdrop Modal Route everywhere:

import 'package:backdrop_modal_route/backdrop_modal_route.dart';

Open backdrop with your custom widget which could be stateful/stateless.

// with custom return type T
final result = await Navigator.push(
      context,
      BackdropModalRoute<T>(
        overlayContentBuilder: (context) => 
            YourStatelessOrStatefulBackdropOverlayContentWidget(),
      ),
    );

Open backdrop with inline widget

// with inline widget
await Navigator.push(
      context,
      BackdropModalRoute<void>(
        overlayContentBuilder: (context) {
          return Container(
            alignment: Alignment.center,
            padding: const EdgeInsets.all(24),
            child: RaisedButton(
                onPressed: () => Navigator.pop(context),
                child: Text('Inline Close'),
            ),
          );
        },
      ),
    );

For more details have a look at the other examples.

Properties #

PropertyTypeDefault
DEFAULT_BACKDROP_TOP_PADDINGdouble56.0
overlayContentBuilder (required)Functionyou implement it
backgroundColorColorWhite
topPaddingdouble56.0
barrierOpacitydouble0.5
transitionDurationValDurationmilliseconds:500
isOpaquebooleanfalse
canBarrierDismissbooleantrue
barrierColorValColorblack.withOpacity(barrierOpacity)
barrierLabelValStringnull
shouldMaintainStatebooltrue
backdropShapeShapeBorderRoundedRectangleBorder

Improve #

Help me by reporting bugs, submit new ideas for features or anything else that you want to share.

  • Just write an issue on GitHub. ✏️
  • And don't forget to hit the like button for this package ✌️

[0.1.1] - 11-05-2020. #

  • Readme updated.

[0.1.0] - 11-05-2020. #

  • Initial release.

example/lib/main.dart

import 'package:backdrop_modal_route/backdrop_modal_route.dart';
import 'package:example/custom_backdrop_modal_route.dart';
import 'package:example/stateful_backdrop_overlay_content.dart';
import 'package:example/stateless_backdrop_overlay_content.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Backdrop Modal Route Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // could be anything other than string,
  // depends on your BackdropModalRoute<T> return type
  String backdropResult = '';

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Backdrop Modal Route'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(24.0),
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom: 24.0),
                child: Text('Return Data : $backdropResult'),
              ),
              Expanded(
                child: ListView(
                  children: <Widget>[
                    // stateless default
                    Container(
                      child: FlatButton(
                        child: Text(
                          "Default Backdrop (Stateless) \n (String Return)",
                          textAlign: TextAlign.center,
                        ),
                        onPressed: () async {
                          handleStatelessBackdropContent(context);
                        },
                      ),
                    ),

                    // stateful default
                    Container(
                      child: FlatButton(
                        child: Text(
                          "Default Backdrop (Stateful) \n (Int Return)",
                          textAlign: TextAlign.center,
                        ),
                        onPressed: () async {
                          handleStatefulBackdropContent(context);
                        },
                      ),
                    ),

                    // customized
                    Container(
                      child: FlatButton(
                        child: Text(
                          "Inline Customized Default Backdrop \n (Void Return)",
                          textAlign: TextAlign.center,
                        ),
                        onPressed: () =>
                            handleCustomizedBackdropContent(context),
                      ),
                    ),

                    // custom/single purpose extended from base
                    Container(
                      child: FlatButton(
                        child: Text(
                          "Custom/Single purpose backdrop modal route extended from base",
                          textAlign: TextAlign.center,
                        ),
                        onPressed: () =>
                            handleCustomBackdropModalRoute(context),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void handleStatelessBackdropContent(BuildContext context) async {
    final result = await Navigator.push(
      context,
      BackdropModalRoute<String>(
        overlayContentBuilder: (context) => StatelessBackdropOverlayContent(),
      ),
    );

    setState(() {
      backdropResult = result;
    });
  }

  void handleStatefulBackdropContent(BuildContext context) async {
    final result = await Navigator.push(
      context,
      BackdropModalRoute<int>(
        overlayContentBuilder: (context) => CounterContentStateful(),
      ),
    );

    setState(() {
      backdropResult = result.toString();
    });
  }

  void handleCustomizedBackdropContent(BuildContext context) async {
    await Navigator.push(
      context,
      BackdropModalRoute<void>(
        overlayContentBuilder: (context) {
          return Container(
            height: MediaQuery.of(context).size.height - 100.0,
            alignment: Alignment.center,
            padding: const EdgeInsets.all(24),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Customized Backdrop Modal'),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Barrier Dismiss Disabled'),
                ),
                RaisedButton(
                  onPressed: () => Navigator.pop(context),
                  child: Text('Close'),
                ),
              ],
            ),
          );
        },
        topPadding: 100.0,
        barrierColorVal: Colors.deepPurple,
        backgroundColor: Colors.amberAccent,
        backdropShape: RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(60),
            topRight: Radius.circular(60),
            bottomLeft: Radius.circular(200),
            bottomRight: Radius.circular(200),
          ),
        ),
        barrierLabelVal: 'Customized Backdrop',
        shouldMaintainState: false,
        canBarrierDismiss: false,
      ),
    );
  }

  void handleCustomBackdropModalRoute(BuildContext context) async {
    final result = await Navigator.push(
      context,
      CustomBackdropModalRoute(),
    );

    setState(() {
      backdropResult =
          result != null && result.isNotEmpty ? result.join(', ') : null;
    });
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  backdrop_modal_route: ^0.1.1

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_modal_route/backdrop_modal_route.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
50
Learn more about scoring.

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

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test