as you can see from the image below I have to display a side menu in some routes of my app, to do it I use the code below, as you can see from the image below this menu is opened as a drawer but when it is displayed at the top there is a white part that remains visible. How do I make sure that it is not displayed?

Image of app

Dart Code:

class SideMenuWidget extends StatelessWidget {
  final padding = EdgeInsets.symmetric(horizontal: 20);

  final nome, cognome, email;
  SideMenuWidget(this.nome, this.cognome, this.email);

  @override
  Widget build(BuildContext context) {
    final name = ''   nome   ' '   cognome;
    return Material(
        color: Colors.white,
        child: ListView(
          physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
          children: <Widget>[
            buildHeader(
              name: name,
              email: email,
              onClicked: () => Navigator.of(context).push(MaterialPageRoute(
                builder: (context) => LoginPage(),
              )),
            ),
            Container(
              padding: padding,
              child: Column(
                children: [
                  const SizedBox(height: 12),
                  buildMenuItem(
                    text: 'DashBoard',
                    icon: Icons.dashboard,
                    onClicked: () => selectedItem(context, 0),
                  ),
                  const SizedBox(height: 16),
                  buildMenuItem(
                    text: 'Libreria',
                    icon: Icons.book,
                    onClicked: () => selectedItem(context, 1),
                  ),
                  const SizedBox(height: 16),
                  buildMenuItem(
                    text: 'I miei libri',
                    icon: Icons.workspaces_outline,
                    onClicked: () => selectedItem(context, 2),
                  ),
                  const SizedBox(height: 16),
                  buildMenuItem(
                    text: 'Marketplace',
                    icon: Icons.book,
                    onClicked: () => selectedItem(context, 3),
                  ),
                  //Divider(color: Colors.white70),
                  const SizedBox(height: 16),
                  buildMenuItem(
                    text: 'Messaggi',
                    icon: Icons.message,
                    onClicked: () => selectedItem(context, 4),
                  ),
                  const SizedBox(height: 16),
                  buildMenuItem(
                    text: 'Profilo',
                    icon: Icons.supervised_user_circle_rounded,
                    onClicked: () => selectedItem(context, 5),
                  ),
                  const SizedBox(height: 100),
                ],
              ),
            ),
          ],
        
      ),
    );
  }

  Widget buildHeader({
    required String name,
    required String email,
    required VoidCallback onClicked,
  }) =>
      InkWell(
        onTap: onClicked,
        child: Container(
        
          color: '#448BB5'.toColor(),
          padding: padding.add(EdgeInsets.symmetric(vertical: 40)),
          child: Row(
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    name,
                    style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    email,
                    style: TextStyle(fontSize: 14, color: Colors.white),
                  ),
                ],
              ),
            ],
          ),
        ),
      );

  Widget buildMenuItem({
    required String text,
    required IconData icon,
    VoidCallback? onClicked,
  }) {
    final hoverColor = Colors.white70;

    return ListTile(
      leading: Icon(icon, color: '#448BB5'.toColor()),
      title: Text(text, style: TextStyle(color: "#448BB5".toColor())),
      hoverColor: hoverColor,
      onTap: onClicked,
    );
  }

  void selectedItem(BuildContext context, int index) {
    Navigator.of(context).pop();

    switch (index) {
      case 0:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => DashBoardPage(),
        ));
        break;
      case 1:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => LibrerieHomeView(),
        ));
        break;
      case 2:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => LibrerieHomeView(),
        ));
        break;
      case 4:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => MessagePage(),
        ));
        break;
      case 3:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => MarketPlacePage(),
        ));
        break;
      case 5:
        Navigator.of(context).push(MaterialPageRoute(
          builder: (context) => ProfiloPage(),
        ));
        break;
    }
  }
}

CodePudding user response：

Wrap your Scaffold() with SafeArea(). Using this flutter will know that you don't want to overlap your widgets to the mobile's status bar.

return SafeArea(
   child: Scaffold(
      drawer: YourDrawer(),
      body:YourPage(),
   ),
);