Contenido del curso
Widget Listview
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
Estudiante
Alejandro Robleto
EstudianteKevin Meléndez Hernández
Estudiante
Carlos Sebastian Gracia Yañez
Estudiante
Adolfo Sebastián Jara Gavilanes
Estudiante
Chris Pérez
Estudiante
Anthony Jácobo
Estudiante
Alex Joel Sajama Calle
Estudiante
Edward Fernandez
Estudiante
Juan Pablo Jimenez
Estudiante
David Geronimo Quiroga Torres
Estudiante
Miguel Eduardo Langarano Guerrero
Estudiante
Julio J Yépez
Estudiante
Ann Code
Profesor
Jose Alfredo Vallejo Contreras
Estudiante
Ivan Srebernic
Estudiante
Luis Lozada
Estudiante
Nelson Eduardo Visbal Jensen
Estudiante
abigailrp
Estudiante
Sebastian Calapsu Carvajal
Estudiante
Yesid Anacona
Estudiante
Jhan Leonardo García Marroquín
Estudiante
Emmanuel Guerra Sánchez
Estudiante
Antonio Mendiola Farías
Estudiante
Edgar A. Gonzalez Ambriz
Estudiante
Jonathan Rocha
EstudianteHarold Castro Castillo
Estudiante
Coren Ancco Calloapaza
Estudiante
Tomás Antonio Díaz Montilla
Estudiante
Brayan Castellanos Mejía
Estudiante
Sebastian Valencia Zapata
EstudianteAlejandro Robleto
EstudianteLes comparto como va quedando mi proyecto y de paso aprovecho para hacer publicidad a mi pueblo todo precioso.
wow que bonita te quedo bro
Gracias bro! :3
Yo lo estoy haciendo algo diferente segun el diseño que me encargaron, y hasta ahora estoy feliz con el resultado
Genial como te esta quedando!
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?
Lo mismo quería que me saquen las dudas..???
Yo estuve probando en un iPhone 7 y ocurre lo mismo. ¿Saben el por qué?
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:
https://api.flutter.dev/flutter/material/Colors-class.html
Mira, acá encuentras los colores por si quieres ponerlos mas como querías (☞ﾟヮﾟ)☞
¿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.
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 …
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í
Lo que dijeron ellos
Para los que tuvieron problemas con el scroll horizontal para targets que no sean Mobile aquí la solución:
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. }; }
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...
Excelente investigación y aportación
Muchas gracias.
Como hago para que se oculten las cards si hago scroll hacia abajo?
No debes incluirlas en el Stack del Header, así subirán junto con los comentarios.
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?
Stack
Les recomiendo pasar sus imágenes por https://tinypng.com para que las imágenes pesen menos. Espero a alguien le sirva 😄
GRAN APORTE 💚💚💚
position: fixed
Stack
OMG!! Me encanta como queda, me impresiona haber hecho esto, es genial.
usriamos un Stack
