Un visor de fotos es una herramienta que permite a los usuarios ver imágenes es un carrusel o similar, básicamente,permite ver un conjunto de fotos de una manera sencilla pasando de una foto a otra mediante controles y/o gestos.
En este artículo, vamos a crear un PhotoView o visor de fotos en Flutter usando el paquete:
photo_viewCon la ayuda de este paquete, podemos crear fácilmente el efecto Swiper animado o de lado a lado para nuestras fotos y lograr nuestro objetivo.
PhotoView:
El widget de vista o visor de fotos en Flutter es una imagen simple que aparece en nuestra pantalla empleando obviamente un widget. Los usuarios podrán rotar y ampliar la imagen y moverse hacia otras imágenes de su interés.
El paquete proporciona una propiedad de carga que usamos durante el tiempo que le toma a cualquier imagen hasta que el indicador de carga rotará. Entendamos las propiedades en detalle.
Algunas propiedades y conceptos básicos:
- scrollDirection: Es para indicar la dirección del desplazamiento en la que podemos desplazar la lista en dirección vertical u horizontal.
- enableRotation: La propiedad enable Rotation se usa para rotar la imagen, es un booleano
- physics: Usamos la propiedad physics para realizar el desplazamiento. Determina cuándo el usuario alcanza el límite máximo de desplazamiento o deja de desplazarse.
- controller: Las propiedades del controlador son una forma de controlar los factores de cambio de PhotoView y escuchar sus cambios mediante los listeners.
- backgroundDecoration: Decoración de la imagen que vas a mostrar inicialmente.
- loadingBuilder: Indicador de progreso que aparece cuando se está cargando la imagen.
- maxScale: La propiedad maxScale define el tamaño máximo de la imagen.
- minScale: La propiedad minScale define el tamaño mínimo de la imagen.
Implementación:
Paso 1: Agregue las dependencias
Agregue dependencias al archivo pubspec - yaml.
dependencias:
dependencies:
photo_view: Paso 2: Importar el paquete
import 'package:photo_view/photo_view.dart';Ejemplo mínimo
Tal cual indica la documentación oficial, podemos crear un ejemplo mínimo con el siguiente contenido que no hace más que mostrar una imagen:
@override
Widget build(BuildContext context) {
return Container(
child: PhotoView(
imageProvider: AssetImage("assets/large-image.jpg"),
)
);
}Implementación de código completo:
Este es un ejemplo más completo en la cual vamos a ver más opciones; primeramente, necesitamos un conjunto de imágenes que por supuesto, si son locales, tienes que definirlas dentro de tu .yaml:
assets:
- assets/En primer lugar, hemos creado una lista de la imagen.
final imageList = [
'assets/cartas.jpg',
'assets/maleta.jpg',
'assets/reloj.jpg',
'assets/te.jpg',
];Antes de usar el widget PhotoView creamos un contenedor dentro del cual se usa la clase PhotoViewGallery.builder. Esta clase creará una lista de imágenes. Dentro de la clase del constructor se encuentra la clase PhotoViewGalaryPageOptions, que ha establecido la escala de la imagen y el tipo de enableRotation es verdadero y la imagen puede rotar.
class HomePage extends StatelessWidget {
final imageList = [
'assets/cartas.jpg',
'assets/maleta.jpg',
'assets/reloj.jpg',
'assets/te.jpg',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
body: Container(
child: PhotoViewGallery.builder(
itemCount: imageList.length,
builder: (context, index) {
return PhotoViewGalleryPageOptions(
imageProvider: AssetImage(
imageList[index],
),
minScale: PhotoViewComputedScale.contained * 0.8,
maxScale: PhotoViewComputedScale.covered * 2,
);
},
scrollPhysics: BouncingScrollPhysics(),
backgroundDecoration: BoxDecoration(),
enableRotation: true,
),
),
);
}
}
El BouncingScrollPhysics nos permite hacer un efecto interesante cuando sería necesario aplicar el scroll, por ejemplo, en la fase de escalado de la imagen; para más detalles, consulta la documentación oficial.
Conclusión:
En este artículo ofrece una introducción al uso del PhotoView en Flutter mediante un paquete rápidamente y fácilmente con un conjunto de opciones muy fáciles de entender e implementar.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter