Site icon Flutter Packages | Pub dev Packages – Flutter Mobile App World

A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier

Draggable Home

A draggable Flutter widget that makes implementing a Sliding up and fully-stretchable much easier! Based on the Scaffold and Sliver.

Usage

Make sure to check out examples for more details.

Installation

Add the following line to pubspec.yaml:

dependencies:
  draggable_home: ^1.0.0

Basic setup

The complete example is available here.

DraggableHome requires you to provide titleheaderWidget and body:

  physics: const NeverScrollableScrollPhysics()

Sample code

DraggableHome(
  title: Text("Ttitle"),
  headerWidget: headerWidget(),
  body: [
    Container(...),
    (...),
  ]
);

Arguments

There are several options that allow for more control:

PropertiesDescription
leadingA widget to display before the toolbar’s title.
actionA list of Widgets to display in a row after the title widget.
drawerDrawers are typically used with the Scaffold.drawer property.
centerTitleAllows toggling of title from the center. By default title is in the center.
headerExpandedHeightHeight of the header widget. The height is a double between 0.0 and 1.0. The default value of height is 0.35 and should be less than stretchMaxHeight
headerWidgetA widget to display Header above body.
backgroundColorThe color of the Material widget that underlies the entire DraggableHome body.
curvedBodyRadiusCreates a border top left and top right radius of body, Default radius of the body is 20.0. For no radius simply set value to 0.
fullyStretchableAllows toggling of fully expand draggability of the DraggableHome. Set this to true to allow the user to fully expand the header.
stretchTriggerOffsetThe offset of overscroll required to fully expand the header.
expandedBodyA widget to display when fully expanded as header or expandedBody above body.
stretchMaxHeightHeight of the expandedBody widget. The height is a double between 0.0 and 0.95. The default value of height is 0.9 and should be greater than headerExpandedHeight
floatingActionButtonA floating action button is a circular icon button that hovers over content to promote a primary action in the application.
floatingActionButtonLocationAn object that defines a position for the FloatingActionButton based on the Scaffold’s ScaffoldPrelayoutGeometry.
floatingActionButtonAnimatorProvider of animations to move the FloatingActionButton between FloatingActionButtonLocations.

Sample code for ListView.builder

DraggableHome(
  title: Text("Ttitle"),
  headerWidget: headerWidget(),
  body: [
    Container(...),

    // shrinkWrap true required for ListView.builder()
    // disable the scroll for any verically scrollable widget
    ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemCount: list.length,
      itemBuilder: (context, index) => Card(
        child: ListTile(
          title: Text("$index"),
        ),
      ),
    ),

    (...),
  ]
);

## Contributions

Contributions are welcomed!

If you feel that a hook is missing, feel free to open a pull-request.

For a custom-hook to be merged, you will need to do the following:

Download Draggable Home Widget source code on GitHub

https://github.com/4-alok/draggable_home
Exit mobile version