0

Tengo mi página web hecha en flutter y necesito crear un submenú para mi navbar, cuando se hace click en el NavbarItem donde está el nombre del usuario (users.firstName). A continuación les comparto el código.

class NavBar extends StatelessWidget {
  const NavBar({Key? key});

  @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;
    final user = Provider.of<AuthProvider>(context).user!;
    final token = LocalStorage.prefs.getString('token');
    return Container(
      width: double.infinity,
      height: 75,
      decoration: buildBoxDecoration(),
      child: Row(
        children: [
          if (size.width <= 779) ...[
            IconButton(
              onPressed: () {
                SideMenuProvider.openMenu();
              },
              icon: const Icon(Icons.menu_outlined),
            ),
            const Spacer(),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 2),
              child: Container(
                width: 250,
                child: const AutoSizeText(
                  'SISTEMA WEB DE COSTOS Y RENTABILIDAD DEL PROCESO DEL CULTIVO DEL BANANO',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                  maxLines: 5, // Número máximo de líneas permitidas
                  minFontSize: 10, // Tamaño de fuente mínimo
                  maxFontSize: 30, // Tamaño de fuente máximo
                  overflow: TextOverflow.ellipsis, // Opción de desbordamiento
                ),
              ),
            ),
          ],
          if (size.width >= 779) ...[
            const SizedBox(
              width: 5,
            ),
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 2),
              child: Container(
                width: 250,
                child: const AutoSizeText(
                  'SISTEMA WEB DE COSTOS Y RENTABILIDAD DEL PROCESO DEL CULTIVO DEL BANANO',
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                  ),
                  maxLines: 5, // Número máximo de líneas permitidas
                  minFontSize: 10, // Tamaño de fuente mínimo
                  maxFontSize: 30, // Tamaño de fuente máximo
                  overflow: TextOverflow.ellipsis, // Opción de desbordamiento
                ),
              ),
            ),
            const Spacer(),
            NavbarItem(
                text: 'Inicio',
                icon: Icons.home_sharp,
                onPressed: () {
                  NavigationService.replaceTo(Flurorouter.dashboardRoute);
                }),
            /*NavbarItem(
                text: 'Opciones de perfil',
                icon: Icons.settings,
                onPressed: () {}),*/
            NavbarItem(
                text: 'Datos',
                icon: Icons.people,
                onPressed: () {
                  NavigationService.replaceTo('/dashboard/info/$token');
                },
                isActive: false),
            NavbarItem(
                text: 'Password',
                icon: Icons.people,
                onPressed: () {
                  NavigationService.replaceTo(Flurorouter.changePassRoute);
                },
                isActive: false),
            NavbarItem(
                text: user.firstName,
                icon: Icons.people,
                onPressed: () {
                  //crearMenu(context);
                },
                isActive: false),
            NavbarItem(
              text: 'Salir',
              icon: Icons.exit_to_app_outlined,
              onPressed: () {
                Provider.of<AuthProvider>(context, listen: false).logout();
              },
            ),
          ],
        ],
      ),
    );
  }

  BoxDecoration buildBoxDecoration() => const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft, // Comienza desde la izquierda
            end: Alignment.centerRight, // Termina en la derecha
            colors: [
              Color(0xFF679C64), // Color de inicio
              Color(0xFFADCFAB), // Color de finalización
            ],
          ),
          boxShadow: [
            BoxShadow(
              blurRadius: 5,
              color: Colors.black12,
            )
          ]);

El NavbarItem consta de:

class NavbarItem extends StatefulWidget {
  final String text;
  final IconData icon;
  final bool isActive;
  final Function onPressed;

  const NavbarItem({
    required this.text,
    required this.icon,
    this.isActive = false,
    required this.onPressed,
  });

  @override
  State<NavbarItem> createState() => _NavbarItemState();
}

class _NavbarItemState extends State<NavbarItem> {
  bool isHover = false;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        onTap: widget.isActive ? null : () => widget.onPressed(),
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15),
          child: MouseRegion(
            onEnter: (_) => setState(() {
              isHover = true;
            }),
            onExit: (_) => setState(() {
              isHover = false;
            }),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Icon(widget.icon),
                Text(
                  widget.text,
                  style: TextStyle(
                    decoration: isHover
                        ? TextDecoration.underline
                        : TextDecoration.none,
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Como puedo lograrlo

Necesito cambiar ese NavbarItem por algún widget que me permita lograr mostrar más opciones para obtener el comportamiento de un submenú. Me gustaría saber tambien si esas opciones del submenú pueden ser personalizadas y que sean como el siguiente widget, el cual es un AnimatedContainer que lo uso para el menú lateral, me gusta su funcionamiento y quisiera que se pueda integrar dicho widget como opción personalizada:

class SidebarItem extends StatefulWidget {
  final String text;
  final Function onPressed;
  final bool isActive;
  final IconData icon;

  const SidebarItem({
    Key? key,
    required this.text,
    required this.onPressed,
    this.isActive = false,
    required this.icon,
  }) : super(key: key);

  @override
  State<SidebarItem> createState() => _SidebarItemState();
}

class _SidebarItemState extends State<SidebarItem> {
  bool isHover = false;

  @override
  Widget build(BuildContext context) {
    Color backgroundColor = isHover
        ? const Color(0xFF184D26)
        : widget.isActive
            ? const Color(0xFF184D26)
            : Colors.transparent;
    return AnimatedContainer(
        duration: const Duration(milliseconds: 250),
        color: backgroundColor,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
              onTap: widget.isActive ? null : () => widget.onPressed(),
              child: Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 30, vertical: 10),
                child: MouseRegion(
                  onEnter: (_) => setState(() {
                    isHover = true;
                  }),
                  onExit: (_) => setState(() {
                    isHover = false;
                  }),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(widget.icon),
                      const SizedBox(
                        width: 5,
                      ),
                      Text(
                        widget.text,
                        /*style: GoogleFonts.roboto(
                          fontSize: 14,
                          color: Colors.black.withOpacity(0.8),
                        ),*/
                      ),
                    ],
                  ),
                ),
              )),
        ));
  }
}

Quiero lograr algo así: Necesito mostrar dos opciones 'cambiar password' y 'actualizar información' introducir la descripción de la imagen aquí

1 respuesta 1

0

Buen día Joel.

Veo que este código está basado en el tutorial de Fernando H., para lograr hacer lo que usted necesita, yo realice algunos cambios en varios archivos:

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await LocalStorage.configurePrefs();
  CafeApi.configureDio();
  Flurorouter.configureRoutes();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  runApp(const AppState());
}

class AppState extends StatelessWidget {
  const AppState({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider( lazy: false, create: ( _ ) => AuthProvider() ),
        ChangeNotifierProvider( lazy: false, create: ( _ ) => SideMenuProvider() ),
        ChangeNotifierProvider( create: ( _ ) => CategoriesProvider() ),
        ChangeNotifierProvider( lazy: false, create: ( _ ) => UsersProvider() ),
        ChangeNotifierProvider( lazy: false, create: ( _ ) => UserFormProvider() ),

      ],
      child: const MyApp(), 
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Admin Dashboard',
      initialRoute: '/',
      onGenerateRoute: Flurorouter.router.generator,
      navigatorKey: NavigationService.navigatorKey,
      scaffoldMessengerKey: NotificationsService.messagerKey,
      home: const App(),
      theme: ThemeData.light().copyWith(
        scrollbarTheme: const ScrollbarThemeData().copyWith(
          thumbColor: MaterialStateProperty.all(
            Colors.grey.withOpacity(0.5),
          ),
        )
      )
    );
  }
}


class App extends StatelessWidget {

  const App({super.key,});

  @override
  Widget build(BuildContext context) {

      final authProvider = Provider.of<AuthProvider>(context);
      if (authProvider.authStatus == AuthStatus.checking){ 
        return const SafeArea(child: SplashLayout());
        }
      if (authProvider.authStatus == AuthStatus.authenticated){ 
        return const SafeArea(child: DashboardLayout(child: DashboardView(),));
      } else {
        return const SafeArea(child: AuthLayaut(child: LoginView(),));
      }
  }
}

admin_handlers.dart

class AdminHandlers {
  static Handler login = Handler(
    handlerFunc: (context, params){
      
      final authProvider = Provider.of<AuthProvider>(context!);
      
      if (authProvider.authStatus == AuthStatus.notAuthenticated){
          return const AuthLayaut(child: LoginView());
      } else {
        return const DashboardLayout(child: DashboardView());
      }
    }
  );

  static Handler register = Handler(
    handlerFunc: (context, params){
      
      final authProvider = Provider.of<AuthProvider>(context!);
      
      if (authProvider.authStatus == AuthStatus.notAuthenticated){
          return const AuthLayaut(child: RegisterView());
      } else {
        return const DashboardLayout(child: DashboardView());
      }
    }
  );
}

dashboard_handlers.dart

class DashboardHandlers {

  //Handler DashboardView
  static Handler dashboard = Handler(
    handlerFunc: (context, params){

      final authProvider = Provider.of<AuthProvider>(context!);
      Provider.of<SideMenuProvider>(context, listen: false).setCurrentPageUrl(Flurorouter.dashboardRoute);
      
      if (authProvider.authStatus == AuthStatus.authenticated){
        return const DashboardLayout(child: DashboardView());
      } else {
        return const AuthLayaut(child: LoginView());
      }
    }
  );  
  
  //Handler IconsView
  static Handler icons = Handler(
    handlerFunc: (context, params){

      final authProvider = Provider.of<AuthProvider>(context!);
      Provider.of<SideMenuProvider>(context, listen: false).setCurrentPageUrl(Flurorouter.iconsRoute);
      
      if (authProvider.authStatus == AuthStatus.authenticated){
        return const DashboardLayout(child: IconsView());
      } else {
        return const AuthLayaut(child: LoginView());
      }
    }
  );  

  //hanlder BlankView
  static Handler blank = Handler(
    handlerFunc: (context, params){

      final authProvider = Provider.of<AuthProvider>(context!);
      Provider.of<SideMenuProvider>(context, listen: false).setCurrentPageUrl(Flurorouter.blankRoute);
      
      if (authProvider.authStatus == AuthStatus.authenticated){
        return const DashboardLayout(child: BlankView());
      } else {
        return const AuthLayaut(child: LoginView());
      }
    }
  );

  //hanlder CategoriesView
  static Handler categories = Handler(
    handlerFunc: (context, params){

      final authProvider = Provider.of<AuthProvider>(context!);
      Provider.of<SideMenuProvider>(context, listen: false).setCurrentPageUrl(Flurorouter.categoriesRoute);
      
      if (authProvider.authStatus == AuthStatus.authenticated){
        return const DashboardLayout(child: CategoriesView());
      } else {
        return const AuthLayaut(child: LoginView());
      }
    }
  );

  //hanlder ProductsView
  static Handler products = Handler(
    handlerFunc: (context, params){

      final authProvider = Provider.of<AuthProvider>(context!);
      Provider.of<SideMenuProvider>(context, listen: false).setCurrentPageUrl(Flurorouter.productsRoute);
      
      if (authProvider.authStatus == AuthStatus.authenticated){
        return const DashboardLayout(child: ProductsView());
      } else {
        return const AuthLayaut(child: LoginView());
      }
    }
  );

  //hanlder UsersView
  static Handler users = Handler(
    handlerFunc: (context, params){

      final authProvider = Provider.of<AuthProvider>(context!);
      Provider.of<SideMenuProvider>(context, listen: false).setCurrentPageUrl(Flurorouter.usersRoute);
      
      if (authProvider.authStatus == AuthStatus.authenticated){
        return const DashboardLayout(child: UsersView());
      } else {
        return const AuthLayaut(child: LoginView());
      }
    }
  );
  //hanlder UserView
  static Handler user = Handler(
    handlerFunc: (context, params){

      final authProvider = Provider.of<AuthProvider>(context!);
      Provider.of<SideMenuProvider>(context, listen: false).setCurrentPageUrl(Flurorouter.userRoute);
      
      if (authProvider.authStatus == AuthStatus.authenticated){
        if (params['uid']?.first != null){
          return DashboardLayout(child: UserView(uid: params['uid']!.first));
        } else{
          return const DashboardLayout(child: UsersView());
        }
      } else {
        return const AuthLayaut(child: LoginView());
      }
    }
  );
}

navbar_avatar.dart (el submenú lo agregué en este archivo)

class NavbarAvatar extends StatelessWidget {
  const NavbarAvatar({super.key});

  @override
  Widget build(BuildContext context) {

    return ClipOval(
      child: Container(
        width: 30,
        height: 30,
        child: _popupMenuButton(context),
        //child: Image.network('https://upload.wikimedia.org/wikipedia/commons/9/9e/Placeholder_Person.jpg'),
      ),
    );
  }
} 


PopupMenuButton<String> _popupMenuButton(BuildContext context) {

  final authProvider = Provider.of<AuthProvider>(context);

  final user = authProvider.user!;
  final image = ( user.img == null) 
  ? const Image(image: AssetImage('no-image.jpg')) 
  : FadeInImage.assetNetwork(placeholder: 'loader.gif', image: user.img!);
    
  return PopupMenuButton<String>(
    // color: secondaryColor,
    onSelected: seleccionOpcion,
    itemBuilder: (BuildContext context) {
      return DropDownItems.opciones.map((String choice) {
        return PopupMenuItem<String>(
          value: choice,
          child: Text(choice),
        );
      }).toList();
    },
    child: image,
    // child: const Icon( Icons.more_vert_outlined, size: 38, ),
  );
}


void seleccionOpcion(String choice) {

  switch (choice){
    case DropDownItems.option1:
         print('Funcionalidad opcion 1');
         break;    
    case DropDownItems.option2:
         print('Funcionalidad opcion 2');
         break;    
    case DropDownItems.option3:
         print('Funcionalidad opcion 3');
         break;   
    case DropDownItems.perfil:
         print('Funcionalidad perfil');
         break;
    case DropDownItems.salir:
         Provider.of<AuthProvider>(NavigationService.navigatorKey.currentContext!, listen: false).logout();
         break;
  }
}

El resultado final es el siguiente:

introducir la descripción de la imagen aquí

Asimismo, agregué un archivo con la información de las opciones que se iban a agregar al submenú, se pueden agregar tantas opciones como sean necesarias, las funcionalidades se cada opción se controlan desde el seleccionOpcion del NavBar_Avatar() en el caso del ejemplo, pero hay muchas formas de manejarlo.

class DropDownItems {
  static const String option1 = 'Option 1';
  static const String option2 = 'Option 2';
  static const String option3 = 'Option 3';
  static const String perfil  = 'Perfil';
  static const String salir   = 'Salir';

  static const List<String> opciones = <String>[
    option1,
    option2,
    option3,
    perfil,
    salir  
  ];
}

En mi repositorio de git está esa funcionalidad

Espero que esto le pueda servir.

Saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.