expandable_bottom_sheet 0.2.1+1

  • Readme
  • Changelog
  • Example
  • Installing
  • 91

ExpandableBottomSheet #

This is a BottomSheet with a draggable height like the Google Maps App on Android.

If you have suggestions or find bugs please write an issue at github. PR's are welcome.

How to use it? #

Just look into the example Tab

Arguments #

ArgumentDescription
expandableContentThis is the widget which you can hide and show by dragging. It has to be a widget with a constant height.
backgroundThis is the widget behind the expandableContent which holds usually the content of your page.
persistentHeaderThis is a Widget which is on top of the expandableContent and will never be hidden. It is made for a widget which indicates the user he can expand the content by dragging.
persistentFooterThis is a widget which is always shown at the bottom. The expandableContentis if it is expanded on top of it so you don't need margin to see all of your content. You can use it for example for navigation or a menu.
persistentContentHeightThis is the height of the content which will never been contracted. It only relates to expandableContent. persistentHeader and persistentFooter will not be affected by this.
animationDurationExtendThis is the duration for the animation if you stop dragging with high speed.
animationDurationContractis the duration for the animation to bottom if you stop dragging with high speed. If it is null animationDurationExtend will be used.
animationCurveExpandThis is the curve of the animation for expanding the expandableContent if the drag ended with high speed.
animationCurveContractThis is the curve of the animation for contracting the expandableContent if the drag ended with high speed.
onIsExtendedCallbackThis will be executed if the extend reaches its maximum.
onIsContractedCallbackThis will be executed if the extend reaches its minimum.

[0.2.1+1] - 06.12.2019. #

  • Bug Fix

[0.2.1] - 06.12.2019. #

  • Now Expands Method works even if the content updates its height without rebuilding the ExpandableBottomSheet.

[0.2.0] - 28.11.2019. #

  • Added functions to expand or contract the content from outside.

  • Fixes the bugs from calling

[0.1.4] - 20.11.2019. #

  • Bug fix: The content height hasn't updated properly.

[0.1.3] - 20.11.2019. #

  • Changed intern structure

[0.1.2] - 20.11.2019. #

  • Readme adjustments

[0.1.1] - 20.11.2019. #

  • Readme adjustments

[0.1.0] - 20.11.2019. #

  • The initial build

example/README.md

Examples #

This are two examples how to use the ExpandableBottomSheet

Easy ExampleExpert Example

Easy Example #

ExpandableBottomSheet(
  background: Container(
    color: Colors.red,
    child: Center(
      child: Text('Background'),
    ),
  ),
  persistentHeader: Container(
    height: 40,
    color: Colors.blue,
    child: Center(
      child: Text('Header'),
    ),
  ),
  expandableContent: Container(
    height: 500,
    color: Colors.green,
    child: Center(
      child: Text('Content'),
    ),
  ),
);

Call expand, contract or status programmatically #

...
GlobalKey<ExpandableBottomSheetState> key = new GlobalKey();
...

@override
Widget build(BuildContext context) {
  return ExpandableBottomSheet(
    key: key
    ...
  );
}

void expand() => key.currentState.expand();

void contract() key.currentState.contract();

ExpansionStatus status() => key.currentState.expansionStatus;

Expert Example #

class ExampleExpert extends StatefulWidget {
  @override
  _ExampleExpertState createState() => _ExampleExpertState();
}

class _ExampleExpertState extends State<ExampleExpert> {
  GlobalKey<ExpandableBottomSheetState> key = new GlobalKey();
  int _contentAmount = 0;
  ExpansionStatus _expansionStatus = ExpansionStatus.contracted;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(_expansionStatus.toString()),
        ),
        body: ExpandableBottomSheet(
          //use the key to get access to expand(), contract() and expansionStatus
          key: key,

          //optional
          //callbacks (use it for example for an animation in your header)
          onIsContractedCallback: () => print('contracted'),
          onIsExtendedCallback: () => print('extended'),

          //optional; default: Duration(milliseconds: 250)
          //The durations of the animations.
          animationDurationExtend: Duration(milliseconds: 500),
          animationDurationContract: Duration(milliseconds: 250),

          //optional; default: Curves.ease
          //The curves of the animations.
          animationCurveExpand: Curves.bounceOut,
          animationCurveContract: Curves.ease,

          //optional
          //The content extend will be at least this height. If the content
          //height is smaller than the persistentContentHeight it will be
          //animated on a height change.
          //You can use it for example if you have no header.
          persistentContentHeight: 220,

          //required
          //This is the widget which will be overlapped by the bottom sheet.
          background: Container(
            color: Colors.blue[800],
          ),

          //optional
          //This widget is sticking above the content and will never be contracted.
          persistentHeader: Container(
            color: Colors.orange,
            constraints: BoxConstraints.expand(height: 40),
            child: Center(
              child: Container(
                height: 8.0,
                width: 50.0,
                color: Color.fromARGB((0.25 * 255).round(), 0, 0, 0),
              ),
            ),
          ),

          //required
          //This is the content of the bottom sheet which will be extendable by dragging.
          expandableContent: Container(
            constraints: BoxConstraints(maxHeight: 400),
            child: SingleChildScrollView(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  for (int i = 0; i < _contentAmount; i++)
                    Container(
                      height: 50,
                      color: Colors.red[((i % 8) + 1) * 100],
                    ),
                ],
              ),
            ),
          ),

          //optional
          //This is a widget aligned to the bottom of the screen and stays there.
          //You can use this for example for navigation.
          persistentFooter: Container(
            color: Colors.green,
            height: 100,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                IconButton(
                  icon: Icon(Icons.add),
                  onPressed: () => setState(() {
                    _contentAmount++;
                  }),
                ),
                IconButton(
                  icon: Icon(Icons.arrow_upward),
                  onPressed: () => setState(() {
                    key.currentState.expand();
                  }),
                ),
                IconButton(
                  icon: Icon(Icons.cloud),
                  onPressed: () => setState(() {
                    _expansionStatus = key.currentState.expansionStatus;
                  }),
                ),
                IconButton(
                  icon: Icon(Icons.arrow_downward),
                  onPressed: () => setState(() {
                    key.currentState.contract();
                  }),
                ),
                IconButton(
                  icon: Icon(Icons.remove),
                  onPressed: () => setState(() {
                    if (_contentAmount > 0) _contentAmount--;
                  }),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  expandable_bottom_sheet: ^0.2.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:expandable_bottom_sheet/expandable_bottom_sheet.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
82
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]
91
Learn more about scoring.

We analyzed this package on Jul 9, 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:

  • expandable_bottom_sheet that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
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