Una barra de navegación inferior es un widget de material que está presente en la parte inferior de una aplicación para seleccionar o navegar a diferentes páginas de la aplicación. Por lo general, se usa junto con un Scaffold, donde se proporciona como el argumento Scaffold.bottomNavigationBar .
Aunque flutter te proporciona la clase BottomNavigationBar , en este artículo aprenderás a crear tu propia barra de navegación inferior. Este sería un tutorial en profundidad.
Como puede ver en la implementación de la propiedad de navegación inferior, bottomNavigationBar no menciona específicamente un widget. Esto nos da la flexibilidad de asignar nuestro widget de elección al atributo bottomNavigationBar del Scaffold.
Empecemos.
Una vez que tenga su aplicación flutter básica en funcionamiento, su aplicación material asigna la clase HomePage() al atributo de inicio.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Bottom NavBar Demo',
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
Ahora cree un widget con estado y asígnele el nombre HomePage. Devuelve un Scaffold de la clase HomePage . Ahora este Scaffold es el elemento principal que contiene nuestra barra de navegación inferior.
Dart
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
Antes de comenzar a crear nuestra barra de navegación inferior, cree de 2 a 5 páginas. Siempre trate de mantener su barra de navegación inferior al mínimo con un máximo de 5 elementos (Páginas).
Las páginas son las diferentes pantallas de su aplicación. En este artículo, trabajaremos con 4 páginas, todas las cuales son widgets sin estado. Puede tener cualquier widget, por ejemplo, puede tener widgets con estado, contenedores, widgets centrales, etc. Para este tutorial, creamos 4 widgets sin estado básicos que devuelven un valor básico. Página con algo de texto.
Dart
class Page1 extends StatelessWidget {
const Page1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 1",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page2 extends StatelessWidget {
const Page2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 2",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page3 extends StatelessWidget {
const Page3({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 3",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page4 extends StatelessWidget {
const Page4({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 4",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
En la clase HomePage declara una variable int como pageIndex , la inicializa a 0. Cada vez que abrimos la aplicación comenzamos en la primera página. Puede nombrar la variable como desee. El pageIndex es para contener el índice de su página actual. Ahora defina una lista final como páginas , esta lista contendrá todas las páginas de nuestra aplicación.
Añade las 4 páginas que hemos creado.
Dart
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int pageIndex = 0;
final pages = [
const Page1(),
const Page2(),
const Page3(),
const Page4(),
];
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
Ahora vamos a crear nuestra barra de navegación inferior.
En la clase HomePage vamos a definir el atributo bottomNavigationBar y asignarle un Contenedor. Dale una altura de 60 con algo de BoxDecoration (Pixels) agrega una Fila como elemento secundario del Contenedor. Establezca la alineación del eje principal en el espacio alrededor.
Dart
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int pageIndex = 0;
final pages = [
const Page1(),
const Page2(),
const Page3(),
const Page4(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [],
),
),
);
}
}
Para el atributo de niños de la Fila, agregue los widgets IconButton , que serán nuestros botones que manejarán la navegación de nuestra aplicación. Ahora agregue 4 botones en la lista de niños de la Fila agregue todos los argumentos requeridos. Algunos argumentos requeridos son Icon, onTap callback, y para tener una interfaz limpia y fluida, tenemos que manejar algunos elementos. Primero, comenzaremos configurando la propiedad enableFeedback en falso en IconButtons.
Dart
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int pageIndex = 0;
final pages = [
const Page1(),
const Page2(),
const Page3(),
const Page4(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: Container(
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
enableFeedback: false,
onPressed: () {},
icon: const Icon(
Icons.home_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {},
icon: const Icon(
Icons.work_outline_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {},
icon: const Icon(
Icons.widgets_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {},
icon: const Icon(
Icons.person_outline,
color: Colors.white,
size: 35,
),
),
],
),
),
);
}
}
Ahora nos moveremos al (tema: ThemeData) de nuestra aplicación de material y agregaremos las siguientes propiedades.
Dart
theme: ThemeData( splashColor: Colors.transparent, highlightColor: Colors.transparent, hoverColor: Colors.transparent, ),
Pero hay un problema al hacer lo anterior, se aplicarán las propiedades en toda la aplicación. Si desea que estas funciones se apliquen a un widget o subárbol de widgets en particular, simplemente envuelva su widget de destino con un widget de tema y proporcione los datos anteriores.
Se parece a esto:
Dart
Theme( data: Theme.of(context).copyWith ( splashColor: Colors.transparent, highlightColor: Colors.transparent, hoverColor: Colors.transparent, ) child: child, )
En resumen, estas propiedades harán que la experiencia del usuario sea mejor en comparación con cuando estas propiedades se establecen en sus valores predeterminados.
En cuanto a la implementación de la propiedad onTap , lo que hacemos ahora es establecer el estado de la variable pageIndex en (0, 1, 2, 3) para cada IconButton respectivamente. Esto actualizará el cuerpo de nuestro Scaffold cada vez que toquemos los elementos inferiores de la barra de navegación. Además, agregamos algunos elementos como que cambiaremos los íconos una vez que esa página esté activa usando el operador condicional.
Dart
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int pageIndex = 0;
final pages = [
const Page1(),
const Page2(),
const Page3(),
const Page4(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffC4DFCB),
appBar: AppBar(
leading: Icon(
Icons.menu,
color: Theme.of(context).primaryColor,
),
title: Text(
"Geeks For Geeks",
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
centerTitle: true,
backgroundColor: Colors.white,
),
body: pages[pageIndex],
bottomNavigationBar: Container(
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 0;
});
},
icon: pageIndex == 0
? const Icon(
Icons.home_filled,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.home_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 1;
});
},
icon: pageIndex == 1
? const Icon(
Icons.work_rounded,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.work_outline_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 2;
});
},
icon: pageIndex == 2
? const Icon(
Icons.widgets_rounded,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.widgets_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 3;
});
},
icon: pageIndex == 3
? const Icon(
Icons.person,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.person_outline,
color: Colors.white,
size: 35,
),
),
],
),
),
);
}
}
Eso es todo, ha creado con éxito su propia barra de navegación inferior personalizada. Puede personalizar el widget de la forma que desee, por ejemplo, puede dar un color de radio de borde, espaciado, relleno, etc.
Llegando a algunas mejores prácticas, siempre es bueno abstraer su código. Entonces, para esto, en lugar de escribir todo el código en el andamio, escribiremos una función (método) que devolverá nuestro widget de barra de navegación inferior de destino.
Dart
Container buildMyNavBar(BuildContext context) {
return Container(
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 0;
});
},
icon: pageIndex == 0
? const Icon(
Icons.home_filled,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.home_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 1;
});
},
icon: pageIndex == 1
? const Icon(
Icons.work_rounded,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.work_outline_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 2;
});
},
icon: pageIndex == 2
? const Icon(
Icons.widgets_rounded,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.widgets_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 3;
});
},
icon: pageIndex == 3
? const Icon(
Icons.person,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.person_outline,
color: Colors.white,
size: 35,
),
),
],
),
);
}
El código fuente completo se proporciona a continuación con algunos elementos adicionales como colores, etc.
Dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom NavBar Demo',
theme: ThemeData(
primaryColor: const Color(0xff2F8D46),
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int pageIndex = 0;
final pages = [
const Page1(),
const Page2(),
const Page3(),
const Page4(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffC4DFCB),
appBar: AppBar(
leading: Icon(
Icons.menu,
color: Theme.of(context).primaryColor,
),
title: Text(
"Geeks For Geeks",
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
centerTitle: true,
backgroundColor: Colors.white,
),
body: pages[pageIndex],
bottomNavigationBar: buildMyNavBar(context),
);
}
Container buildMyNavBar(BuildContext context) {
return Container(
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 0;
});
},
icon: pageIndex == 0
? const Icon(
Icons.home_filled,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.home_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 1;
});
},
icon: pageIndex == 1
? const Icon(
Icons.work_rounded,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.work_outline_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 2;
});
},
icon: pageIndex == 2
? const Icon(
Icons.widgets_rounded,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.widgets_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 3;
});
},
icon: pageIndex == 3
? const Icon(
Icons.person,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.person_outline,
color: Colors.white,
size: 35,
),
),
],
),
);
}
}
class Page1 extends StatelessWidget {
const Page1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 1",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page2 extends StatelessWidget {
const Page2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 2",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page3 extends StatelessWidget {
const Page3({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 3",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page4 extends StatelessWidget {
const Page4({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 4",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
Producción:
Publicación traducida automáticamente
Artículo escrito por rajenderkatkuri7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA