Flutter – Widget de riel de navegación

NavigationRail es un widget de Flutter que permite crear una barra de navegación en la ubicación izquierda o derecha de la pantalla. Al igual que la barra de navegación inferior que se adhiere a la parte inferior, tenemos un riel de navegación que permanece en uno de los lados. NavigationRail es adecuado para ventanas de visualización grandes, como en computadoras de escritorio o tabletas. En este artículo, veremos un ejemplo de su implementación junto con la salida.

Sintaxis:

NavigationRail({Key? key, Color? backgroundColor,
    bool extended = false,
    Widget? leading,
    Widget? trailing,
    required List<NavigationRailDestination> destinations,
    required int selectedIndex,
    ValueChanged<int>? onDestinationSelected,
    double? elevation,
    double? groupAlignment,
    NavigationRailLabelType? labelType,
    TextStyle? unselectedLabelTextStyle,
    TextStyle? selectedLabelTextStyle,
    IconThemeData? unselectedIconTheme,
    IconThemeData? selectedIconTheme,
    double? minWidth,
    double? minExtendedWidth,
    bool? useIndicator,
    Color? indicatorColor})

Parámetros:

1. backgroundColor: el color del contenedor que contiene el riel de navegación.
2. destinos: Los destinos representados por elementos en los carriles que se van a tomar.
3. elevación: La elevación del carril de navegación.
4. extended: valor booleano para establecer si se va a ampliar el carril.
5. groupAlignment: La alineación vertical de los elementos de los rieles.
6. indicadorColor: El color de los elementos indicados.
7. labelType: el estilo del texto de los elementos en los rieles.
8. líder: el widget que aparece antes de los destinos.
9. onDestinationSelected: Función a llamar cuando se selecciona cualquier destino.
10. minExtendedWidth: el ancho que se extenderá después del diseño del riel en la pantalla.
11. minWidth: el ancho más pequeño posible de los rieles independientemente del icono de destino.
12. selectedIconTheme: el estilo del icono seleccionado.
13. selectedIndex: el índice del elemento que se selecciona de la array de destinos.
14. selectedLabelTextStyle: el estilo de texto de la etiqueta del icono que se selecciona de los destinos.
15. trailing: el widget que se muestra debajo de los destinos.
16. unselectedIconTheme: el estilo de los elementos no seleccionados entre los destinos.
17. unselectedLabelTextStyle: el estilo de texto de las etiquetas de los destinos.
18. useIndicator: Boolean cuando se establece en verdadero crea un cuadro detrás de un icono seleccionado de destinos en los rieles.

Ejemplo:

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Rails',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  
  // initialize a index
  int _selectedIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GeeksForGeeks"),
        centerTitle: true,
      ),
      body: Row(
        children: <Widget>[
  
          // create a navigation rail
          NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: NavigationRailLabelType.selected,
            backgroundColor: Colors.green,
            destinations: const <NavigationRailDestination>
            [
              // navigation destinations
              NavigationRailDestination(
                icon: Icon(Icons.favorite_border),
                selectedIcon: Icon(Icons.favorite),
                label: Text('Wishlist'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.person_outline_rounded),
                selectedIcon: Icon(Icons.person),
                label: Text('Account'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.shopping_cart_outlined),
                selectedIcon: Icon(Icons.shopping_cart),
                label: Text('Cart'),
              ),
            ],
            selectedIconTheme: IconThemeData(color: Colors.white),
            unselectedIconTheme: IconThemeData(color: Colors.black),
            selectedLabelTextStyle: TextStyle(color: Colors.white),
          ),
          const VerticalDivider(thickness: 1, width: 2),
          Expanded(
            child: Center(
              child: Text('Page Number: $_selectedIndex'),
            ),
          )
        ],
      ),
    );
  }
}

Producción: