SlidingBox for Flutter #

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 Simple SlidingBox SearchBox

Simple #

Light	Dark

Source Link: example/lib/main.dart

Map #

Light	Dark

Source Link: example/lib/map_screen.dart

Music player #

Light	Dark

Source Link: example/lib/music_player_screen.dart

Source Link: example/lib/share_screen.dart

Messenger #

Source Link: Messenger application

Getting Started #

Installation
Usage
Custom Usage
Backdrop Usage
Backdrop AppBar Usage
SearchBox Usage
Box Controller
Body Builder
showSlidingBox Method

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`.

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();
                    },
                  ),
                ),
              ),
            ]
        ),
      ),
    ),
  );
}

Using the `SearchBox`

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.

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,
      ),
    ),
  );
}

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 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 = 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.

@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.

@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"),
      ),
    ),
  );
}

flutter_sliding_box 1.1.5
flutter_sliding_box: ^1.1.5 copied to clipboard

Metadata

SlidingBox for Flutter #

Demo #

Simple #

Map #

Music player #

Messenger #

Getting Started #

Installation #

Usage #

Custom Usage #

Backdrop Usage #

Using the `Backdrop`

Backdrop AppBar Usage #

Using the `BackdropAppBar`

Box Controller #

Using the `BoxController`

Body Builder #

Using the `bodyBuilder`

showSlidingBox Method #

Using the `showSlidingBox()` method

← Metadata

Publisher

Metadata

Documentation

License

Dependencies

More

flutter_sliding_box 1.1.5 flutter_sliding_box: ^1.1.5 copied to clipboard

Metadata

SlidingBox for Flutter #

Demo #

Simple #

Map #

Music player #

Share #

Messenger #

Getting Started #

Installation #

Usage #

Custom Usage #

Backdrop Usage #

Using the Backdrop

Backdrop AppBar Usage #

Using the BackdropAppBar

SearchBox Usage #

Using the SearchBox

Box Controller #

Using the BoxController

Body Builder #

Using the bodyBuilder

showSlidingBox Method #

Using the showSlidingBox() method

← Metadata

Publisher

Metadata

Documentation

License

Dependencies

More

flutter_sliding_box 1.1.5
flutter_sliding_box: ^1.1.5 copied to clipboard

Using the `Backdrop`

Using the `BackdropAppBar`

Using the `SearchBox`

Using the `BoxController`

Using the `bodyBuilder`

Using the `showSlidingBox()` method