13 Semana_13_Widgets_Flutter_v

Vista previa del material en texto

Semana 13: Widgets en Flutter (v)
Facultad de Ingeniería de Sistema e Informática
LENGUAJE DE PROGRAMACIÓN V
Ing. Angel Marthans Ruiz, Mg.
Objetivos: 
Al finalizar, el alumno logrará:
 Conocer los tipos de widgets srollables.
 Conocer los Widgets ListView y GridView
2
Temas:
 Widgets Scrollables
 Widget ListView
 Widget GridView
 Otros Widgets Scrollables
3
Widgets Scrollables
4
La creación de contenido desplazable (scrollable) es una parte esencial del desarrollo de la 
interfaz de usuario. Hay un límite de información que un usuario puede procesar a la vez, en la 
pantalla de su dispositivo.
Flutter tiene dentro de su catalogo de widgets, lo necesario para solucionar este tipo de 
escenario.
Widget ListView
5
ListView: Una lista desplazable de widgets dispuestos linealmente.
ListView es el widget de desplazamiento más utilizado. Muestra a sus hijos uno tras otro en la 
dirección de desplazamiento. En el eje transversal, se requiere que los hijos llenen el ListView.
Hay cuatro opciones para construir un ListView:
1. El constructor predeterminado toma una lista explícita de elementos hijos. Este constructor es 
apropiado para vistas de lista con un pequeño número de elementos hijos porque la 
construcción de la Lista requiere realizar un trabajo para cada elemento hijo que posiblemente 
podría mostrarse en la vista de lista en lugar de solo para aquellos elementos hijos que son 
realmente visibles.
Widget ListView
6
2. El constructor ListView.builder toma un IndexedWidgetBuilder, que crea los elementos hijos a 
pedido. Este constructor es apropiado para vistas de lista con una gran cantidad (o infinita) de 
elementos hijos porque el constructor se llama solo para aquellos elementos hijos que son 
realmente visibles.
3. El constructor ListView.separated toma dos IndexedWidgetBuilders: itemBuilder crea 
elementos hijos a pedido y separatorBuilder crea elementos hijos separadores que aparecen 
entre los elementos secundarios. Este constructor es apropiado para vistas de lista con un 
número fijo de hijos.
4. El constructor ListView.custom toma un SliverChildDelegate, que brinda la capacidad de 
personalizar aspectos adicionales del modelo secundario. Por ejemplo, un SliverChildDelegate
puede controlar el algoritmo utilizado para estimar el tamaño de los hijos que en realidad no son 
visibles.
Widget ListView
7
Este ejemplo usa el constructor predeterminado para ListView que toma una lista explícita de 
elementos hijos. Los elementos hijos de este ListView se componen de contenedores con texto.
Widget ListView
8
Este ejemplo refleja el anterior, creando la misma lista usando el constructor ListView.builder. 
Usando IndexedWidgetBuilder, los hijos se construyen de forma diferida (lazy) y pueden ser 
infinitos en número.
Widget ListView
9
Este ejemplo continúa construyendo a partir de los anteriores, creando una lista similar usando 
ListView.separated. Aquí, se utiliza un divisor como separador.
Widget ListView
1 0
Ciclo de vida de elementos hijos
Creación: Al diseñar la lista, los elementos hijos visibles, los estados y los objetos de 
representación se crearán de forma diferida en función de los widgets existentes (como cuando 
se usa el constructor predeterminado) o los proporcionados de forma diferida (como cuando se 
usa el constructor ListView.builder).
Destrucción: Cuando un elemento hijo se desplaza fuera de la vista, el subárbol de elementos 
asociados, los estados y los objetos de representación se destruyen. Un nuevo elemento hijo en 
la misma posición en la lista se recreará de forma diferida junto con nuevos elementos, estados y 
objetos de representación cuando se desplace hacia atrás.
Widget GridView
1 1
GridView: Un array 2D desplazable de widgets.
La dirección del eje principal de una cuadrícula es la dirección en la que se desplaza (la dirección 
de desplazamiento).
Los diseños de cuadrícula más utilizados son GridView.count, que crea un diseño con un número 
fijo de celdas en el eje transversal, y GridView.extent, que crea un diseño con celdas que tienen 
una extensión máxima en el eje transversal. 
Widget GridView
1 2
Este ejemplo demuestra cómo crear un GridView con dos columnas. Los elementos hijos se 
separan utilizando las propiedades crossAxisSpacing y mainAxisSpacing.
Widget GridView
1 3
Este ejemplo muestra cómo crear la misma cuadrícula que el ejemplo anterior mediante 
CustomScrollView y SliverGrid.
Referencias:
 https://api.flutter.dev/flutter/widgets/ListView-class.html
 https://docs.flutter.dev/ui/widgets/scrolling
 https://api.flutter.dev/flutter/widgets/GridView-class.html
1 4
https://api.flutter.dev/flutter/widgets/ListView-class.html
https://docs.flutter.dev/ui/widgets/scrolling
https://api.flutter.dev/flutter/widgets/GridView-class.html
La manera de empezar es dejar de 
hablar y comenzar a actuar.
Walt Disney
1 5
	�����Semana 13: Widgets en Flutter (v)
	Objetivos: �Al finalizar, el alumno logrará:
	Temas:
	Widgets Scrollables
	Widget ListView
	Widget ListView
	Widget ListView
	Widget ListView
	Widget ListView
	Widget ListView
	Widget GridView
	Widget GridView
	Widget GridView
	Referencias:
	La manera de empezar es dejar de hablar y comenzar a actuar.