Flutter – Sliding Up Panel

SlidingUpPanel is the Slide Up Panel from the Bottom widget in the flutter. In many applications, we need to show Additional data using the bottom panel. That’s why in many Applications Slide Up panel is used. A draggable Flutter widget that makes implementing a SlidingUpPanel much easier! Based on the Material Design bottom sheet component, this widget works on both Android & iOS. A sample video is given below to get an idea about what we are going to do in this article.

Installing

Adding dependency into the pubspec.yaml file.

Note: Don’t forget to get the packages. 

Code or Syntax 

Dart

SlidingUpPanel(
  body :      // Widget(Column,Row,Center..)
  collapsed : // Widget(Column,Row,Center..)
  panel :     // Widget(Column,Row,Center..)
  )

Some Properties of SlidingUpPanel 

Properties	Description
panel	The Widget that slides into view.
collapsed	The Widget displayed overtop the panel when collapsed.
body	The Widget that lies underneath the sliding panel. Widget automatically sizes itself to fill the screen.
color	The color to fill the background of the sliding panel sheet.
backdropEnabled	If non-null, shows a darkening shadow over the body as the panel slides open.
maxHeight	The height of the sliding panel when fully collapsed.
maxHeight	The height of the sliding panel when fully open.
backdropColor	Shows a darkening shadow of this Color over the body as the panel slides open.
controller	If non-null, this can be used to control the state of the panel.
border	A border to draw around the sliding panel sheet.

A SlidingUpPanel without collapsed

Add panel property with a centered Text widget.

Dart

@override
Widget build(BuildContext context) {
  return Scaffold(    // returning Scaffold
    appBar: AppBar(   // appbar with title
      title: Text("SlidingUpPanelExample"),
    ),
    // in body we have SlidingUpPanel,
    // panel has center text
    body: SlidingUpPanel(
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
      // this is main body now,
      // replace by the scaffold body.
      body: Center(
        child: Text("This is the Widget behind the sliding panel"),
      ),
    ),
  );
}

Output 

panel without collapsed 

A SlidingUpPanel with panel and collapsed

Add the collapsed property as the container, and add a text widget.

Dart

@override
Widget build(BuildContext context) {
  return Scaffold(   // returning scaffold
    appBar: AppBar(  // appbar with title text.
      title: Text("SlidingUpPanelExample"),
    ),
    // In body we have a SlidingUpPanel,
    body: SlidingUpPanel(
      // panel with centered text
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
      // collapsed with container
      collapsed: Container(
        color: Colors.blueGrey,
        child: Center(
          child: Text(
            "This is the collapsed Widget",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
      // main body
      body: Center(
        child: Text("This is the Widget behind the sliding panel"),
      ),
    ),
  );
}

Output 

Panel with collapsed

Darkening the Body as the Panel Opens 

By making backgroundEnabled is true we can make the body dark when the panel opens.

Dart

@override
Widget build(BuildContext context){
  return Scaffold (  // returning Scaffold.
    appBar: AppBar(  // appbar with title
     title: Text("SlidingUpPanelExample"),
      body: SlidingUpPanel(
      // this is true so that background
      // will be dark when panel open
      backdropEnabled: true,
      // panel with centered text
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
        // this is the body
        body:  Center(
          child: Text("This is the Widget behind the sliding panel"),
        ),
      ),
    ),
  );
}

Output 

Darken background when panel swipe up

Rounding the Borders 

This can be achieved by providing the radius property as circular.

Dart

@override
Widget build(BuildContext context) {
  // making radius circular so that panel
  // and collapsed should be circular in border.
  BorderRadiusGeometry radius = BorderRadius.only(
    topLeft: Radius.circular(24.0),
    topRight: Radius.circular(24.0),
  );

  // scaffold with appbar
  return Scaffold(
    appBar: AppBar(
      title: Text("SlidingUpPanelExample"),
    ),
    // SlidingUpPanel with panel and collapsed
    body: SlidingUpPanel(
      panel: Center(
        child: Text("This is the sliding Widget"),
      ),
      collapsed: Container(
        decoration: BoxDecoration(
          color: Colors.blueGrey,
          // changing radius that we define above
          borderRadius:  radius
        ),
        // collapsed text
        child: Center(
          child: Text(
            "This is the collapsed Widget",
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
      // main body or content behind the panel
      body: Center(
        child: Text("This is the Widget behind the sliding panel"),
      ),
      borderRadius: radius,
    ),
  );
}

Output 

A sample example for Floating the panel

Dart

import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
// main app
void main() {
  runApp(SlideUp());
}

class SlideUp extends StatelessWidget {
  SlideUp({Key? key}) : super(key: key);
  // defining border radius
  BorderRadius radius = const BorderRadius.only(
    topLeft: Radius.circular(24),
    topRight: Radius.circular(24),
  );
  @override
  Widget build(BuildContext context) {
    return MaterialApp(   // MaterialApp
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(       // scaffold
        appBar: AppBar(  // appbar with title text
          title: const Text("Sliding Up Panel"),
        ),
        body: SlidingUpPanel(
          // making false it does
          // not render outside
          renderPanelSheet: false,
          // panel
          panel:  Container(
    decoration: const BoxDecoration(
        color: Color.fromARGB(255, 253, 253, 253),
        borderRadius: BorderRadius.all(Radius.circular(24.0)),
        boxShadow: [
          BoxShadow(
            blurRadius: 20.0,
            color: Colors.grey,
          ),
        ]),
    margin: const EdgeInsets.all(24.0),
    child: const Center(
      child: Text("This is the SlidingUpPanel when open"),
    ),
  ),
          // collapsed
          collapsed:Container(
    decoration: const BoxDecoration(
      color: Colors.blueGrey,
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(24.0), topRight: Radius.circular(24.0)),
    ),
    margin: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
    child: const Center(
      child: Text(
        "This is the collapsed Widget",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ) ,
          body: const Center(
            child: Text(
                "This the widget behind the Sliding panel"),
          ),
        ),
      ),
    );
  }
}

Output