23 octubre, 2024
Implementar un menú interactivo en Flutter que permite navegar entre diferentes pantallas como Inicio, Empresa, Productos y Contacto. Descubre el código optimizado y las mejores prácticas para mejorar la experiencia del usuario en tu aplicación
Suscríbete a nuestro canal en Youtube
SuscríbirseEn el desarrollo de aplicaciones móviles, la navegación intuitiva es fundamental para mejorar la experiencia del usuario. Flutter, con su rica biblioteca de widgets y herramientas, permite crear interfaces atractivas y funcionales de manera sencilla. En este post, te guiaremos a través del proceso de creación de un menú interactivo en Flutter que te permitirá navegar sin problemas entre diferentes secciones de tu aplicación, como Inicio, Empresa, Productos y Contacto. Exploraremos un código optimizado que facilita la implementación de rutas y mejora la organización del proyecto, asegurando que tu aplicación no solo sea funcional, sino también estéticamente agradable. ¡Comencemos a construir una experiencia de usuario fluida y atractiva!
Aprenderemos cómo Navegar a una nueva pantalla creando una nueva ruta y publicándola en el Navigator
.
Sin embargo, si tenemos que navegar a la misma pantalla en muchas partes de nuestras aplicaciones, esto puede provocar la duplicación del código. En estos casos, puede ser útil definir una “ruta con nombre” y usarla para la Navegación.
Para trabajar con rutas con nombre, podemos usar la función Navigator.pushNamed
. En este ejemplo demostraremos cómo usar rutas con nombre en su lugar.
En este trozo de programación veremos un ejemplo de como implementar interactividad entre pantallas usando para ello :
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.blue),
initialRoute: '/',
routes: {
'/': (context) => Inicio(),
'/empresa': (context) => Empresa(),
'/productos': (context) => Productos(),
'/contacto': (context) => Contacto(),
},
);
}
}
class Inicio extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.symmetric(vertical: 130, horizontal: 10),
decoration: BoxDecoration(
color: Colors.indigo,
image: DecorationImage(
image: NetworkImage("https://cdn.passporthealthglobal.com/wp-content/uploads/2018/08/vacunas-consejos-peru.jpg"),
alignment: Alignment.topCenter,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildButton(context, "INICIO", "/"),
_buildButton(context, "EMPRESA", "/empresa"),
_buildButton(context, "PRODUCTOS", "/productos"),
_buildButton(context, "CONTACTO", "/contacto"),
],
),
),
);
}
Widget _buildButton(BuildContext context, String label, String route) {
return Padding(
padding: const EdgeInsets.all(10),
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
fixedSize: Size(100, 100),
),
onPressed: () {
Navigator.pushNamed(context, route);
},
child: Center(
child: Text(
label,
style: TextStyle(color: Colors.indigo, fontWeight: FontWeight.w900),
),
),
),
);
}
}
class Empresa extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("EMPRESA")),
body: Center(child: Text("SECCIÓN EMPRESA")),
);
}
}
class Productos extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("PRODUCTOS")),
body: Center(child: Text("SECCIÓN PRODUCTOS")),
);
}
}
class Contacto extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("CONTACTO")),
body: Center(child: Text("SECCIÓN CONTACTO")),
);
}
}
Aquí tienes una explicación del código mejorado para el menú interactivo en Flutter:
El código presentado implementa un menú interactivo en Flutter utilizando rutas nombradas para navegar entre diferentes pantallas. A continuación, se detallan las secciones clave del código:
Importaciones y Configuración Inicial:
dart
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
Aquí importamos el paquete material.dart
que proporciona componentes de Material Design y definimos la función main()
que inicializa la aplicación llamando a MyApp()
.
Clase Principal MyApp
:
dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
routes: <String, WidgetBuilder>{
"/inicio": (BuildContext context) => Inicio(),
"/empresa": (BuildContext context) => Empresa(),
"/productos": (BuildContext context) => Productos(),
"/contacto": (BuildContext context) => Contacto(),
},
home: Inicio()
);
}
}
En esta clase, configuramos el MaterialApp
, estableciendo el título y el tema de la aplicación. La propiedad routes
se utiliza para definir las rutas nombradas que permiten la navegación entre diferentes pantallas. La pantalla inicial se establece en Inicio
.
Clases de las Pantallas: Cada sección de la aplicación (Inicio, Empresa, Productos y Contacto) está representada por una clase StatelessWidget
.
Inicio
: dart
class Inicio extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.indigo,
image: DecorationImage(
image: NetworkImage("https://cdn.passporthealthglobal.com/wp-content/uploads/2018/08/vacunas-consejos-peru.jpg"),
alignment: Alignment.topCenter
)
),
child: Column(
children: <Widget>[
// Aquí se añaden los botones de navegación
],
),
),
);
}
}
Cada clase construye una interfaz simple con un Scaffold
, donde se configura un fondo (en este caso, una imagen de red) y se organiza el contenido en un Column
. Dentro de este Column
, se pueden añadir widgets adicionales como botones de navegación.
Botones de Navegación: Los botones están organizados en Row
y cada botón utiliza RaisedButton
(o ElevatedButton
en versiones más recientes de Flutter) para permitir al usuario navegar entre las diferentes pantallas.
dart
RaisedButton(
color: Colors.white,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
onPressed: () {
Navigator.pushNamed(context, "/empresa");
},
child: Text("EMPRESA"),
)
En este fragmento, al presionar el botón "EMPRESA", el usuario es llevado a la pantalla de la empresa utilizando Navigator.pushNamed
, que busca la ruta correspondiente y la presenta.
Estilo y Diseño: El uso de Container
, Padding
, y Column
permite un diseño responsivo y organizado. El color de fondo y la imagen de fondo se establecen en el Container
, proporcionando un atractivo visual.
Leido 14709 veces | 1 usuarios
0 descargas
Para descargar el código crea una cuenta
Crear cuenta© Copyright Codea::App Cursos de Programación Online | LATAM | 2020 - 2024