Flutter – Barra inferior personalizada

App Bar es una de las cosas más populares que vemos en la mayoría de las aplicaciones. Esta barra de aplicaciones se usa para mostrar opciones como un menú, perfil y configuraciones para navegar a diferentes pantallas. Es una de las formas más eficientes de comunicarse con la aplicación. En este artículo, vamos a ver cómo implementar una barra de aplicaciones personalizada en la aplicación Flutter.

Siga los pasos para implementar la barra de aplicaciones personalizada en nuestra aplicación Flutter App:

Paso 1: navegue hasta el archivo main.dart() y devuelva Material App()

Primero, hemos declarado MyApp() en runApp en la función principal. Luego hemos creado StatelessWidget para MyApp en el que hemos devuelto MaterialApp(). En esta MaterialApp() le hemos dado el título de nuestra aplicación, luego declaramos el tema como PrimaryColorSwatch y le damos el color verde. Entonces hemos dado nuestra primera aplicación de pantalla o control deslizante en el hogar: BottomBar()

import 'package:flutter/material.dart';
import 'package:todolistapp/CustomeBottomBar.dart';
  
void main() {
  runApp(MyApp());
}
// stateless widget for my class app
class MyApp extends StatelessWidget {
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Geeks for Geeks',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
  
    //first screen of app
    home: BottomBar(),
    );
  }
}
class BottomBar extends StatefulWidget {
  @override
  _BottomBarState createState() => _BottomBarState();
}
  
class _BottomBarState extends State<BottomBar> {
    
  // given current index
  int currentIndex = 0;
   setBottomBarIndex(index){
     setState(() {
       currentIndex = index;
     });
   }
    
  // Tabs created to display text on each screen
   final tabs = [
     Center(child: Text("Home",style: TextStyle(color: Colors.white))),
     Center(child: Text("Cart",style: TextStyle(color: Colors.white))),
     Center(child: Text("Profile",style: TextStyle(color: Colors.white))),
     Center(child: Text("Folder",style: TextStyle(color: Colors.white))),
     Center(child: Text("Add Items",style: TextStyle(color: Colors.white))),
   ];
    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Geeks for Geeks"),
      ),
      backgroundColor: Colors.white10,
      body: tabs[currentIndex],
  
      // Floating action button
      floatingActionButton: FloatingActionButton(
        onPressed: (){
  
          // given index yo screen
             setBottomBarIndex(4);
        },
        child: Icon(Icons.add,color: Colors.white),
      ),

Paso 2: Diseñe la barra de navegación inferior

Ahora hemos declarado BottomNavbar en el que hemos dado color como blanco. Después de eso, hemos creado un contenedor de una altura específica. En ese contenedor, le hemos dado 4 IconButtons() envueltos en un Row() Widget . Y dada la Alineación del Eje principal. En la clase de estado, establecemos el estado donde el índice actual es igual al índice. Ahora, para cada botón de icono, hemos declarado diferentes iconos y declarado el método onPressed para cada uno de ellos.

// Bottom Nav Bar
bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 80,
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
                
              // Icon button 1
              IconButton(
                icon: Icon(Icons.home,
                  color: currentIndex == 0 ? Colors.green : Colors.grey,
                ),
                onPressed: (){
                  setBottomBarIndex(0);
                },
                splashColor: Colors.white,
  
              ),
                
              // Icon button 2
              IconButton(
                  icon: Icon(Icons.add_shopping_cart,
                    color: currentIndex == 1 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(1);
                  }),
              SizedBox.shrink(),
                
              // Icon button 3
              IconButton(
                  icon: Icon(Icons.person,
                    color: currentIndex == 2 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(2);
                  }),
  
              // Icon button 4
              IconButton(
                  icon: Icon(Icons.insert_drive_file,
                    color: currentIndex == 3 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(3);
                  }),
            ],
          ),
        ),
      ),

Código fuente completo:

import 'package:flutter/material.dart';
import 'package:todolistapp/CustomeBottomBar.dart';
  
  
void main() {
  runApp(MyApp());
}
// stateless widget
class MyApp extends StatelessWidget {
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'To Do List',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
  
    // first screen of app
    home: BottomBar(),
    );
  }
}

Código fuente completo para la primera pantalla:

import 'package:flutter/material.dart';
// Stateful widget created
class BottomBar extends StatefulWidget {
  @override
  _BottomBarState createState() => _BottomBarState();
}
  
class _BottomBarState extends State<BottomBar> {
  
// index given for tabs
  int currentIndex = 0;
   setBottomBarIndex(index){
     setState(() {
       currentIndex = index;
     });
   }
  
   // Number of tabs
   final tabs = [
     Center(child: Text("Home",style: TextStyle(color: Colors.white))),
     Center(child: Text("Cart",style: TextStyle(color: Colors.white))),
     Center(child: Text("Profile",style: TextStyle(color: Colors.white))),
     Center(child: Text("Folder",style: TextStyle(color: Colors.white))),
     Center(child: Text("Add Items",style: TextStyle(color: Colors.white))),
   ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
  
      // appbar given
      appBar: AppBar(
        title: Text("Geeks for Geeks"),
      ),
      backgroundColor: Colors.white10,
      body: tabs[currentIndex],
        
      // floating action button in center
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          setBottomBarIndex(4);
        },
        child: Icon(Icons.add,color: Colors.white),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        
      // bottom app bar
      bottomNavigationBar: BottomAppBar(
        color: Colors.white,
        shape: CircularNotchedRectangle(),
        child: Container(
          height: 80,
          padding: EdgeInsets.symmetric(horizontal: 20),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
  
              // button 1
              IconButton(
                icon: Icon(Icons.home,
                  color: currentIndex == 0 ? Colors.green : Colors.grey,
                ),
                onPressed: (){
                 setBottomBarIndex(0);
                },
                splashColor: Colors.white,
  
              ),
  
              // button 2
              IconButton(
                  icon: Icon(Icons.add_shopping_cart,
                    color: currentIndex == 1 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(1);
                  }),
              SizedBox.shrink(),
                
              // button 3
              IconButton(
                  icon: Icon(Icons.person,
                    color: currentIndex == 2 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(2);
                  }),
  
              // button 4
              IconButton(
                  icon: Icon(Icons.insert_drive_file,
                    color: currentIndex == 3 ? Colors.green : Colors.grey,
                  ),
                  onPressed: (){
                    setBottomBarIndex(3);
                  }),
            ],
          ),
        ),
      ),
    );
  }
}

Producción: