en versiones nuevas de flutter (2020) se utiliza label en lugar de title y para ocultarlos debemos utilizar las propiedades marcas en la imagen, de esa manera los iconos se acomodan correctamente y no quedan mas arriba como si tuvieran texto abajo
Bienvenida e Introducción
Desarrollando en Flutter
¿Qué es Flutter?
Dart y Flutter
Sintaxis de Dart
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
Requerimientos de Hardware y Software
Instalando Flutter en Android Studio y Visual Studio Code
Composición de un proyecto en Flutter
Interfaces en Flutter
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
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
Botones en Flutter
Clase StatefulWidget: Cómo se compone
Widget Floating Action Button
Widgets BottomNavigationBar
Generando Navegación en BottomNavigationBar
Personalizando nuestro BottomNavigation Bar a Cupertino iOS BottomBar
Cuarto reto
Fin del Curso
Conclusiones
¡Terminamos!
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Para completar el funcionamiento de nuestro BottomNavigationBar definiremos el método onTapTapped()
que contendrá la lógica para la navegación entre las diferentes vistas de nuestra aplicación como respuesta a la interacción con el usuario, y que estará asignada a la propiedad onTap
.
Para controlar el cambio de vistas nos valemos precisamente de la condición de mutabilidad del widget modificando la variable indexTap
con la función setState()
, fijándola en el valor del índice que recibe el método onTapTapped()
como parámetro y que hace referencia a la posición del BottomNavigationBarItem
que fue presionado. Al asignar el valor de este índice a la propiedad currentIndex
automáticamente se cambiará de vista producto del comportamiento reactivo de este tipo de widgets con estado.
Aportes 23
Preguntas 3
en versiones nuevas de flutter (2020) se utiliza label en lugar de title y para ocultarlos debemos utilizar las propiedades marcas en la imagen, de esa manera los iconos se acomodan correctamente y no quedan mas arriba como si tuvieran texto abajo
Así va quedando: ¡Golden Boys BARBERSHOP!
Sin querer ya tengo una noción de como hacer una app básica, sin duda me será de ayuda 😃
Llegar a este punto y que todo valla segun lo planeado es muy emocionante.
Generando una lista de Widget se podría solucionar la cantidad de estrellas completas, medias o vacías que vimos en las clases anteriores, o hay una mejor manera para ello?
Aún me hace falta hacerle cambios a la tipografía más que nada, pero ya me va gustando más
Ayuda mi bottomNavigationBar sale así,
.copyWith(
canvasColor: Colors.white,
primaryColor: Colors.purple
),
child: BottomNavigationBar(
onTap: onTapTapped,
currentIndex: index,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("")
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text("")
),
BottomNavigationBarItem(
icon: Icon(Icons.settings),
title: Text("")
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text("")
)
],
),
),
Alguien sabe si hay algun repositorio en github donde este le proyecto?
.
.
tambien se puede trabajar asi
final tabs = [
HomeTrips(),
SearchTrips(),
ProfileTrips()
];
return CupertinoTabView(
builder: (BuildContext context) => tabs[index],
);
Si les sucede como a mi que Theme no está aplicando el color morado a los iconos del bottom navigation bar, pueden asignarles colores y comportamientos agregando estos parametros en el widget BottomNavigationBar.
BottomNavigationBar(
onTap: onTapTapped,
currentIndex: indexTap,
selectedItemColor: Colors.deepPurple,
unselectedItemColor: Colors.deepPurpleAccent,
)
Una pestaña en inglés es “tab”, pienso que el método quedaría mejor: onTabTapped o quizás mejor onTabSelected. Pareciera sin mucha importancia, pero nombrar bien los methods es una buena práctica de arquitectura, pensando en el trabajo en equipo.
Hasta el momento todo bien, 😁
Se ve tan genial tener ambos emuladores con las apps funcionandos hasta este paso! 🤩
El mejor curso
excelente cursooo
Un excelente curso
Hola como estan , tengo el siguiente error cuando navego entre las pestañas del profile y search.
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following Container object was thrown building SearchTrips(dirty):
Container(bg: MaterialAccentColor(primary value: Color(0xffffd740)))
The relevant error-causing widget was:
SearchTrips file:///C:/Users/Lenovo/AndroidStudioProjects/platzi_trips_app/lib/platzi_trips.dart:23:7
When the exception was thrown, this was the stack:
#0 SearchTrips.build (package:platzi_trips_app/search_trips.dart:7:5)
#1 StatelessElement.build (package:flutter/src/widgets/framework.dart:4576:28)
#2 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4502:15)
#3 Element.rebuild (package:flutter/src/widgets/framework.dart:4218:5)
#4 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4481:5)
Para agregar mas de tres iconos
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed, //Cambiamos el tipo de la barra de navegación a fixed
onTap: onTapTapped,
currentIndex: indexTap,
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("")
),
])
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.