[Flutter] Why do i have empty space in my ListView when i put it in a drawer but not when its...

In my Flutter project i wanted to build a textfield for searching up usernames. I have it in a drawer and the search and everything works fine. I wanted to display the found usernames inside a ListView so i used a Listview.builder.
The problem i have is that the resulting list has empty space up top but only when i put it in a Drawer. I tested it in another view without a drawer, then theres no empty space but when i change it so that it is inside a drawer, the resultlist has empty space up top.

Heres my test class:


class Test extends StatelessWidget {
final List<String> entries = <String>['A', 'B', 'C'];
final List<int> colorCodes = <int>[600, 500, 100];
List<String> _searchResults = ["TestUser1", "TestUser2"]; // Die Liste der Suchergebnisse

@override
Widget build(BuildContext context) {
return Drawer(child: ListView(
padding: EdgeInsets.zero,
children: [
DrawerHeader(
decoration: BoxDecoration(
color: Color(0xFF2C2C2C),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'Quester',
style: TextStyle(
color: Colors.white,
fontSize: 28,
fontWeight: FontWeight.bold,
),
textAlign: TextAlign.center,
),
],
),
),
// Suchleiste mit Button
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: SearchController(),
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
hintText: 'Benutzernamen eingeben...',
hintStyle: TextStyle(color: Colors.white70),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.teal),
),
),
onSubmitted: (value) {
// Suchfunktion bei Enter auslösen
},
),
),
IconButton(
icon: Icon(Icons.search, color: Colors.white),
onPressed: () {
// Suchfunktion bei Button-Klick auslösen
},
),
],
),
),
// Dynamische Liste der Suchergebnisse
if (_searchResults.isNotEmpty)
Container(
decoration: BoxDecoration(
color: Colors.blueGrey.withOpacity(0.8), // Hellere graue Hintergrundfarbe
border: Border.all(color: Colors.blueGrey), // Rahmen um die gesamte Liste
borderRadius: BorderRadius.circular(10),
),
child: ListView.builder(
shrinkWrap: true,
itemCount: _searchResults.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.symmetric(vertical: 4.0),
decoration: BoxDecoration(
color: Colors.blueGrey, // Hellere graue Farbe für die Listeneinträge
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.blueGrey), // Rahmen um jeden Eintrag
),
child: ListTile(
title: Text(
_searchResults[index],
style: TextStyle(color: Colors.white),
),
onTap: () {

},
),
);
},
),
),
ListTile(
leading: Icon(Icons.add, color: Colors.white),
title: Text('Item 1', style: TextStyle(color: Colors.white)),
onTap: () {
// Aktion für Item 1
},
),
ListTile(
leading: Icon(Icons.add, color: Colors.white),
title: Text('Item 2', style: TextStyle(color: Colors.white)),
onTap: () {
// Aktion für Item 2
},
),
// Weitere Items hier hinzufügen
],
),
);
}
}


If u would change the "return Drawer..." to "return Scaffold..." then it doesnt have the empty space. Any ideas?

Continue reading...