### Run Example

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Navigate to the example directory and run the Flutter application with the release flag to see the SlidingBox in action on a device or simulator.

```bash
cd example/
flutter run --release
```

--------------------------------

### Installation

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Instructions for adding the flutter_sliding_box package to your Flutter project's pubspec.yaml file and importing it into your Dart code.

```yaml
dependencies:
  flutter_sliding_box: ^1.1.5
```

```dart
import 'package:flutter_sliding_box/flutter_sliding_box.dart';
```

--------------------------------

### Simple Sliding Box Example

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Demonstrates the basic implementation of the SlidingBox widget, showcasing both light and dark themes for a simple sliding panel.

```dart
// Source Link: example/lib/main.dart
```

--------------------------------

### Map Sliding Box Example

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Illustrates how to integrate the SlidingBox widget within a map-related context, providing examples for both light and dark modes.

```dart
// Source Link: example/lib/map_screen.dart
```

--------------------------------

### SlidingBox with BackdropAppBar and SearchBox Example

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Demonstrates the implementation of SlidingBox with a customized BackdropAppBar, including a SearchBox and an IconButton to trigger the search functionality.

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

--------------------------------

### SlidingBox with Backdrop Example

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

This Dart code snippet demonstrates how to use the SlidingBox widget with a custom Backdrop. It includes initializing a BoxController, setting min/max heights, defining the sliding box body, and configuring the Backdrop with a color and a BackdropAppBar.

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

--------------------------------

### SlidingBox with Backdrop Overlay

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Example demonstrating how to use the SlidingBox with a backdrop that includes an overlay. The `overlay` property is set to `true`, and `overlayOpacity` can be adjusted to control the transparency of the overlay. The backdrop color is set to grey.

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

--------------------------------

### Search Icon Button

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

An example of an IconButton placed in the app bar actions to trigger the display of the search box. Tapping this button clears the text field and calls showSearchBox on the controller.

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

--------------------------------

### SlidingBox with Custom Width and Backdrop Width

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

This example shows how to customize the width of both the SlidingBox and its backdrop. The `width` property of SlidingBox is set to the screen width minus 50 pixels, while the backdrop's width is set to the screen width minus 100 pixels. It also demonstrates setting `minHeight` and `maxHeight` for the sliding box.

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

--------------------------------

### Basic SlidingBox Initialization with BoxController

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Demonstrates how to initialize a SlidingBox widget and attach a BoxController for manual state management. This includes setting minimum and maximum heights.

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

--------------------------------

### Basic SlidingBox Usage

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Demonstrates the fundamental implementation of the SlidingBox widget, setting a main body content and a backdrop. This is the recommended way to use the widget as a root element.

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

--------------------------------

### showSlidingBox Method

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Demonstrates the usage of the `showSlidingBox()` method to easily display a `SlidingBox` widget. This method takes the build context and the `SlidingBox` widget as parameters, providing a simple way to present the sliding box UI.

```dart
import 'package:flutter/material.dart';
import 'package:sliding_box/sliding_box.dart';

class ShowSlidingBoxExample extends StatelessWidget {
  const ShowSlidingBoxExample({super.key});

  @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),), // Changed color to black for visibility
                  ),
                )
            );
          },
          child: const Text("Show SlidingBox"),
        ),
      ),
    );
  }
}

```

--------------------------------

### SlidingBox Widget Usage

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Demonstrates the basic implementation of the SlidingBox widget in a Flutter application. It shows how to set minimum and maximum heights, choose a box style (sheet, shadow, or none), and define the content for both the sliding box body and its backdrop.

```dart
import 'package:flutter/material.dart';
import 'package:sliding_box/sliding_box.dart';

// ... inside a StatefulWidget or StatelessWidget build method

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

--------------------------------

### BoxController API Reference

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Provides a detailed reference for the BoxController's properties and methods, enabling programmatic control over the SlidingBox widget's state and appearance.

```APIDOC
BoxController:
  Properties:
    isAttached: bool - Determines if the boxController is attached to a SlidingBox instance. Must be true before using other BoxController functions.
    isBoxOpen: bool - Returns true if the box is open.
    isBoxClosed: bool - Returns true if the box is closed.
    isBoxVisible: bool - Returns true if the box is visible.
    isSearchBoxVisible: bool - Returns true if the search box is visible.
    getPosition: double - Returns the box's position as a value between 0.0 and 1.0.
    minHeight: double - Returns the box's minimum height.
    maxHeight: double - Returns the box's maximum height.
    boxWidth: double - Returns the box's width.
    backdropWidth: double - Returns the backdrop's width.

  Methods:
    openBox(): Future<void> - Opens the sliding box with animation to maxHeight.
    closeBox(): Future<void> - Closes the sliding box with animation to minHeight.
    showBox(): Future<void> - Shows the sliding box (makes it visible).
    hideBox(): Future<void> - Hides the sliding box (makes it invisible).
    showSearchBox(): Future<void> - Shows the search box (makes it visible).
    hideSearchBox(): Future<void> - Hides the search box (makes it invisible).
    setPosition(double position): Future<void> - Sets the sliding box position with animation (value between 0.0 and 1.0).
    setSearchBody(Widget body): Future<void> - Sets the search box's body content.
```

--------------------------------

### BackdropAppBar Properties

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Defines the properties for customizing the BackdropAppBar, including title, leading icon, search box integration, and action widgets.

```APIDOC
BackdropAppBar:
  title: Widget
    - A Widget placed on the top-left of the backdrop.
  leading: Icon
    - An Icon Widget placed to the left of the title.
  searchBox: SearchBox
    - A search box widget displayed above the backdrop. Requires an IconButton in 'actions' to trigger showSearchBox() on the BoxController.
  actions: List<Widget>
    - A list of Widgets placed on the top-right of the backdrop.
```

--------------------------------

### Backdrop Widget Properties

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

This section details the properties available for the Backdrop widget. It covers data types, descriptions, and usage for each property, such as color, width, fading, moving, overlay, overlayOpacity, backgroundGradient, body, and appBar.

```APIDOC
Backdrop Properties:

color: Color
  - The color to fill the background of the backdrop.

width: double
  - The width of the backdrop body.

fading: bool
  - If true, the backdrop body fades out when the sliding box is opened.

moving: bool
  - If true, the backdrop body moves up when the sliding box is opened.

overlay: bool
  - If true, a dark layer is displayed above the backdrop and behind the sliding box when it is opened.

overlayOpacity: double
  - The 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 the sliding box.

appBar: BackdropAppBar
  - The appBar to display at the top of the backdrop.
```

--------------------------------

### Search Box Integration

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Shows how to integrate a search box within the sliding box's app bar. It includes a text field for input and a button to trigger hiding the search box and closing the main box.

```dart
SearchBox(
  controller: textEditingController,
  body: Center(
    child: MaterialButton(
      child: Text("Hide SearchBox"),
      onPressed: () {
        boxController.hideSearchBox();
        boxController.closeBox();
      },
      color: Colors.blueGrey,
      textColor: Colors.white,
    ),
  ),
  draggableBody: true,
)
```

--------------------------------

### Sliding Box Backdrop Configuration

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

The `backdrop` property allows you to define a Widget that will be displayed behind the sliding box. This widget is filled with the `Backdrop` widget, enabling custom background content.

```dart
backdrop: Backdrop(
  child: Container(color: Colors.blueGrey),
)
```

--------------------------------

### Sliding Box Callbacks

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

These callbacks are triggered by various states and actions of the sliding box. `onBoxSlide` provides the current position (0.0 to 1.0), while `onBoxOpen`, `onBoxClose`, `onBoxShow`, and `onBoxHide` are triggered on specific state changes. `onSearchBoxShow` and `onSearchBoxHide` relate to a search box's visibility.

```dart
onBoxSlide: (double position) => print('Box slide position: $position'),
onBoxOpen: () => print('Box opened'),
onBoxClose: () => print('Box closed'),
onBoxShow: () => print('Box shown'),
onBoxHide: () => print('Box hidden'),
onSearchBoxShow: () => print('Search box shown'),
onSearchBoxHide: () => print('Search box hidden')
```

--------------------------------

### Sliding Box Control Buttons

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Demonstrates the use of MaterialButtons to control the state of the sliding box. These buttons trigger methods like openBox, closeBox, showBox, hideBox, showSearchBox, and hideSearchBox on a boxController instance.

```dart
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,
)
```

--------------------------------

### Flutter Sliding Box Properties

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Defines the properties for customizing the Flutter Sliding Box widget. These properties control the content, dimensions, appearance, and interaction behavior of the sliding box.

```APIDOC
SlidingBox:
  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): Controls the state of the sliding box and search box.
  collapsed(bool): If 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): The 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): The color to fill the background of the sliding box.
  borderRadius(BorderRadius): Rounds the corners of the sliding box.
  style(BoxStyle): Styles of the sliding box, including shadow, sheet, and none.
  physics(ScrollPhysics): Determines how the scroll view continues to animate after the user stops dragging.
  draggable(bool): Toggles the draggability of the sliding box. If false, the box cannot be dragged.
  draggableIcon(IconData): An Icon Widget placed on top of the box.
  draggableIconColor(Color): The color of the draggableIcon.
  draggableIconVisible(bool): If false, the draggableIcon hides. Use controller to open and close by taps.
  draggableIconBackColor(Color): The color to fill the background of the draggableIcon. The icon is positioned at the top of the box.
```

--------------------------------

### Sliding Box Animation Properties

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Configure the animation behavior of the sliding box. `animationCurve` determines the easing of the animation, and `animationDuration` sets the time it takes for the animation to complete.

```dart
animationCurve: Curves.easeInOut,
animationDuration: Duration(milliseconds: 500)
```

--------------------------------

### SlidingBox with bodyBuilder

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

Demonstrates how to use the `bodyBuilder` property of the `SlidingBox` widget to manage scroll behavior and control the box's position. The `bodyBuilder` receives a `ScrollController` and the current `pos`ition of the box, allowing for custom UI updates and scroll event handling.

```dart
import 'package:flutter/material.dart';
import 'package:sliding_box/sliding_box.dart';

class SlidingBoxWithBodyBuilder extends StatefulWidget {
  const SlidingBoxWithBodyBuilder({super.key});

  @override
  State<SlidingBoxWithBodyBuilder> createState() => _SlidingBoxWithBodyBuilderState();
}

class _SlidingBoxWithBodyBuilderState extends State<SlidingBoxWithBodyBuilder> {
  @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),), // Changed color to black for visibility
        ),
        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),
      ],
    );
  }
}

```

--------------------------------

### SlidingBox Widget Properties

Source: https://github.com/shirvanie/flutter_sliding_box/blob/master/README.md

This section details the properties available for customizing the SlidingBox widget. These properties control aspects such as the text field controller, leading icon, background color, input decoration, border radius, text styling, body content, and draggable behavior.

```dart
controller: TextEditingController
leading: Icon
color: Color
inputDecoration: InputDecoration
borderRadius: BorderRadius
style: TextStyle
body: Widget
draggableBody: bool
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.