i want to make something like below:
initial state of the bottom sheet
,
when dragging upward the bottomsheet
Expected behavior when i drag upward the bottomsheet, the content will be displayed like the second picture, and when the sheet reach the max heigh provided, only the list behind the title will be scrollable but the title and the white box above the title will be fixed at their place.
this how i set the modal sheet:
DraggableScrollableSheet(
initialChildSize: 0.05,
minChildSize: 0.05,
maxChildSize: 0.8,
builder: (BuildContext context, ScrollController scrollController){
return SingleChildScrollView(
controller: scrollController,
child: Padding(
padding: const EdgeInsets.only(top: 10),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.blueGrey,
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 2,
blurRadius: 7,
offset: const Offset(0, 3),
),
]
),
height: MediaQuery.of(context).size.height,
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
child: Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.white,
),
width: WidgetScreen.width(context, 70),
height: 7,
)
)
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const Text('My cars'),
IconButton(
color: Colors.black,
focusColor: Colors.red,
splashRadius: 20,
onPressed: (){},
icon: const Icon(
CupertinoIcons.add,
size: 15,
)
)
]
),
Expanded(
flex: 1,
child: ListView.builder(
controller: scrollController,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
)
]
),
),
)
);
}
)
the SingleChildScrollView allow me to make the DraggableScrollableSheet work fine cause the child of this one must be a list to have the drag behavior work.
What i got
when the sheet reach the max height provided, if i scroll inside the list, i got what i want, but if i scroll from the title bloc all the content is scrolling like bellow
NB I tried to find a package or using the modal sheet of flutter but all of them need an external trigger to display the bottom sheet like on click on something but i don't want it to behave this way.
PS
the WidgetScreen.width(context, 70) is some helper that i created so just replace it with some int value
