Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

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.

Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar

David Galicia

Estudiante

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

Estudiante

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

Estudiante

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)

Daniel Buitrago

Edgar Chavarria Bejar

Daniel Jussef Zamorano Silva

Steven Benjamín Diaz Flores

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

JUAN CARLOS TINIZHANAY QUITO

Aldrich Abdiel Cortero González

Andres Badillo

JHON EDUARD TRIANA VARGAS

Víctor Manuel Sarmiento Cayuelas

Fabian Ardila Castro

Victor Hugo Vázquez Gómez

Juan Sebastian Avila

Fernando Vallejo

Joseph Michael Ciriaco Bermudez

Freddy Jarquin

José Luis Vinces García

Nicolás Martínez

Felipe Hernández

Kevin Nick Pascual Tuesta

Richard salazar perez

Diego Fernando Morales Varon

Sebastián Barre

Eric Gomez

Cristhian Camilo Pérez Estrada

Alejandro Gomez

Dany Smoak

Ricardo Celis

Profesor

Diego Forero

Team Platzi

Alejandro Alvarez Alvarez

Company_admin

Sebastian Salazar

Fernando Mellone

Esteban Quito

Emmanuel Rodríguez

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