Draggable Scrollable Sheet becomes unscrollable when we set it's child to a column - flutter

Question

I have the following code for a DraggableScrollableSheet in Flutter.
DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35),
),
child: Container(
color: ColorData.secondaryColor,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
child: Column(
children: [
Container(
height: 3,
width: 30,
decoration: BoxDecoration(
color: ColorData.primaryDividerColor,
borderRadius: BorderRadius.circular(16),
),
),
const SizedBox(
height: 18,
),
SizedBox(
width: _screenWidth,
child: const Text(
'Exchange Houses',
textAlign: TextAlign.start,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
const SizedBox(
height: 8,
),
SizedBox(
width: _screenWidth,
child: const Text(
'(Tap to select)',
textAlign: TextAlign.start,
),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView.separated(
itemCount: 5,
itemBuilder: (context, index) => const ExchangeHouseCard(
id: 1,
houseName: 'Test House',
houseContactNumber: '[phone]',
houseUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
houseImageUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
houseLatitude: 7.0012345,
houseLongitude: 20.301456,
userCurrencyName: 'USD',
convertingCurrencyName: 'LKR',
exchangeRate: 200.00,
change: 500.00,
changeInConvertingCurrency: 1200.00,
),
separatorBuilder: (context, index) => const SizedBox(
height: 5,
),
),
),
],
),
),
),
);
},
),
In the above code, I am trying to make my DraggableScrollableSheet be able be to dragged upwards or collapsed downwards when user drags the sheet. No matter how I try, I can not drag or collapse the sheet. It stays where it is.
Furthermore, something interesting happens if I set controller property of my ListView to the scrollController I get from the builder method in DraggableScrollableSheet. In this case, the DraggableScrollableSheet becomes draggable if we try to scroll the ListView.
But I want the DraggableScrollableSheet to be draggable if I drag from a general area of the sheet. How to implement this to the above DraggableScrollableSheet?
(I also tried wrapping the widget that is being returned inside the builder method with a ListView and setting controller property of the ListView to scrollController that I get from the builder method. But this also gives a render error. I could not find a way to fix this.)
Can someone please help?

Answer 1

You need to give isScrollControlled to true and set the height
showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) {
return DraggableScrollableSheet(
initialChildSize: 0.9,
maxChildSize: 0.9,
builder: (BuildContext context, ScrollController scrollController) {
return ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(35),
topRight: Radius.circular(35),
),
child: Container(
color: ColorData.secondaryColor,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10,
horizontal: 15,
),
child: Column(
children: [
Container(
height: 3,
width: 30,
decoration: BoxDecoration(
color: ColorData.primaryDividerColor,
borderRadius: BorderRadius.circular(16),
),
),
const SizedBox(
height: 18,
),
SizedBox(
width: _screenWidth,
child: const Text(
'Exchange Houses',
textAlign: TextAlign.start,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
const SizedBox(
height: 8,
),
SizedBox(
width: _screenWidth,
child: const Text(
'(Tap to select)',
textAlign: TextAlign.start,
),
),
const SizedBox(
height: 10,
),
Expanded(
child: ListView.separated(
itemCount: 5,
controller: scrollController,
itemBuilder: (context, index) =>
const ExchangeHouseCard(
id: 1,
houseName: 'Test House',
houseContactNumber: '[phone]',
houseUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
houseImageUrl:
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQrLlwS2ymz1oFL10jTbD7QMcCffrrAzUAbMA&usqp=CAU',
houseLatitude: 7.0012345,
houseLongitude: 20.301456,
userCurrencyName: 'USD',
convertingCurrencyName: 'LKR',
exchangeRate: 200.00,
change: 500.00,
changeInConvertingCurrency: 1200.00,
),
separatorBuilder: (context, index) =>
const SizedBox(
height: 5,
),
),
),
],
),
),
),
);
},
);
});