How to create a DraggableScrollableSheet with showModelBottomSheet? - flutter

Question

I created with showModelBottomSheet with DraggableScrollableSheet(), But the problem is the there is no appBar for show some text while dragging, ie, the SingleChildsSrollView() will move up and down while dragging.
*bottomsheet(context) {
Size size = MediaQuery.of(context).size;
return showModalBottomSheet(
backgroundColor: Colors.white,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(13)),
),
context: context,
builder: (BuildContext context) {
return Padding(
padding: const EdgeInsets.all(5),
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
foregroundColor: Colors.green,
backgroundColor: Colors.white,
elevation: 1,
shadowColor: Colors.grey.shade100,
automaticallyImplyLeading: false,
title: const Text('Connect with Reconnect'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(
25,
),
child: Container(
padding: const EdgeInsets.only(
left: 15,
right: 15,
top: 15,
),
height: size.height,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(13),
boxShadow: const [
BoxShadow(blurRadius: 2, color: Colors.grey),
],
),
child: Column(children: [
TextField(
cursorColor: Colors.green,
decoration: InputDecoration(
label: const Text('Name'),
labelStyle: TextStyle(color: Colors.grey.shade500),
icon: const Icon(
FontAwesomeIcons.user,
color: Color(0xff453e3d),
size: 22,
),
border: InputBorder.none,
),
),
Container(
width: 315,
height: 1,
margin: const EdgeInsets.only(top: 3, bottom: 3),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(100),
),
),
TextField(
cursorColor: Colors.green,
decoration: InputDecoration(
label: const Text('Email'),
labelStyle: TextStyle(color: Colors.grey.shade500),
icon: const Icon(
FontAwesomeIcons.envelope,
color: Color(0xff453e3d),
size: 22,
),
border: InputBorder.none,
),
),
Container(
width: 315,
height: 1,
margin: const EdgeInsets.only(top: 3, bottom: 3),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(100),
),
),
TextField(
cursorColor: Colors.green,
decoration: InputDecoration(
label: const Text('Phone Number'),
labelStyle: TextStyle(color: Colors.grey.shade500),
icon: const Icon(
FontAwesomeIcons.mobileAlt,
color: Color(0xff453e3d),
size: 22,
),
border: InputBorder.none,
),
),
Container(
width: 315,
height: 1,
margin: const EdgeInsets.only(top: 3, bottom: 3),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(100),
),
),
Container(
margin: const EdgeInsets.only(top: 10),
height: 25,
alignment: Alignment.bottomLeft,
child: Row(
children: [
const Icon(
FontAwesomeIcons.car,
color: Color(0xff453e3d),
),
const SizedBox(
width: 15,
),
Text(
'Services',
style: TextStyle(
color: Colors.grey.shade500, fontSize: 16),
),
],
),
),
]),
),
),
),
),
);
});
}*
I need a bar on top of the singlechildscrollview, I tried with column instead, but no result.

Answer 1

The Problem will solve by the following code!
body: Center(
child: Column(
children: [
const SizedBox(
height: 400,
),
ElevatedButton(
onPressed: () =>
//The showModelBottomSheet Will push a sheet to our page for show widgets and actions
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) =>
//The DraggableScrollableSeet will drag top to bottom or vise versa with respect to user interaction.
DraggableScrollableSheet(
initialChildSize: .6,
maxChildSize: .9,
minChildSize: .2,
builder: (context, controller) =>
//The customsheet method will return a widget with a child CustoomScrollView to Drag our DraggableScrollableSheet.
customSheet(context, controller),
),
),
child: const Text('clickme'),
),
],
),
),
//customSheet body
Widget customSheet(BuildContext context, ScrollController controller) {
return Container(
alignment: Alignment.bottomLeft,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
// While use the CustomScrollView have an SliverAppBar for set our bar to constant, ie, the appBar will not move while dragging
child: CustomScrollView(
controller: controller,
slivers: [
SliverAppBar(
shadowColor: Colors.grey.shade100,
elevation: 1,
pinned: true,
backgroundColor: Colors.white,
automaticallyImplyLeading: false,
title: Container(
margin: const EdgeInsets.only(bottom: 45),
width: 60,
height: 4,
color: Colors.grey.shade300),
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.grey.shade200),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
),
),
),
SliverFillRemaining(
hasScrollBody: false,
child: Column(
children: [
for (int i = 0; i < 10; i++)
Container(
width: 100,
height: 100,
color: Colors.green[i * 100],
),
],
),
)
],
),
);
}
Problem: The above code has a problem with an exit from the DraggableScrollableSheet(),
this is because if we use a GestureDetecter instead of DraggableScrollableSheet(), the child will pop by the following code
GestureDetector(onTap: ()=>Navigator.of(context).pop(),behavior: HitTestBehavior.opaque,
child: DraggableScrollableSheet(
initialChildSize: .6,
maxChildSize: .9,
minChildSize: .2,
builder: (context, controller) =>
customSheet(context, controller),
),
),
But we cannot pop the sheet with tapped by outside of the DraggableScrollabelSheet().
Note: the HitTestBehaviour.opaque will pop the sheet but if we tap anywhere in the Scaffold.
Thank You for following me up and If you have the solution, Please ping me #sureshm2suresh#gmail.com