flutterdartnavigation-drawerflutter-drawer

How to hide admin menu from user Flutter navigation drawer


I'm trying to hide the admin menu from normal users. Storing login response and role in shared preferences, where isAdmin variable has boolean data, where its stored login provider.

Please find the code which I tried:

[
  buildMenuItem(
    text: 'Home',
    icon: Icons.home,
    onClicked: () => selectedItem(context, 0),
  ),
  const SizedBox(height: 16),
  buildMenuItem(
    text: 'Schedule Parking',
    icon: Icons.update,
    onClicked: () => selectedItem(context, 1),
  ),
  const SizedBox(height: 16),
  buildMenuItem(
    text: 'Status',
    icon: Icons.info,
    onClicked: () => selectedItem(context, 2),
  ),
  const SizedBox(height: 24),
  const Divider(color: Colors.white70),
  const Text(
    'ADMIN',
    style: TextStyle(
        color: Colors.green, fontWeight: FontWeight.bold),
  ),
  const SizedBox(height: 10),
  buildMenuItem(
    text: 'Request',
    icon: Icons.read_more,
    onClicked: () => selectedItem(context, 4),
  ),
  const Divider(color: Colors.white70),
  const SizedBox(height: 24),
  buildMenuItem(
    text: 'Logout',
    icon: Icons.logout,
    onClicked: () => selectedItem(context, 3),
  ),
]

Screenshot for references: screenshot

Please help me with any solution.


Solution

  • You can add an if that checks the isAdmin variable and concatenate the itens from your list of widgets, here's an example based on your code:

    [
                      buildMenuItem(
                        text: 'Home',
                        icon: Icons.home,
                        onClicked: () => selectedItem(context, 0),
                      ),
                      const SizedBox(height: 16),
                      buildMenuItem(
                        text: 'Schedule Parking',
                        icon: Icons.update,
                        onClicked: () => selectedItem(context, 1),
                      ),
                      const SizedBox(height: 16),
                      buildMenuItem(
                        text: 'Status',
                        icon: Icons.info,
                        onClicked: () => selectedItem(context, 2),
                      ),
                      if(isAdmin) ...[
                        const SizedBox(height: 24),
                        const Divider(color: Colors.white70),
                        const Text(
                        'ADMIN',
                        style: TextStyle(
                            color: Colors.green, fontWeight: FontWeight.bold),
                        ),
                      ],
                      const SizedBox(height: 10),
                      buildMenuItem(
                        text: 'Request',
                        icon: Icons.read_more,
                        onClicked: () => selectedItem(context, 4),
                      ),
                      const Divider(color: Colors.white70),
                      const SizedBox(height: 24),
                      buildMenuItem(
                        text: 'Logout',
                        icon: Icons.logout,
                        onClicked: () => selectedItem(context, 3),
                      ),
                    ]
    

    The ... operator will insert the element of the sublist only if the variable isAdmin is true in this example.