Flutter - Exception Caught by multiple widgets - flutter

Question

Hi I'm trying to add a drawer to my scaffold with the help of https://flutter.dev/docs/cookbook/design/drawer
And so far I'm getting multiple errors when I try to use it (and found 2, I don't know if there is more).
Code:
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: Drawer(
child: Row(
children: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: () {}),
ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text(
"What's up?",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 30),
),
decoration: BoxDecoration(color: Color(0xff171719)),
),
ListTile(
title: Text(
"Change Theme",
style: TextStyle(fontSize: 24),
),
// ignore: todo
onTap: () {}, //TODO add dark mode
),
ListTile(
title: Text(
"Sign Out",
style: TextStyle(fontSize: 24),
),
onTap: () {
AuthMethods().signOut().then(
(s) {
Navigator.pushReplacement(context,
MaterialPageRoute(builder: (context) => SignIn()));
Navigator.pop(context);
},
);
// ignore: todo
}, //TODO sign out
),
],
),
],
),
),
Exception caught by gesture:
Exception caught by rendering library:

Answer 1

I couldn’t reproduce it on my end, but this usually means that there’s a widget whose viewport doesn’t have the dimensions established.
This generally happens when you add a ListView directly to a Row or Column. Y would suggest wrapping your ListView with an Expanded widget (or a Container).

Answer 2

You should put your ListView inside a Widget that will constraint the ListView vertically, such as Expanded:
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
void main() {
runApp(
MaterialApp(
title: 'Flutter Demo',
home: Scaffold(body: MyWidget()),
),
);
}
class MyWidget extends HookWidget {
#override
Widget build(BuildContext context) {
final _drawerKey = useState<GlobalKey<ScaffoldState>>(GlobalKey());
return Scaffold(
key: _drawerKey.value,
drawer: Drawer(
child: Row(
children: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: () {}),
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text(
"What's up?",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 30),
),
decoration: BoxDecoration(color: Color(0xff171719)),
),
ListTile(
title: Text(
"Change Theme",
style: TextStyle(fontSize: 24),
),
// ignore: todo
onTap: () {}, //TODO add dark mode
),
ListTile(
title: Text(
"Sign Out",
style: TextStyle(fontSize: 24),
),
onTap: () {
print('SIGN OUT');
}, //TODO sign out
),
],
),
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () => _drawerKey.value.currentState.openDrawer(),
),
);
}
}

Answer 3

Solution 1: Set ListView inside Expanded
Solution 2: ListView with the attribute: shrinkWrap: true,