Search code examples
flutterdrawerlisttile

how to eliminate the white space between DrawerHeader and ListTile

how to remove the white space between DrawerHeader and ListTile

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';


class NavDrawer extends StatelessWidget {
  Map<int, String> myMap = {
    0: '主頁',
    1: '工作資訊',
    2: '個人資料',
    3: '關於我們',
    4: '救生員需知',
    5: '拯溺考試資訊',
    6: '登入',
    7: '登出',
    8: '設置',
    9: '意見',
  };

  final int selectedTileIndex;
  final Function(int) onTileTap;
  NavDrawer({required this.selectedTileIndex, required this.onTileTap});

  //check user login
  final bool signedIn = FirebaseAuth.instance.currentUser != null;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2R1n85q9_Brx6MlNSKHWFc49qwCFkYGKFsQt0x6uL&s'),
              ),
            ),
            child: Center( // Updated
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircleAvatar(
                    radius: 40,
                    backgroundImage: NetworkImage('https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&quality=85&auto=format&fit=max&s=a52bbe202f57ac0f5ff7f47166906403'),
                  ),
                  SizedBox(height: 10),
                  Text(
                    'name',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    'phone',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text(myMap[0]!),
            tileColor: selectedTileIndex == 0 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(0),
          ),
          ListTile(
            leading: Icon(Icons.work),
            title: Text(myMap[1]!),
            tileColor: selectedTileIndex == 1 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(1),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text(myMap[2]!),
            tileColor: selectedTileIndex == 2 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(2),
          ),
          ListTile(
            leading: Icon(Icons.info),
            title: Text(myMap[3]!),
            tileColor: selectedTileIndex == 3 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(3),
          ),
          ListTile(
            leading: Icon(Icons.warning),
            title: Text(myMap[4]!),
            tileColor: selectedTileIndex == 4 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(4),
          ),
          ListTile(
            leading: Icon(Icons.description),
            title: Text(myMap[5]!),
            tileColor: selectedTileIndex == 5 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(5),
          ),
          signedIn?
          ListTile(
            leading: Icon(Icons.logout),
            title: Text(myMap[7]!),
            onTap: () => onTileTap(7),
          )
              : ListTile(
            leading: Icon(Icons.login),
            title: Text(myMap[6]!),
            onTap: () => onTileTap(6),
          ),
          Expanded(
            child: Container(),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text(myMap[8]!),
            tileColor: selectedTileIndex == 8 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(8),
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text(myMap[9]!),
            tileColor: selectedTileIndex == 9 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(9),
          ),
        ],
      ),
    );
  }
}

enter image description here

Solution

  • There's property margin in DrawerHeader which value is by default `

    EdgeInsetsGeometry? margin = const EdgeInsets.only(bottom: 8)

    So, you've to just assign

    margin: EdgeInsets.zero,

    `Below is the updated code:

    class NavDrawer extends StatelessWidget {
  Map<int, String> myMap = {
    0: '主頁',
    1: '工作資訊',
    2: '個人資料',
    3: '關於我們',
    4: '救生員需知',
    5: '拯溺考試資訊',
    6: '登入',
    7: '登出',
    8: '設置',
    9: '意見',
  };

  final int selectedTileIndex;
  final Function(int) onTileTap;
  NavDrawer({required this.selectedTileIndex, required this.onTileTap});

  //check user login
  final bool signedIn = true;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            margin: EdgeInsets.zero,
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage(
                    'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS2R1n85q9_Brx6MlNSKHWFc49qwCFkYGKFsQt0x6uL&s'),
              ),
            ),
            child: Center(
              // Updated
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  CircleAvatar(
                    radius: 40,
                    backgroundImage: NetworkImage(
                        'https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&quality=85&auto=format&fit=max&s=a52bbe202f57ac0f5ff7f47166906403'),
                  ),
                  SizedBox(height: 10),
                  Text(
                    'name',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20,
                    ),
                  ),
                  SizedBox(height: 5),
                  Text(
                    'phone',
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 13,
                    ),
                  ),
                ],
              ),
            ),
          ),
          ListTile(
            leading: Icon(Icons.home),
            title: Text(myMap[0]!),
            tileColor:
                selectedTileIndex == 0 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(0),
          ),
          ListTile(
            leading: Icon(Icons.work),
            title: Text(myMap[1]!),
            tileColor:
                selectedTileIndex == 1 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(1),
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text(myMap[2]!),
            tileColor:
                selectedTileIndex == 2 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(2),
          ),
          ListTile(
            leading: Icon(Icons.info),
            title: Text(myMap[3]!),
            tileColor:
                selectedTileIndex == 3 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(3),
          ),
          ListTile(
            leading: Icon(Icons.warning),
            title: Text(myMap[4]!),
            tileColor:
                selectedTileIndex == 4 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(4),
          ),
          ListTile(
            leading: Icon(Icons.description),
            title: Text(myMap[5]!),
            tileColor:
                selectedTileIndex == 5 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(5),
          ),
          signedIn
              ? ListTile(
                  leading: Icon(Icons.logout),
                  title: Text(myMap[7]!),
                  onTap: () => onTileTap(7),
                )
              : ListTile(
                  leading: Icon(Icons.login),
                  title: Text(myMap[6]!),
                  onTap: () => onTileTap(6),
                ),
          Expanded(
            child: Container(),
          ),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text(myMap[8]!),
            tileColor:
                selectedTileIndex == 8 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(8),
          ),
          ListTile(
            leading: Icon(Icons.border_color),
            title: Text(myMap[9]!),
            tileColor:
                selectedTileIndex == 9 ? Colors.blue.withOpacity(0.5) : null,
            onTap: () => onTileTap(9),
          ),
        ],
      ),
    );
  }
}

    Check Online Your Code: Zapp.run

    Tip: Always make sure and check the properties before using any widget and specifically study that widget if you're facing any issue in #flutter