Widget Listview

Resumen

La particularidad del widget ListView(), como ya lo habíamos adelantado en clases anteriores, es la capacidad de permitir el desplazamiento del contenido (generalmente items de una lista) que en principio queda ubicado fuera de la región visible de nuestra interfaz.

En esta clase implementamos el ListView(), con la particularidad de que el desplazamiento o scrolling que definiremos en la propiedad scrollDirection será horizontal y no vertical para lo cual usaremos la variable Axis.horizontal.

Algo importante que vale la pena recordar es que con Flutter podemos crear widgets personalizados que luego podemos parametrizar y reutilizar tantas veces como queramos.

Kevin Meléndez Hernández

student•

Les comparto como va quedando mi proyecto y de paso aprovecho para hacer publicidad a mi pueblo todo precioso.

Alejandro Robleto

student•

wow que bonita te quedo bro

Kevin Meléndez Hernández

student•

Gracias bro! :3

Carlos Sebastian Gracia Yañez

student•

Yo lo estoy haciendo algo diferente segun el diseño que me encargaron, y hasta ahora estoy feliz con el resultado

Adolfo Sebastián Jara Gavilanes

student•

Genial como te esta quedando!

Chris Pérez

student•

Anthony Jácobo

student•

Tengo una duda, al momento de correr la app en mi celular, las fotos demorar en cargar. Esto se debe porque lo estoy ejecutando desde android como prueba?, o se debe por el peso de las fotos? o es porque no uso una base de datos de las fotos?

Alex Joel Sajama Calle

student•

Lo mismo quería que me saquen las dudas..???

Edward Fernandez

student•

Yo estuve probando en un iPhone 7 y ocurre lo mismo. ¿Saben el por qué?

Juan Pablo Jimenez

student•

Continuando con el diseño que había comenzado, batalle un poco con como se manejan los colores y aun no quedé satisfecho del todo, pero aquí mi avance:

David Geronimo Quiroga Torres

student•

https://api.flutter.dev/flutter/material/Colors-class.html

Mira, acá encuentras los colores por si quieres ponerlos mas como querías (☞ﾟヮﾟ)☞

Miguel Eduardo Langarano Guerrero

student•

¿Cómo manejan las medidas de height, width, padding y margin?. Me refiero a los valores, por ejemplo, el height de la lista en este caso es 350.

Julio J Yépez

student•

Generalmente, en el desarrollo móvil nativo, la unidad de medida que se usa como referencia para las dimensiones de los objetos en las interfaces es el DPI o dpi (density-independent pixel per inch) que traduce algo como Pixel de tamaño fijo Independientemente de la densidad que tenga el display del Dispositivo (más o menos). El asunto es que hay una especie de estándar definido y aceptado en el desarrollo móvil que determina cuáles serían las dimensiones de las interfaces dependiendo de los dispositivos o de las configuraciones que se indiquen en el proyecto independientemente de la resolución o densidad real de la pantalla.

En este enlace puedes encontrar un poco más de profundidad con respecto a este tema …
https://openwebinars.net/blog/diferencias-entre-px-dp-y-sp-en-android/

Ann Code

teacher•

En Flutter no tiene un nombre estrictamente, por eso los llamamos p.

Lo que hace Flutter es que esa medida que coloques automáticamente la convierte a DPI’s asegurando que lo que estás viendo en el emulador será consistente en todas las resoluciones.

Esto lo hace tomando como referencia el devicePixelRatio del cuál puedes leer más aquí https://docs.flutter.io/flutter/dart-ui/Window/devicePixelRatio.html

Jose Alfredo Vallejo Contreras

student•

Ivan Srebernic

student•

Lo que dijeron ellos

Luis Lozada

student•

Para los que tuvieron problemas con el scroll horizontal para targets que no sean Mobile aquí la solución:

Crea un archivo dart con el nombre ejemplo scroll_behavior.dart.
agrégale el siguiente código:

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

class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => { 
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    // etc.
  };
}

Abre el archivo card_image_list.dart y modificalo así:

import 'package:flutter/material.dart';
import 'scroll_behavior.dart';
import 'card_image.dart';

class CardImageList extends StatelessWidget {
	List<String> items = [
		'assets/img/beach.jpeg',
		'assets/img/beach_palm.jpeg',
		'assets/img/mountain.jpeg',
		'assets/img/mountain_stars.jpeg',
		'assets/img/river.jpeg',
		'assets/img/sunset.jpeg'
	];
		
	@override
	Widget build(BuildContext context) {
		final ScrollController controller = ScrollController();

		return Container(
			height: 350.0,
			child: ScrollConfiguration(
				behavior: MyCustomScrollBehavior(),
				child: ListView.builder(
					padding: EdgeInsets.all(25.0),
					scrollDirection: Axis.horizontal,
					controller: controller,
			          itemCount: items.length,
			          itemBuilder: (context, index) {
			            return CardImage(items[index]);
			          },
		        )
			)
		);
	}
}

Eso es todo ahora puedes arrastrar la lista de imágenes de un lado a otro como de una pantalla touch se tratase, salu2...

Nelson Eduardo Visbal Jensen

student•

Excelente investigación y aportación

abigailrp

student•

Muchas gracias.

Sebastian Calapsu Carvajal

student•

Yesid Anacona

student•

Como hago para que se oculten las cards si hago scroll hacia abajo?

Jhan Leonardo García Marroquín

student•

No debes incluirlas en el Stack del Header, así subirán junto con los comentarios.

Emmanuel Guerra Sánchez

student•

No sé si me estoy adelantado a algo pero, a este tipo de AppBar personalizadas, ¿Se les puede dar efecto como el de un CollapsingToolbarLayout en Android?