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'