SlidingBox for Flutter

Flutter SlidingBox Plugin

pub package likes GitHub Stars License points popularity Platform

A draggable flutter widget (like bottom sheet panel) that makes it easier to use a SlidingBox for all platform. Boxes can be customized with your content and placed in your app.


To see example of the following SlidingBox on a device or simulator:

cd example/
flutter run --release

Demo

Messenger application Messenger application Simple SlidingBox SearchBox

Simple

Light Dark
Simple Light Simple Dark

Source Link: example/lib/main.dart

Map

Light Dark
Map Light Map Dark

Source Link: example/lib/map_screen.dart

Music player

Light Dark
Music Player Light Music Player Dark

Source Link: example/lib/music_player_screen.dart

Share

Share Light

Source Link: example/lib/share_screen.dart

Messenger

Messenger application

Source Link: Messenger application


Getting Started

Installation

Add flutter_sliding_box as a dependency in your pubspec.yaml file:

dependencies:
  flutter_sliding_box: ^1.1.5

Import the plugin package to your dart code

import 'package:flutter_sliding_box/flutter_sliding_box.dart';

Usage

Simple SlidingBox

By default use SlidingBox as root widget for body (recommended)

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SlidingBox(
      body: const Center(
        child: Text("This is the sliding box widget",
          style: TextStyle(color: Colors.black),),
      ),
      backdrop: Backdrop(
        color: Colors.blueGrey,
      ),
    ),
  );
}

Custom Usage

There are several options that allow for more control:

Properties Data Type Description
body Widget A widget that slides from minHeight to maxHeight and is placed on the backdrop.
bodyBuilder Widget Provides a ScrollController to attach to a scrollable widget in the box and current box position. If body and bodyBuilder are both non-null, body will be used.
controller BoxController It can be used to control the state of sliding box and search box.
collapsed bool If set to true, the state of the box is collapsed.
collapsedBody Widget The Widget displayed overtop the box when collapsed. This fades out as the sliding box is opened.
width double width of the sliding box.
minHeight double The height of the sliding box when fully collapsed.
maxHeight double The height of the sliding box when fully opened.
color Color color to fill the background of the sliding box.
borderRadius BorderRadius The corners of the sliding box are rounded by this.
style BoxStyle The styles of the sliding box that includes shadow and sheet and none.
physics ScrollPhysics Gets a ScrollPhysic, the physics determines how the scroll view continues to animate after the user stops dragging the scroll view.
draggable bool Allows toggling of draggability of the sliding box. If set to false, the sliding box cannot be dragged up or down.
draggableIcon IconData A Icon Widget that is placed in top of the box. Gets a IconData.
draggableIconColor Color The color of the draggableIcon.
draggableIconVisible bool If set to false, the draggableIcon hides. Use controller to open and close sliding box by taps.
draggableIconBackColor Color The color to fill the background of the draggableIcon icon. The position of the icon is top of the box.
onBoxSlide ValueChanged<double> This callback is called when the sliding box slides around with position of the box. The position is a double value between 0.0 and 1.0, where 0.0 is fully collapsed and 1.0 is fully opened.
onBoxOpen VoidCallback This callback is called when the sliding box is fully opened.
onBoxClose VoidCallback This callback is called when the sliding box is fully closed.
onBoxShow VoidCallback This callback is called when the sliding box is visible.
onBoxHide VoidCallback This callback is called when the sliding box is invisible.
onSearchBoxShow VoidCallback This callback is called when the search box is visible.
onSearchBoxHide VoidCallback This callback is called when the search box is invisible.
animationCurve Curve animationCurve defines the easier behavior of the box animation.
animationDuration Duration animationDuration defines the time for the box animation to complete.
backdrop Backdrop A Widget that is placed behind of the box, filled with the Backdrop.

Backdrop Usage

Using the Backdrop

Manually change the Backdrop properties.

Properties Data Type Description
color Color color to fill the background of the backdrop.
width double width of the backdrop body.
fading bool If set to true, the backdrop body fades out when the sliding box opened.
moving bool If set to true, the backdrop body moving up when the sliding box opened.
overlay bool If set to true, a dark layer displayed above of the backdrop and behind of the sliding box when is opened.
overlayOpacity double Amount of dark overlay layer. a double value between 0.0 and 1.0.
backgroundGradient Gradient The gradient color to fill the background of the backdrop. if color and backgroundGradient are both non-null, color will be used.
body Widget A Widget that is placed in the backdrop and behind of the sliding box.
appBar BackdropAppBar appBar to display at the top of the backdrop.

BackdropAppBar

SlidingBox includes appBar: BackdropAppBar

BoxController boxController = BoxController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SlidingBox(
      controller: boxController,
      minHeight: 200,
      maxHeight: 400,
      body: Center(
        child: Text("This is the sliding box widget",
          style: TextStyle(color: Colors.black),),
      ),
      backdrop: Backdrop(
        color: Colors.blueGrey,
        appBar: BackdropAppBar(
          title: Padding(
              padding: EdgeInsets.all(10),
              child: Text("AppBar", style: TextStyle(fontSize: 20),)
          ),
          leading: Icon(Icons.menu, color: Colors.white, size: 27,),
        ),
      ),
    ),
  );
}

Backdrop AppBar Usage

Using the BackdropAppBar

Manually change the BackdropAppBar properties.

Properties Data Type Description
title Widget A Widget that is placed on the topLeft of the backdrop.
leading Icon A Icon Widget that is placed in left of the title.
searchBox SearchBox A search box to display above backdrop. add a IconButton widget to actions and call boxController.showSearchBox() in onPressed method. see example.
actions List<Widget> A list of Widgets placed on the topRight of the backdrop.
SearchBox SearchBox

SlidingBox appBar includes searchBox: SearchBox

BoxController boxController = BoxController();
TextEditingController textEditingController = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SlidingBox(
      controller: boxController,
      minHeight: 200,
      maxHeight: MediaQuery
          .of(context)
          .size
          .height - 100,
      body: Center(
        child: Text("This is the sliding box widget",
          style: TextStyle(color: Colors.black),),
      ),
      backdrop: Backdrop(
        color: Colors.blueGrey,
        appBar: BackdropAppBar(
            title: Padding(
                padding: EdgeInsets.all(10),
                child: Text("AppBar", style: TextStyle(fontSize: 20),)
            ),
            leading: Icon(Icons.menu, color: Colors.white, size: 27,),
            searchBox: SearchBox(
              controller: textEditingController,
              body: Center(
                child: Text("This is the search box body widget",
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
            actions: [
              Container(
                margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),
                child: SizedBox.fromSize(
                  size: const Size.fromRadius(25),
                  child: IconButton(
                    iconSize: 25,
                    icon: Icon(Icons.search, color: Colors.white, size: 27,),
                    onPressed: () {
                      textEditingController.text = "";
                      boxController.showSearchBox();
                    },
                  ),
                ),
              ),
            ]
        ),
      ),
    ),
  );
}

SearchBox Usage

Manually change the SearchBox properties.

Properties Data Type Description
controller TextEditingController It can be used to control the state of search box text field. Gets a TextEditingController.
leading Icon A Icon Widget that is placed in left of the search box text field.
color Color color to fill the background of the SearchBox.
inputDecoration InputDecoration decoration to show around the search box text field.
borderRadius BorderRadius The corners of the search box are rounded by this.
style TextStyle style for text of the SearchBox.
body Widget A Widget that is placed in the sliding box (in search mode displays the search result).
draggableBody bool In search mode, allows toggling of draggability of the sliding box. If set to false, the sliding box cannot be dragged up or down when search box visible. If set to true, search box invisible when dragging.
Backdrop Overlay Backdrop Overlay

SlidingBox backdrop includes overlay: true


Customize overlayOpacity (a value between 0.0 and 1.0), default value is 0.5

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SlidingBox(
      body: const Center(
        child: Text("This is the sliding box widget",
          style: TextStyle(color: Colors.black),
        ),
      ),
      backdrop: Backdrop(
        overlay: true,
        overlayOpacity: 0.5,
        color: Colors.grey,
      ),
    ),
  );
}
Backdrop Width SlidingBox Backdrop Width

SlidingBox width and Backdrop width

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SlidingBox(
      width: MediaQuery.of(context).size.width - 50,
      minHeight: 200,
      maxHeight: 400,
      body: Center(
        child: Text("This is the sliding box widget",
        style: TextStyle(color: Colors.black),),
      ),
      backdrop: Backdrop(
        width: MediaQuery.of(context).size.width - 100,
        color: Colors.blueGrey,
      ),
    ),
  );
}
SlidingBox BoxStyle.sheet SlidingBox BoxStyle.shadow

SlidingBox includes style: sheet, shadow, none

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SlidingBox(
      minHeight: 200,
      maxHeight: 400,
      style: BoxStyle.sheet, /// or BoxStyle.shadow (default is 'none')
      body: Center(
        child: Text("This is the sliding box widget",
          style: TextStyle(color: Colors.black),),
      ),
      backdrop: Backdrop(
        color: Colors.blueGrey,
      ),
    ),
  );
}

Box Controller

Using the BoxController

Manually change the SearchBox state. For better performance, use a BoxController as controller (recommended).

Properties Data Type Description
isAttached bool Determine if the boxController is attached to an instance of the SlidingBox (this property must be true before any other BoxController functions can be used).
isBoxOpen bool Returns whether or not the box is open.
isBoxClosed bool Returns whether or not the box is close.
isBoxVisible bool Returns whether or not the box is visible.
isSearchBoxVisible bool Returns whether or not the search box is visible.
getPosition bool Returns box position (a value between 0.0 and 1.0).
minHeight double Returns box minHeight.
maxHeight double Returns box maxHeight.
boxWidth double Returns box width.
backdropWidth double Returns backdrop width.
Methods Return Type Description
openBox() Future<void> Opens the sliding box with animation (i.e. to the maxHeight).
closeBox() Future<void> Closes the sliding box with animation (i.e. to the minHeight).
showBox() Future<void> Shows the sliding box (i.e. is visible).
hideBox() Future<void> Hides the sliding box (i.e. is invisible).
showSearchBox() Future<void> Shows the search box (i.e. is visible).
hideSearchBox() Future<void> Hides the search box (i.e. is invisible).
setPosition() Future<void> Sets the sliding box position with animation (a value between 0.0 and 1.0).
setSearchBody() Future<void> Sets the search box body content.
BoxController BoxController ShowSearchBox 
BoxController boxController = BoxController();
TextEditingController textEditingController = TextEditingController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SlidingBox(
      controller: boxController,
      minHeight: 200,
      maxHeight: MediaQuery
          .of(context)
          .size
          .height - 100,
      body: const Center(
        child: Text("This is the sliding box widget",
          style: TextStyle(color: Colors.black),),
      ),
      collapsed: true,
      backdrop: Backdrop(
        color: Colors.blueGrey,
        appBar: BackdropAppBar(
            searchBox: SearchBox(
              controller: textEditingController,
              body: Center(
                child: MaterialButton(
                  child: Text("Hide SearchBox"),
                  onPressed: () {
                    boxController.hideSearchBox();
                    boxController.closeBox();
                  },
                  color: Colors.blueGrey,
                  textColor: Colors.white,
                ),
              ),
              draggableBody: true,
            ),
            actions: [
              Container(
                margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),
                child: SizedBox.fromSize(
                  size: const Size.fromRadius(25),
                  child: IconButton(
                    iconSize: 25,
                    icon: Icon(Icons.search, color: Colors.white, size: 27,),
                    onPressed: () {
                      textEditingController.text = "";
                      boxController.showSearchBox();
                    },
                  ),
                ),
              ),
            ]
        ),
        body: SingleChildScrollView(
          child: SizedBox(
            width: MediaQuery
                .of(context)
                .size
                .width,
            height: MediaQuery
                .of(context)
                .size
                .height,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                MaterialButton(
                  child: Text("Open"),
                  onPressed: () => boxController.openBox(),
                  color: Colors.white,
                ),
                MaterialButton(
                  child: Text("Close"),
                  onPressed: () => boxController.closeBox(),
                  color: Colors.white,
                ),
                MaterialButton(
                  child: Text("Show"),
                  onPressed: () => boxController.showBox(),
                  color: Colors.white,
                ),
                MaterialButton(
                  child: Text("Hide"),
                  onPressed: () => boxController.hideBox(),
                  color: Colors.white,
                ),
                MaterialButton(
                  child: Text("Show SearchBox"),
                  onPressed: () => boxController.showSearchBox(),
                  color: Colors.white,
                ),
                MaterialButton(
                  child: Text("Hide SearchBox"),
                  onPressed: () => boxController.hideSearchBox(),
                  color: Colors.white,
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

Body Builder

Using the bodyBuilder

When content overflow in body widget, scroll enable automatically and can using the body builder to manage and control scroll and box position.

SlidingBox bodyBuilder collapsed SlidingBox bodyBuilder dragged SlidingBox bodyBuilder opened 
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SlidingBox(
      minHeight: 200,
      maxHeight: 400,
      bodyBuilder: (sc, pos) => _body(sc, pos),
      backdrop: Backdrop(
        color: Colors.blueGrey,
      ),
    ),
  );
}

_body(ScrollController sc, double pos) {
  sc.addListener(() {
    print("scrollController position: ${sc.position.pixels}");
  });
  return Column(
    children: [
      SizedBox(height: 10,),
      Center(
        child: Text("box position: $pos",
          style: TextStyle(color: Colors.black),),
      ),
      SizedBox(height: 10,),
      Container(color: Colors.grey, height: 100,),
      SizedBox(height: 10,),
      Container(color: Colors.grey, height: 100,),
      SizedBox(height: 10,),
      Container(color: Colors.grey, height: 100,),
      SizedBox(height: 10,),
      Container(color: Colors.grey, height: 100,),
    ],
  );
}

showSlidingBox Method

Using the showSlidingBox() method

Display a SlidingBox easily and simply. Just call showSlidingBox() method.

showSlidingBoxClose showSlidingBoxOpen 
@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.blueGrey,
    body: Center(
      child: MaterialButton(
        color: Colors.white,
        onPressed: () {
          /// Shows SlidingBox
          showSlidingBox(
              context: context,
              box: SlidingBox(
                body: const Center(
                  child: Text("This is the sliding box widget",
                    style: TextStyle(color: Colors.black),),
                ),
              )
          );
        },
        child: const Text("Show SlidingBox"),
      ),
    ),
  );
}

Libraries

flutter_sliding_box