skip to Main Content

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?

2

Answers


  1. MediaQuery.removePadding(
    context: context,
    removeTop: true,
    child: ListView(),
    )
    try this

    Login or Signup to reply.
  2. The empty space issue at the top when using a ListView.builder inside a drawer could be caused by the way the ListView is laid out inside the drawer. A Drawer adds its own padding by default which might cause the space you are currently seeing.

    To resolve this issue maybe you can try setting the padding of the ListView.builder to EdgeInsets.zero

    here is what i would suggest to modify your code to (keep in mind i am not claiming im correct i have only been learning in flutter for about 2 months. Maybe this works or maybe it does not work but this is my 2 cents to your question hopefully it helps)

    child: ListView.builder( padding: EdgeInsets.zero, // Remove the default padding shrinkWrap: true, physics: NeverScrollableScrollPhysics(), // Ensures the ListView doesn’t scroll within another scrollable widget itemCount: _searchResults.length, itemBuilder: (context, index) { return Container( margin: EdgeInsets.symmetric(vertical: 4.0), decoration: BoxDecoration( color: Colors.blueGrey, borderRadius: BorderRadius.circular(8), border: Border.all(color: Colors.blueGrey), ), child: ListTile( title: Text( _searchResults[index], style: TextStyle(color: Colors.white), ), onTap: () { // Handle tap }, ), ); }, ),

    IF the issue persists maybe try wrapping the ListView.builder inside a flexible OR expanded widget that might help manage layout constraints better within the drawer. Hope this solves your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search