Widget BottomNavigationBar en Flutter

El widget BottonNavigationBar se usa para mostrar la parte inferior de una aplicación. Puede constar de varios elementos, como iconos, texto o ambos, que conducen a una ruta diferente según el diseño de la aplicación. Está destinado a ayudar al usuario a navegar a diferentes secciones de la aplicación en general.

Constructores:

Syntax:
BottomNavigationBar(
{Key key, 
@required List<BottomNavigationBarItem> items, 
ValueChanged<int> onTap, 
int currentIndex: 0, 
double elevation, 
BottomNavigationBarType type, 
Color fixedColor, 
Color backgroundColor, 
double iconSize: 24.0, 
Color selectedItemColor, 
Color unselectedItemColor, 
IconThemeData selectedIconTheme, 
IconThemeData unselectedIconTheme, 
double selectedFontSize: 14.0, 
double unselectedFontSize: 12.0, 
TextStyle selectedLabelStyle, 
TextStyle unselectedLabelStyle, 
bool showSelectedLabels: true, 
bool showUnselectedLabels, 
MouseCursor mouseCursor})

Propiedades:

• hashCode: El código hash para este objeto.
• clave: Controla cómo un widget reemplaza a otro widget en el árbol.
• runtimeType: una representación del tipo de tiempo de ejecución del objeto.
• backgrounColor: el color de la propia BottomNavigationBar.
• elevación: la coordenada z de esta BottomNavigationBar.
• fixedColor: la coordenada z de esta BottomNavigationBar.
• elementos: define la apariencia de los elementos del botón que se organizan en la barra de navegación inferior.
• onTap: se llama cuando se toca uno de los elementos.
• currentIndex: esta propiedad toma un valor int como objeto para asignar el índice a los elementos.
• fixedColor: esta propiedad toma la clase Color como objeto para asignar un valor fijo a SelectedItemColor .
• iconSize: toma un valor doble como objeto para determinar el tamaño de todos los íconos en BottomNavigationBar .
• mouseCursor: La propiedad mouseCursor toma la clase MouseCursor como objeto. Determina el tipo de cursor que tendrá este widget.
• selectedFontSize: esta propiedad controla el tamaño de fuente en BottomNavigationBar cuando se seleccionan los elementos. Toma un valor doble como el objeto.
• selectedIcontheme: esta propiedad contiene la clase IconThemeData como objeto para controlar la apariencia de los iconos de este widget cuando se selecciona.
• selectedIconColor: esta propiedad determina el color de los iconos dentro de este widget que se mantendrán cuando se seleccionen. Esta propiedad toma la clase Color como propiedad.
• selectedLabelStyle: la clase TextStyle es el objeto asignado a esta propiedad que controla el estilo del texto en la instancia de selección.
• showSelectedLabele: esta propiedad toma un valor booleano como objeto para determinar si se mostrarán o no las etiquetas del elemento no seleccionado.
• showUnselectedLabels: esta propiedad también toma un valor booleano como objeto para determinar si se mostrarán o no las etiquetas de los elementos seleccionados.
• type: la propiedad type controla el comportamiento y el diseño de BottomNavigationBar. Toma la enumeración BottomNavigationBarType como el objeto.
• unselectedFontSize: esta propiedad también toma un valor doble como objeto e para determinar el tamaño de la fuente cuando el elemento no está seleccionado.
• unselectedIconTheme: esta propiedad también contiene la clase IconThemeData como objeto para controlar la apariencia de los iconos de este widget cuando no está seleccionado o no está seleccionado.
• unselectedItemColor : esta propiedad determina el color que tendrán los íconos dentro de este widget cuando no estén seleccionados. Esta propiedad toma la clase Color como propiedad.
• unselectedLabelStyle: la clase TextStyle es el objeto asignado a esta propiedad que controla el estilo del texto cuando el elemento no está seleccionado.

Ejemplo:

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}
 
class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);
 
  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
 
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
  TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'HOME PAGE',
      style: optionStyle,
    ),
    Text(
      'COURSE PAGE',
      style: optionStyle,
    ),
    Text(
      'CONTACT GFG',
      style: optionStyle,
    ),
  ];
 
  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.bookmark),
            title: Text('Courses'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.contact_mail),
            title: Text('Mail'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

Producción:

Explicación:

1. Primero, cree el widget principal sin estado.
2. En segundo lugar, use el generador de widgets para crear una barra de aplicaciones dentro del andamio .
3. En tercer lugar, use el widget ButtomNavigationBar en el cuerpo de la aplicación principal
4. No olvide configurar la barra de navegación en la parte inferior de la aplicación utilizando la propiedad de estilo.