Flutter: Issue with drawer UI

Question

I am trying to create a left menu UI like below screenshot and I used drawer for this.

My Code:

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        appBar: MyAppBar(),
        backgroundColor: Colors.white,
        drawer: MenuDrawer(),
        body: HomeBody()
      ),
    );
  }

class MenuDrawer extends StatelessWidget {

  final List<MenuItems> MenuItemsList = [
    MenuItems(itemName: "option1", itemSource: Icons.home_outlined),
    MenuItems(itemName: "option2", itemSource: Icons.home_outlined),
    MenuItems(itemName: "option3", itemSource: Icons.home_outlined),
  ];

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Profile(),
                ),
              );
            },
            child: DrawerHeader(
              decoration: BoxDecoration(
                color: Color(0xff2799fa),
              ),
              child: Column(
                  children:[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        IconButton(
                          icon: const Icon(
                            Icons.clear,
                            color: Colors.white,
                            size: 25,
                          ),
                          onPressed: () {
                            Navigator.of(context).pop(); // Closes the drawer
                          },
                        ),
                      ],
                    ),
                    const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Center(
                          child: Icon(
                            Icons.account_circle,
                            color: Colors.white,
                            size: 60, // Set the color of the icon
                          ),
                        ),
                        SizedBox(width: 5.0),
                        Text(
                          'User Full Name',
                          style: TextStyle(
                              fontSize: 18.0,
                              color: Colors.white,
                              fontWeight: FontWeight.bold
                          ),
                        ),
                      ],
                    ),
                  ]
              ),
            ),
          ),
          // Add items
          SizedBox(
            height: 80,
            child: ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: MenuItemsList.length,
              itemBuilder: (BuildContext context, int index) {
                return MenuListUI(MenuItemsList[index]);
              },
            ),
          ),
        ],
      ),
    );
  }
}

Widget MenuListUI(MenuItems menuItems) {
  return Container(
    margin: EdgeInsets.fromLTRB(20, 10, 0, 10),
    child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Icon(
            menuItems.itemSource,
            color: const Color(0xff2799fa),
            size: 25, // Set the color of the icon
          ),
          SizedBox(width: 10.0),
          Text(
            menuItems.itemName,
            style: const TextStyle(
              fontSize: 18.0,
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
}

class MenuItems {
  final String itemName;
  final IconData itemSource;

  MenuItems({required this.itemName, required this.itemSource});
}

Current Screenshot:

I have 2 issues on this UI:

1. Need to reduce the the drawer header height and place the close icon on top right.
2. The options listview is not showing properly, it is not filled veritically, some other layout is hiding it

Update

Using a CustomDrawerHeader I reduced the height of the drawer header.

Updated Code:

@override
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: Colors.white,
      child: ListView(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              Navigator.of(context).pop();
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => Profile(),
                ),
              );
            },
            child: CustomDrawerHeader(),
          ),
          // Add items
          ListView.separated(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: MenuItemsList.length,
            itemBuilder: (BuildContext context, int index) {
              return MenuListUI(MenuItemsList[index]);
            },
            separatorBuilder: (context, index) => const Divider(height: 1, color: Color(0xffdaebff),),
          ),
        ],
      ),
    );
  }
}

class CustomDrawerHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Define your desired height for the custom DrawerHeader.
    final double customHeaderHeight = 150.0;

    return Container(
      height: customHeaderHeight,
      child: DrawerHeader(
        decoration: BoxDecoration(
          color: Color(0xff2799fa),
        ),
        child: Column(
            children:[
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  IconButton(
                    icon: const Icon(
                      Icons.clear,
                      color: Colors.white,
                      size: 25,
                    ),
                    onPressed: () {
                      Navigator.of(context).pop(); // Closes the drawer
                    },
                  ),
                ],
              ),
              Flexible(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Center(
                      child: Icon(
                        Icons.account_circle,
                        color: Colors.white,
                        size: 60, // Set the color of the icon
                      ),
                    ),
                    SizedBox(width: 5.0),
                    Text(
                      'Emery Blair',
                      style: TextStyle(
                          fontSize: 18.0,
                          color: Colors.white,
                          fontWeight: FontWeight.bold
                      ),
                    ),
                  ],
                ),
              ),
            ]
        ),
      ),
    );
  }
}

Current Screenshot:

But there is an alignment issue. The name part is not in the exact center and close option is not in the right top. So now I have 2 issues:

1. The above alignment issue.
2. The listview is filled up to the available items space, not filled to entire page. https://i.sstatic.net/FsUcA.jpg

Answer 1

Instead of this

SizedBox(
  height: 80,
  child: ListView.builder(
  scrollDirection: Axis.vertical,
  itemCount: MenuItemsList.length,
  itemBuilder: (BuildContext context, int index) {
  return MenuListUI(MenuItemsList[index]);
 },
),

Try this

ListView.builder(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    itemCount: MenuItemsList.length,
    physics: const NeverScrollableScrollPhysics(),
    itemBuilder: (BuildContext context, int index) {
    return MenuListUI(MenuItemsList[index]);
  },
 )