Flutter DraggableScrollableSheet not showing up on press of a button - flutter

Question

I want to use DraggableScrollableSheet widget on my application, when I use that like with below code, that can show without problem:
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('DraggableScrollableSheet'),
),
body: SizedBox.expand(
child: DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return Container(
color: Colors.blue[100],
child: ListView.builder(
controller: scrollController,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
);
},
),
),
);
}
}
but when i want to show that by pressing for example floatingActionButton that don't show
floatingActionButton: GestureDetector(
child: FloatingActionButton(
child: Icon(
Icons.add,
size: 35.0,
),
elevation: 5,
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.white,
onPressed: (){
SizedBox.expand(child: DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return Container(
color: Colors.blue[100],
child: ListView.builder(
controller: scrollController,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
);
},
));
},
),
),

Answer 1

If you want to use DraggableScrollableSheet inside showModalBottomSheet, you can simply call this function.
void _showSheet() {
showModalBottomSheet(
context: context,
isScrollControlled: true, // set this to true
builder: (_) {
return DraggableScrollableSheet(
expand: false,
builder: (_, controller) {
return Container(
color: Colors.blue[500],
child: ListView.builder(
controller: controller, // set this too
itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
),
);
},
);
},
);
}

Answer 2

If you want to do it with Animation, here is the solution.
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
AnimationController _controller;
Duration _duration = Duration(milliseconds: 500);
Tween<Offset> _tween = Tween(begin: Offset(0, 1), end: Offset(0, 0));
#override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: _duration);
}
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: GestureDetector(
child: FloatingActionButton(
child: AnimatedIcon(icon: AnimatedIcons.menu_close, progress: _controller),
elevation: 5,
backgroundColor: Colors.deepOrange,
foregroundColor: Colors.white,
onPressed: () async {
if (_controller.isDismissed)
_controller.forward();
else if (_controller.isCompleted)
_controller.reverse();
},
),
),
body: SizedBox.expand(
child: Stack(
children: <Widget>[
FlutterLogo(size: 500),
SizedBox.expand(
child: SlideTransition(
position: _tween.animate(_controller),
child: DraggableScrollableSheet(
builder: (BuildContext context, ScrollController scrollController) {
return Container(
color: Colors.blue[800],
child: ListView.builder(
controller: scrollController,
itemCount: 25,
itemBuilder: (BuildContext context, int index) {
return ListTile(title: Text('Item $index'));
},
),
);
},
),
),
),
],
),
),
);
}
}

Answer 3

If you want to show DraggableScrollableSheet as modal you can use material showModalBottomSheet method to wrap it. Your sheet will be shown as modal, and you do not have to include it in the widget tree. Please note that under the hood it's pushed as new Route to Navigator, with all its consequences.
onPressed: (){
showModalBottomSheet(
context: context,
isScrollControlled: true,
expand: false,
backgroundColor: Colors.transparent,
builder: (context) =>
DraggableScrollableSheet(
initialChildSize: 0.64,
minChildSize: 0.2,
maxChildSize: 1,
builder: (context, scrollController) {
return Container(
color: Colors.white,
child: ListView.builder(
controller: scrollController,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
itemCount: 20,
),
);
},
),
);
}