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
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.
@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
A SlidingUpPanel with panel and collapsed
Add the collapsed property as the container, and add a text widget.
@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
Darkening the Body as the Panel Opens
By making backgroundEnabled is true we can make the body dark when the panel opens.
@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
Rounding the Borders
This can be achieved by providing the radius property as circular.
@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
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" ),
),
),
),
);
}
} |