Menggunakan Package Photo View Untuk Zoom In/Out di Flutter

Menampilkan Foto di Flutter adalah menambahkan sebuah widget untuk penampilkan foto/gambar sederhana yang dapat diperbesar (Zoom in) atau widget konten apa pun dalam pengembangan aplikasi flutter. Pengguna aplikasi dapat memutar dan memperbesar foto/gambar. package ini menyediakan properti yang dapat digunakan untuk waktu yang diperlukan untuk foto/gambar apa pun. Mari kita pahami propertinya secara detail.

Beberapa Properti Dasar dari package Photo View

  1. scrollDirection: Properti scrollDirection adalah untuk memberikan arah gulir sehingga kita dapat menggulir daftar ke arah vertikal atau horizontal.
  1. enableRotation: Properti enableRotation digunakan untuk memutar gambar, ini adalah type jenis bool (true/false).
  1. physics: Kami menggunakan properti physics untuk melakukan pengguliran. Ini menentukan kapan pengguna mencapai batas gulir maksimum atau berhenti menggulir.
  1. controller: Properti controller adalah cara untuk mengontrol faktor perubahan PhotoView dan mendengarkan pembaruannya.
  1. backgroundDecoration: Properti indeks adalah nomor indeks slide awal yang memulai slide dan memperbarui indeks sebelumnya.
  1. loadingBuilder: Properti loadingBuilder adalah indikator melingkar terfokus yang dipanggil melalui tampilan foto ke dalam layar gambar.
  1. maxScale: Properti maxScale menentukan ukuran maksimum gambar yang boleh diambil, sebanding dengan ukuran gambar asli.
  1. minScale: Properti minScale menentukan ukuran maksimum gambar yang boleh diambil, sebanding dengan ukuran gambar asli.
Contoh Photo View



Installasi Package

tambakan package photo_view di dependency pubspec.yaml file.

Dependensi :
dependencies:   
photo_view: ^0.11.0

Import Photo View:
import 'package:photo_view/photo_view.dart';


Implementasi :
Pertama-tama, kita telah membuat daftar gambar.
final imageList = [ 
  'aset/gambar/villa_img2.jpg' , 
  'aset/gambar/resort_1.jpg' , 
  'aset/gambar/resort_3.jpg' , 
  'aset/gambar/getRadyForSummer.jpg' , 
];

Sebelum menggunakan widget PhotoView, kita membuat class yang di dalamnya terdapat kelas PhotoViewGallery.builder yang digunakan. class ini akan membuat daftar gambar. Di dalam builder class terdapat class PhotoViewGalaryPageOptions, yang telah mengatur skala gambar dan jenis enableRotation yang benar agar gambar dapat diputar (rotasi).


  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(
    borderRadius:BorderRadius.all(Radius.circular(20)),
    color: Theme.of(context).canvasColor,
  ),
  enableRotation:true,
  loadingBuilder: (context, event) => Center(
    child: Container(
      width: 30.0,
      height: 30.0,
      child: CircularProgressIndicator(
        backgroundColor:Colors.orange,
        value: event == null
            ? 0
            : event.cumulativeBytesLoaded / event.expectedTotalBytes,
      ),
    ),
  ),
),
  

Apabila kita menjalakan project kita akan tampil hasil galleri foto/gambar yang bisa kita perbesar (Zoom in/out) dan juga di putar (rotation) sesuai dengan skala yang kita inginkan.

Full Code Untuk Photo View


import 'package:flutter/material.dart';
import 'package:flutter_photo_view_demo/themes/device_size.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

class PhotoViewDemo extends StatefulWidget {
  @override
  _PhotoViewDemoState createState() => _PhotoViewDemoState();
}

class _PhotoViewDemoState extends State {
  final imageList = [
    'assets/images/villa_img2.jpg',
    'assets/images/resort_1.jpg',
    'assets/images/resort_3.jpg',
    'assets/images/getRadyForSummer.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("PhotoView Demo"),
      ),
      // add this body tag with container and photoview widget
      body: Container(
        height: DeviceSize.height(context),
        margin: EdgeInsets.only(left: 15, right: 15),
        width: DeviceSize.width(context),
        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(
            borderRadius: BorderRadius.all(Radius.circular(20)),
            color: Theme.of(context).canvasColor,
          ),
          enableRotation: true,
          loadingBuilder: (context, event) => Center(
            child: Container(
              width: 30.0,
              height: 30.0,
              child: CircularProgressIndicator(
                backgroundColor: Colors.orange,
                value: event == null
                    ? 0
                    : event.cumulativeBytesLoaded / event.expectedTotalBytes,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Saya harap artikel ini akan memberi Anda informasi yang cukup untuk mencoba PhotoView dalam proyek flutter Anda. Kami akan menunjukkan kepada Anda apa itu PhotoView, dan mengerjakannya dalam aplikasi flutter Anda, Jadi silakan mencobanya.

Lebih baru Lebih lama