bottom_sheet_scaffold

Description:

bottom sheet scaffold

bottom_sheet_scaffold #
Slide your bottom sheet by sliding the body of the scaffold!. Very simple and customizable bottom sheet implementation.

Features #

Easy usage
Determine the height of the bottom sheet by sliding the body of the scaffold
Draggable bottom sheet body
Animated Opacity
Fully customizable
Listen the status of bottom sheet by using BottomSheetBuilder
No need to set any header to slide bottom sheet





Scaffold Swipping







Header Swipping







Gradient Opacity







Fixed height







Custom









Usage #
Change your Scaffold into BottomSheetScaffold.
BottomSheetScaffold(
draggableBody: true,
dismissOnClick: true,
barrierColor: Colors.black54,
bottomSheet: DraggableBottomSheet(
animationDuration: Duration(milliseconds: 200),
body: BottomSheetBody(),
header: BottomSheetHeader(),//header is not required
),
appBar: AppBar(
title: Text(widget.title),
),
body: ScaffoldBody(),
)
copied to clipboard
You can customize OnWillPop of BottomSheet #
BottomSheetScaffold(
draggableBody: true,
dismissOnClick: true,
onWillPop: (() async {
if (BottomSheetPanel.isOpen) {
BottomSheetPanel.close();
return false;
} else {
return true;
}
}),
barrierColor: Colors.black54,
bottomSheet: DraggableBottomSheet(
animationDuration: Duration(milliseconds: 200),
body: BottomSheetBody(),
header: BottomSheetHeader(),//header is not required
),
appBar: AppBar(
title: Text(widget.title),
),
body: ScaffoldBody(),
)
copied to clipboard
Barrier not being displayed in scaffold to be used inside #
If you use Scaffold inside BottomSheetScaffold, you should wrap the body of the Scaffold with BarrierViewer. This way you can display the barrier color you defined when the bottom sheet is opened
return BottomSheetScaffold(
bottomSheet: DraggableBottomSheet(
animationDuration: const Duration(milliseconds: 200),
body: Container(
width: double.infinity,
height: 500,
alignment: Alignment.center,
child: const Text(
"Bottom Sheet",
style: TextStyle(fontSize: 36, color: Colors.black),
)),
header: Container(
height: 60,
color: Colors.blue,
child: const Center(
child: Text(
"Drag me",
style: TextStyle(color: Colors.white),
)),
),
),
appBar: AppBar(
title: const Text(
"My AppBar",
),
),
body: Scaffold(
body: BarrierViewer(
child: Center(
child: Column(
copied to clipboard
DraggableBottomSheet #
DraggableBottomSheet(
{super.key,
this.maxHeight = 500,
this.minHeight = 0,
this.header,
this.animationDuration = const Duration(milliseconds: 200),
this.autoSwipped = true,
this.draggableBody = true,
this.gradientOpacity = true,
this.headerVisibilityOnTap = true,
this.backgroundColor = Colors.white60,
this.onHide,
this.radius = 30,
this.onShow,
required this.body})
copied to clipboard
BottomSheetPanel #
Open bottom sheet
BottomSheetPanel.open();
copied to clipboard
Close bottom sheet
BottomSheetPanel.close();
copied to clipboard
Update height of bottom sheet
BottomSheetPanel.close();
copied to clipboard
Check if bottom sheet is opened
BottomSheetPanel.isOpen;
copied to clipboard
Check if bottom sheet is expanded
BottomSheetPanel.isExpanded;
copied to clipboard
Check if bottom sheet is collapsed
BottomSheetPanel.isCollapsed;
copied to clipboard
DraggableArea #
If you set the parameter "draggableBody" in DraggableBottomSheet to false, you will need the DraggableArea widget to scroll the bottom sheet.
DraggableBottomSheet(
draggableBody: false,
body: Column(
children: [
DraggableArea(
child: Container(
height: 80,
width: double.infinity,
color: Colors.blue,
alignment: Alignment.center,
child: const Text(
"Drag Me",
style: TextStyle(color: Colors.white),
),
),
),
Container(
height: 500,
color: Colors.red,
child: const Center(
child: Text(
"Bottom Sheet",
style: TextStyle(fontSize: 36, color: Colors.white),
)),
)
],
),
)
copied to clipboard
BottomSheetBuilder #
Use BottomSheetBuilder if you need to listen bottom sheet status to change something in your page.
BottomSheetBuilder(
builder: (status, context) {
return FloatingActionButton(
onPressed: () {
if (BottomSheetPanel.isExpanded) {
BottomSheetPanel.close();
} else {
BottomSheetPanel.open();
}
},
child: Icon(!status.isExpanded
? Icons.open_in_browser
: Icons.close_fullscreen),
);
},
)
copied to clipboard
Example #
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return BottomSheetScaffold(
bottomSheet: DraggableBottomSheet(
body: const Center(
child: Text(
"Bottom Sheet",
style: TextStyle(fontSize: 36, color: Colors.black),
)),
header: Container(
height: 60,
color: Colors.blue,
child: const Center(
child: Text(
"Drag me",
style: TextStyle(color: Colors.white),
)),
),
),
appBar: AppBar(
title: const Text(
"My AppBar",
),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
const SizedBox(
height: 100,
),
BottomSheetBuilder(
builder: (status, context) {
return MaterialButton(
color: Colors.blue,
onPressed: () {
if (BottomSheetPanel.isExpanded) {
BottomSheetPanel.close();
} else {
BottomSheetPanel.open();
}
},
child: Icon(!status.isExpanded
? Icons.open_in_browser
: Icons.close_fullscreen),
);
},
),
const Text(
'Body of scaffold',
),
],
),
),
);
}
}
copied to clipboard