简体   繁体   中英

create a nav bar with statement - flutter

I want to create a nav bar in flutter, but if the user isAdmin or something else the nav bar will change and adapt to the usergroup. I copy paste thing with statement but I don't think it's a clean way to do it. If someone can help, thanks !

for now my file bottom_nav look like this (2 statements with one nav bar in each statement):

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

import 'package:sofora/shared/globals.dart' as globals;

class BottomNavBar extends StatelessWidget {
  BottomNavBar({super.key});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<Map<String, dynamic>>(
        future: globals.gUser,
        builder: (context, snapshot) {
          Map<String, dynamic> user = snapshot.data ?? {};
          print(user);


          if (user['canCreateUser'] == false) {
            // Si l'utilisateur n'a pas de droits supplémentaires.
            return BottomNavigationBar(
              items: const [
                BottomNavigationBarItem(
                  icon: Icon(
                    FontAwesomeIcons.house,
                    size: 20,
                  ),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(
                    FontAwesomeIcons.user,
                    size: 20,
                  ),
                  label: 'Profile',
                ),
              ],
              fixedColor: Colors.deepPurple[200],
              onTap: (int idx) {
                switch (idx) {
                  case 0:
                    break;
                  case 1:
                    Navigator.pushNamed(context, '/profile');
                    break;
                }
              },
            );
          } else if (user['canCreateUser'] == true) {
            // Si l'utilisateur a le droit de créer des utilisateurs.
            return BottomNavigationBar(
              items: const [
                BottomNavigationBarItem(
                  icon: Icon(
                    FontAwesomeIcons.house,
                    size: 20,
                  ),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(
                    FontAwesomeIcons.user,
                    size: 20,
                  ),
                  label: 'Profile',
                ),
                BottomNavigationBarItem(
                  icon: Icon(
                    FontAwesomeIcons.plus,
                    size: 20,
                  ),
                  label: 'CreateUser',
                ),
              ],
              fixedColor: Colors.deepPurple[200],
              onTap: (int idx) {
                switch (idx) {
                  case 0:
                    break;
                  case 1:
                    Navigator.pushNamed(context, '/profile');
                    break;
                  case 2:
                    Navigator.pushNamed(context, '/createUser');
                    break;
                }
              },
            );
          }
          return BottomNavigationBar(items: const [
            BottomNavigationBarItem(
              icon: Icon(
                FontAwesomeIcons.house,
                size: 20,
              ),
              label: 'Home',
            )
          ]);
        });
  }
}

The way I use it:

class CreateUserScreen extends StatelessWidget {
  const CreateUserScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {

    return Scaffold(........),
      persistentFooterButtons: [
        SignOutButton(),
        BottomNavBar(), // Here.
      ],
    );
  }
}

You can do something like that! If you found better alternative, please inform me

import 'package:flutter/material.dart';

class BottomNavBar extends StatelessWidget {
  const BottomNavBar({super.key, required this.checkValue});

  final String checkValue;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: checkValue == 'ADMIN'
          ? adminItems
          : checkValue == 'USER'
              ? userItems
              : defaultItems,
      fixedColor: Colors.deepPurple[200],
      //dynamic ontap implement for both admin and user
      onTap: (index) {
        if (checkValue == 'ADMIN') {
          if (index == 0) {
            Navigator.pushNamed(context, '/home');
          } else if (index == 1) {
            Navigator.pushNamed(context, '/profile');
          } else if (index == 2) {
            Navigator.pushNamed(context, '/createUser');
          }
        } else if (checkValue == 'USER') {
          if (index == 0) {
            Navigator.pushNamed(context, '/home');
          } else if (index == 1) {
            Navigator.pushNamed(context, '/profile');
          }
        } else {
          if (index == 0) {
            Navigator.pushNamed(context, '/home');
          } else if (index == 1) {
            Navigator.pushNamed(context, '/profile');
          }
        }
      },
    );
  }
}

const adminItems = [
  BottomNavigationBarItem(
    icon: Icon(
      Icons.house,
      size: 20,
    ),
    label: 'Home',
  ),
  BottomNavigationBarItem(
    icon: Icon(
      Icons.person,
      size: 20,
    ),
    label: 'Profile',
  ),
  BottomNavigationBarItem(
    icon: Icon(
      Icons.add,
      size: 20,
    ),
    label: 'CreateUser',
  ),
];

const userItems = [
  BottomNavigationBarItem(
    icon: Icon(
      Icons.house,
      size: 20,
    ),
    label: 'Home',
  ),
  BottomNavigationBarItem(
    icon: Icon(
      Icons.person,
      size: 20,
    ),
    label: 'Profile',
  ),
];

const defaultItems = [
  BottomNavigationBarItem(
    icon: Icon(
      Icons.house,
      size: 20,
    ),
    label: 'Home',
  ),
  BottomNavigationBarItem(
    icon: Icon(
      Icons.person,
      size: 20,
    ),
    label: 'Profile',
  ),
];

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM