Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

Clase 41 de 45 • Curso de Flutter

Contenido del curso

Bienvenida e Introducción

Creando mi entorno de desarrollo

Interfaces en Flutter

Widgets sin estado en Flutter

Widgets con estado en Flutter

Fin del Curso

Tomar examen

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.

Comentarios

Daniel Buitrago

student•

Si te muestra el siguiente error:

The body might complete normally, causing ‘null’ to be returned, but the return type is a potentially non-nullable type. Try adding either a return or a throw statement at the end.

Necesitas agregarle al final un default y retornar tu vista por ejemplo Home:

De esta manera quedó mi switch

 switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (BuildContext context) => Home(),
              );
            case 1:
              return CupertinoTabView(
                builder: (BuildContext context) => Search(),
              );
            case 2:
              return CupertinoTabView(
                builder: (BuildContext context) => Profile(),
              );
            default:
              return CupertinoTabView(
                builder: (BuildContext context) => Home(),
              );
          }

Código completo aquí, presentará algunas variaciones

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home.dart';
import 'search.dart';
import 'profile.dart';

class NavifationBarCupertinoIos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ignore: todo
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.indigo), label: ""),
          BottomNavigationBarItem(
              icon: Icon(Icons.search, color: Colors.indigo), label: ""),
          BottomNavigationBarItem(
              icon: Icon(Icons.person, color: Colors.indigo), label: ""),
        ]),
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (BuildContext context) => Home(),
              );
            case 1:
              return CupertinoTabView(
                builder: (BuildContext context) => Search(),
              );
            case 2:
              return CupertinoTabView(
                builder: (BuildContext context) => Profile(),
              );
            default:
              return CupertinoTabView(
                builder: (BuildContext context) => Home(),
              );
          }
        },
      ),
    );
  }
}

Edgar Chavarria Bejar

student•

Muchas gracias! Por más que buscaba documentación no entendía por completo, me ayudó mucho.

Daniel Jussef Zamorano Silva

student•

Mil gracias de vdd!

Steven Benjamín Diaz Flores

student•

Si quieren poner que los botones con cupertino se vean morados activados y grises cuando no, en el widget CupertinoTabBar hay una propiedad llamada "activeColor" y ahi declaran el color "Colors.indigo" o "Colors.purple" en vez de en Icon()

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

buen aporte compañero.

JUAN CARLOS TINIZHANAY QUITO

student•

Hola stevenbdf2019, puedes escribir el código de como lo implementas el activeColor.

Aldrich Abdiel Cortero González

student•

Aqui les dejo el codigo listo para correr, ya corregi el atributo "title" que se encuentra obsoleta en las versiones mas mas nuevas, solo la cambie por "label".

class PlatziTripsCupertino extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
            backgroundColor: Color(0x33FFFFFF),
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home, color: Colors.indigo),
                  label: ""
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search, color: Colors.indigo),
                  label: ""
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person, color: Colors.indigo),
                  label: ""
              ),
            ]
        ),
        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;
          }
        },
      ),
    );
  }

}

Andres Badillo

student•

En mi caso para poder el BottonNavigationBar transparente tuve que agregar backgorundColor:

tabBar: CupertinoTabBar(
          activeColor: Colors.indigo,
          backgroundColor: Colors.transparent,
          items: const [
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                ),
                label: null),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.search,
                ),
                label: null),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.person,
                ),
                label: null)
          ],
        ),

JHON EDUARD TRIANA VARGAS

student•

Gracias

Víctor Manuel Sarmiento Cayuelas

student•

Tengo una duda, si desarrollo para Android y para iOS, como consigo usar las particularidades de uno, al crear la app en ambas versiones.

Fabian Ardila Castro

student•

Debes tener una Mac para ir probando tu app en iOS o alquilar una maquina virtual Mac OS en AWS.

Victor Hugo Vázquez Gómez

student•

Yo recomendaría quitar la propiedad Text() si no vamos a colocar nada ahí porque se los iconos se verán pegados al borde del CupertinoTabBar, pero si le ponemos texto se ve muy bonito 😄

Juan Sebastian Avila

student•

Se ve genial!

Fernando Vallejo

student•

En un video anterior @anncode indicó que el BottomNavigationBarItem le pedía como propiedad obligatoria texto, creo que por eso lo dejo.

Joseph Michael Ciriaco Bermudez

student•

Quedo Excelente!

Freddy Jarquin

student•

Por que no funciona el SnackBar con la versión de cupertino?

José Luis Vinces García

student•

Nicolás Martínez

student•

Asi me quedo :D, gracias a los compañeros por sus aportes, ayudan bastante

 //cambia el color del menuItem seleccionado
 activeIcon: Icon(Icons.home, color: Color(0xCFF584CD1),)

CupertinoTabBar(
          backgroundColor: Colors.white.withAlpha(50),
          items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.white54),
            activeIcon: Icon(Icons.home, color: Color(0xCFF584CD1),)

          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search, color: Colors.white54),
            activeIcon: Icon(Icons.search, color: Color(0xCFF584CD1),)

          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, color: Colors.white54),
            activeIcon: Icon(Icons.person, color: Color(0xCFF584CD1),)

          )
        ])

Felipe Hernández

student•

Estimada AnnCode, recibe un cordial saludo, tengo una duda al implementar Cupertino BottomNavigation no funciona el snackBar, es un issue o estaré omitiendo algo del código?

Kevin Nick Pascual Tuesta

student•

Bueno parece que si es un issue. Y no solo eso si te fijas también no funciona bien el bottomNavigation ya que tiene los mismos colores en estado activo y no.

Kevin Nick Pascual Tuesta

student•

Pero encontre esto como implementar material design & cupertino respectivamente en su lenguaje nativo.

Espero que te sirva.

Richard salazar perez

student•

SnackBar no funciona con Cupertino?

Diego Fernando Morales Varon

student•

Tambien note lo mismo, que apenas se activa la barra de cupertino deja de funcionar el SnackBar

Sebastián Barre

student•

Si se recicla la lista del código anterior

static final List<Widget> navigationWidget = [
    HomeView(),
    SearchView(),
    ProfileView()
  ];

Se puede optimizar el tabBuilder

tabBuilder: (BuildContext context, int index){
            return CupertinoTabView(
              builder: (BuildContext context) => navigationWidget[index]
            );
          }

David Galicia

student•

Listo!. Aunque a mi parecer noto un poco menos el efecto de transparencia en Android. De ahi en fuera lo unico que me dio unos problemas fue la clase donde se implemento Cuppertino ya que por alguna razón el editor te da una advertencia de que no se devuelve un valor, no impide el funcionamiento de la aplicación pero se soluciona agregando el comentario ignore: missing_return .

platzi_trips.dart

class PlatziTrips extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _PlatziTrips();
  }


}

class _PlatziTrips extends State<PlatziTrips>{

 static int indexTap =0;


  final List<Widget> widgetsChildren = [
    HomeTrips(),
    SearchTrips(),
    ProfileTrips()
  ];

  void onTapTapped (int index){
    //Controlando el estado del widget
    setState(() {
      indexTap = index; //Recibe un indice y se lo asigna a indexTap
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: PlatziTripsCupertino(),

    );
  }

}

platzi_trips_cupertino.dart

 @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("")
              ),
            ]
        ),
        //ignore: missing_return
        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;

          }

        },
      ),
    );
  }

Resultado:

Denis Morales

student•

Te advierte que no devuelve valor, porque la funcion anonima debe devolver un widget, y con el switch ponen opcion 0,1 y 2, si en caso no se de alguno de esos valores, no devolvera un Widget, por eso sale la advertencia, lo que falta es agregar al switch un caso por defecto.

Por ejemplo:

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;
            default:
              return CupertinoTabView(
                builder: (BuildContext context) => HomeTrips(),
              );
          }```
}

De esa manera se elimina la advertencia.

Edisson Castro

student•

Creo que el tema de la advertencia es porque en los case no llevas separado el valor de la palabra reservada case (o al menos así se ve en el código que colocaste)

Eric Gomez

student•

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_trips.dart';
import 'search_trips.dart';
import 'map_trips.dart';
import 'notification_trips.dart';
import 'profile_trips.dart';

class PlatziTripsCupertino extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
            backgroundColor: Colors.white.withAlpha(50),//Color desvanecido en CupertinoTabScaffold
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.place),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.notifications),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  title: Text("")
              ),
            ]
        ),

        // ignore: missing_return
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (BuildContext context) => HomeTrips(),
              );
              break;
            // ignore: missing_return
            case 1:
              return CupertinoTabView(
                builder: (BuildContext context) => SearchTrips(),
              );
              break;
            case 2:
              return CupertinoTabView(
                builder: (BuildContext context) => MapTrips(),
              );
              break;
            case 3:
              return CupertinoTabView(
                builder: (BuildContext context) => NotificationTrips(),
              );
              break;
            case 4:
              return CupertinoTabView(
                builder: (BuildContext context) => ProfileTrips(),
              );
              break;

          }

        },
      ),
    );
  }

}

Cristhian Camilo Pérez Estrada

student•

He seguido todos los paso para usar el tema de Cupertino pero noto que no toma la transparencia, pero si los estilo y colores de la barra inferior.

Alejandro Gomez

student•

Hay forma de que manipulando la propiedad canvasColor se agregue ese mismo color entre blanco y transparente, sin necesidad de importar los packages de cupertino?

Dany Smoak

student•

¿Eliminaron el repositorio?

Ricardo Celis

teacher•

parace que la profesora lo borró o movió accidentalmente, le pediré una url funcional!

Diego Forero

Team Platzi•

Hola, no solo cambio la estructura de la url aquí esta https://github.com/anncode1/Curso-de-Flutter-en-Platzi/tree/16.BottomNavigationBarCupertino/lib

Alejandro Alvarez Alvarez

company_admin•

import 'package:flutter/material.dart'; import 'package:flutter/cupertino.dart'; import 'home_trips.dart'; import 'search_trips.dart'; import 'profile_trips.dart';

class TripsCupertino extends StatelessWidget{ @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( bottomNavigationBar: CupertinoTabScaffold( tabBar: CupertinoTabBar( backgroundColor: (Colors.white30),

      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home,color: Colors.greenAccent),
          title: Text("")
        ),

        BottomNavigationBarItem(
            icon: Icon(Icons.search,color: Colors.greenAccent),
            title: Text("")
        ),

        BottomNavigationBarItem(
            icon: Icon(Icons.person,color: Colors.greenAccent),
            title: Text("")
        ),
      ],
    ),

// ignore: missing_return
tabBuilder: (BuildContext context, int index) {
  // ignore: missing_return
  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;
  }
},


  ),

);

}

Sebastian Salazar

student•

Tengo una duda, el BottomNavigationBar de Cupertino siempre debe ser un Stateless Widget, es que encontré una diferencia en el comportamiento de ambos, en el bar de Cupertino( statless) cuando hago un cambio en la pantalla si cambio de Tab se mantiene el cambio, en cambio en el caso de el widget de Material(Stateful) si cambio de Tab los cambios que hice en la pantalla se reinician

Fernando Mellone

student•

Me pasa lo mismo. Incluso cuando uso el scroll los buttons de los lados se reinician, no así los del centro.

Esteban Quito

student•

Lo solucionaste? a mi me pasa con el botón de favoritos, cuando muevo el ListView se reinicia

Emmanuel Rodríguez

student•

Si no les aparece un blur en su nav (que por defencto es blanco), agreguen el atributo

//Con blur de en color
backgroundColor: Colors.white30
//Con opacidad en tono
backgroundColor: Colors.white.withAlpha(50)

Para intensificar (o difuminar) su efecto

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("")
              ),
            ]
        ),
	);
}

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;

          }
},

 switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (BuildContext context) => Home(),
              );
            case 1:
              return CupertinoTabView(
                builder: (BuildContext context) => Search(),
              );
            case 2:
              return CupertinoTabView(
                builder: (BuildContext context) => Profile(),
              );
            default:
              return CupertinoTabView(
                builder: (BuildContext context) => Home(),
              );
          }

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home.dart';
import 'search.dart';
import 'profile.dart';

class NavifationBarCupertinoIos extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // ignore: todo
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(items: [
          BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.indigo), label: ""),
          BottomNavigationBarItem(
              icon: Icon(Icons.search, color: Colors.indigo), label: ""),
          BottomNavigationBarItem(
              icon: Icon(Icons.person, color: Colors.indigo), label: ""),
        ]),
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (BuildContext context) => Home(),
              );
            case 1:
              return CupertinoTabView(
                builder: (BuildContext context) => Search(),
              );
            case 2:
              return CupertinoTabView(
                builder: (BuildContext context) => Profile(),
              );
            default:
              return CupertinoTabView(
                builder: (BuildContext context) => Home(),
              );
          }
        },
      ),
    );
  }
}

class PlatziTripsCupertino extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
            backgroundColor: Color(0x33FFFFFF),
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home, color: Colors.indigo),
                  label: ""
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search, color: Colors.indigo),
                  label: ""
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person, color: Colors.indigo),
                  label: ""
              ),
            ]
        ),
        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;
          }
        },
      ),
    );
  }

}

tabBar: CupertinoTabBar(
          activeColor: Colors.indigo,
          backgroundColor: Colors.transparent,
          items: const [
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.home,
                ),
                label: null),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.search,
                ),
                label: null),
            BottomNavigationBarItem(
                icon: Icon(
                  Icons.person,
                ),
                label: null)
          ],
        ),

CupertinoTabBar(
          backgroundColor: Colors.white.withAlpha(50),
          items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.white54),
            activeIcon: Icon(Icons.home, color: Color(0xCFF584CD1),)

          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search, color: Colors.white54),
            activeIcon: Icon(Icons.search, color: Color(0xCFF584CD1),)

          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person, color: Colors.white54),
            activeIcon: Icon(Icons.person, color: Color(0xCFF584CD1),)

          )
        ])

class PlatziTrips extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _PlatziTrips();
  }


}

class _PlatziTrips extends State<PlatziTrips>{

 static int indexTap =0;


  final List<Widget> widgetsChildren = [
    HomeTrips(),
    SearchTrips(),
    ProfileTrips()
  ];

  void onTapTapped (int index){
    //Controlando el estado del widget
    setState(() {
      indexTap = index; //Recibe un indice y se lo asigna a indexTap
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: PlatziTripsCupertino(),

    );
  }

}

 @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("")
              ),
            ]
        ),
        //ignore: missing_return
        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;

          }

        },
      ),
    );
  }

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;
            default:
              return CupertinoTabView(
                builder: (BuildContext context) => HomeTrips(),
              );
          }```
}

De esa manera se elimina la advertencia.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'home_trips.dart';
import 'search_trips.dart';
import 'map_trips.dart';
import 'notification_trips.dart';
import 'profile_trips.dart';

class PlatziTripsCupertino extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      bottomNavigationBar: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
            backgroundColor: Colors.white.withAlpha(50),//Color desvanecido en CupertinoTabScaffold
            items: [
              BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.search),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.place),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.notifications),
                  title: Text("")
              ),
              BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  title: Text("")
              ),
            ]
        ),

        // ignore: missing_return
        tabBuilder: (BuildContext context, int index) {
          switch (index) {
            case 0:
              return CupertinoTabView(
                builder: (BuildContext context) => HomeTrips(),
              );
              break;
            // ignore: missing_return
            case 1:
              return CupertinoTabView(
                builder: (BuildContext context) => SearchTrips(),
              );
              break;
            case 2:
              return CupertinoTabView(
                builder: (BuildContext context) => MapTrips(),
              );
              break;
            case 3:
              return CupertinoTabView(
                builder: (BuildContext context) => NotificationTrips(),
              );
              break;
            case 4:
              return CupertinoTabView(
                builder: (BuildContext context) => ProfileTrips(),
              );
              break;

          }

        },
      ),
    );
  }

}

      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home,color: Colors.greenAccent),
          title: Text("")
        ),

        BottomNavigationBarItem(
            icon: Icon(Icons.search,color: Colors.greenAccent),
            title: Text("")
        ),

        BottomNavigationBarItem(
            icon: Icon(Icons.person,color: Colors.greenAccent),
            title: Text("")
        ),
      ],
    ),

// ignore: missing_return
tabBuilder: (BuildContext context, int index) {
  // ignore: missing_return
  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;
  }
},


  ),

);

Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

Bienvenida e Introducción

¡Renovaremos este curso!

Desarrollando en Flutter

¿Qué es Flutter?

Dart y Flutter

Sintaxis de Dart

¡Renovaremos este curso!

Flutter para desarrolladores Android, iOS y Xamarin.forms

Flutter para desarrolladores React Native

¿Cómo luce una app construída en Flutter?

Primer reto

Creando mi entorno de desarrollo

¡Renovaremos este curso!

Requerimientos de Hardware y Software

Instalando Flutter en Android Studio y Visual Studio Code

Composición de un proyecto en Flutter

Interfaces en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Programación Declarativa en Flutter

Estructura de un programa en Flutter

Hola Mundo en Flutter

Widgets básicos

Widgets con estado y sin estado

Análisis de Interfaces de Usuario en Flutter

Definiendo los layouts de nuestra interfaz

Segundo reto

Widgets sin estado en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Flutter Widgets: Container, Text, Icon, Row

Flutter Widgets: Column

Recursos en Flutter: Tipografías y Google Fonts

Widget Image

Widget Apilando Textos

Widgets Decorados

Widget Imagen Decorada

Widget Listview

Widget Button, InkWell

Tercer reto

Widgets con estado en Flutter

¡Renovaremos este curso! Te quedan unos días para concluirlo.

Botones en Flutter

Clase StatefulWidget: Cómo se compone

Widget Floating Action Button

Widgets BottomNavigationBar

Generando Navegación en BottomNavigationBar