Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

Una posibilidad que tenemos con Flutter es general Widgets idénticos a los de las plataformas nativas, en este caso para iOS con Cupertino.

En Flutter contamos con una sección especial para iOS, donde podemos generar botones, diálogos, pickers y hasta TabBar’s como es el caso de nuestro requerimiento.

Necesitamos que nuestro BottomBar luzca con una transparencia nativa de iOS

Para eso comenzaremos creando un nuevo archivo llamado platzi_trips_cupertino.dart Crearemos una clase que herede de StatelessWidget de esta forma:

class PlatziTripsCupertino extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   // TODO: implement build
   return null;
}

Ahora para disponer de la paquetería de Widgets Cupertino es necesario importar lo siguiente en el encabezado del documento debajo del paquete material.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

La estructura será la misma utilizando Scaffold en la propiedad bottomNavigationBar colocaremos el Widget CupertinoTabScaffold y dentro en la propiedad tabBar pondremos los tabs con el Widget CupertinoTabBar, como se ve a continuación:

class PlatziTripsCupertino extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   // TODO: implement build
   return Scaffold(
      bottomNavigationBar: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home, color: Colors.indigo),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search, color: Colors.indigo),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person, color: Colors.indigo),
                  title: Text("")
              ),
            ]
        ),
	);
}

De esta forma ya estamos generando un TabBar con el estilo transparente que tiene iOS. Ahora nos faltará manejar la navegación, eso lo haremos ahí mismo con la propiedad tabBuilder de la siguiente forma:

tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (BuildContext context) => HomeTrips(),
              );
              break;
            case 1:
              return CupertinoTabView(
                builder: (BuildContext context) => SearchTrips(),
              );
              break;
            case 2:
              return CupertinoTabView(
                builder: (BuildContext context) => ProfileTrips(),
              );
              break;

          }
},

Mira el código unificado aquí: https://github.com/anncode1/Curso-de-Flutter-en-Platzi/tree/16.BottomNavigationBarCupertino/lib

Este será el resultado:

Ahora ya puedes generar Widgets que luzcan tan nativos como tu diseño te lo exija.