Tutorial membuat PhotoView di Flutter – Pada artikel ini, kita akan membahas bagaimana membuat PhotoView di flutter menggunakan package flutter photo view. Package ini memudahkan kita dalam memperoleh swipe animation di flutter. Selain itu, pada PhotoView dapat membuat suatu gambar dapat di zoom dan di geser menggunakan gerakan yang dilakukan oleh pengguna, seperti pinch, rotate, dan drag. Simak tutorial membuat PhotoView di Flutter berikut ini.

Daftar Isi

Kenapa PhotoView?

Kenapa PhotoView digunakan dalam tutorial kali ini? Hal ini dikarenakan PhotoView sangat sederhana dalam penggunaannya dan bisa di kustomisasi melalui opsi-opsi dan controller yang diberikan. Pada package ini juga disediakan properti loading yang dapat kita gunakan jika suatu citra membutuhkan waktu yang lama untuk dibuka.

Beberapa Properties Dasar

scrollDirection: properti ini memberikan arah scroll sehingga pengguna dapat menggeser suatu list dengan arah horizontal atau vertikal.
enableRotation: properti yang digunakan untuk mengaktifkan rotasi citra dengan tipe data boolean.
physics: properti scroll untuk menentukan kapan user mencapai maksimumnya atau berhenti scroll.
controller: propeti yang digunakan untuk mengatur faktor perubahan dari PhotoView dan melakukan update.
backgroundDecoration: properti yang merupakan penomoran indeks dari slide awal yang diinisiasi dan perubahan indeks sebelumnya.
loadingBuilder: properti ini fokus pada progress indicator berbentuk circular yang dipanggil oleh PhotoView kedalam layar yang diisi gambar.
maxScale: properti yang menentukan ukuran maksimal dari suatu citra yang mana citra tersebut lakukan sesuai dengan ukuran proporsi citra aslinya.
minScale: properti yang menentukan ukuran minimal dari suatu citra yang mana citra tersebut lakukan sesuai dengan ukuran proporsi citra aslinya.

Implementasi

Langkah 1: Tambah photo_view dependencies ke pubspec.yaml sesuai potongan kode dibawah ini.

dependencies:
  photo_view: ^0.11.1

Langkah 2: Import package photo_view

import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';

Langkah 3: Run flutter package get

Implementasi Kode

Siapkan list citra yang akan kalian gunakan untuk menampilkannya pada PhotoView melalui potongan kode berikut ini:

final imageList = [
    'assets/images/citra1.jpg',
    'assets/images/citra2.jpg',
    'assets/images/citra3.jpg',
    'assets/images/citra4.jpg',
    'assets/images/citra5.jpg',
  ];

Berikut kode lengkap untuk membuat photoview dengan fitur zoom dan pan (geser).

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

void main() {
  runApp(PhotoViewDemo());
}

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

ThemeData theme = ThemeData(
  primaryColor: Colors.black,
  backgroundColor: Colors.white10,
  fontFamily: 'PTSans',
);

class _PhotoViewDemoState extends State<PhotoViewDemo> {
  final imageList = [ 
'assets/images/citra1.jpg', 
'assets/images/citra2.jpg', 
'assets/images/citra3.jpg', 
'assets/images/citra4.jpg', 
'assets/images/citra5.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View Inpows',
      theme: theme,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Photo View Demo - Inpows"),
        ),
        body: Container(
          margin: EdgeInsets.only(left: 15, right: 15),
          child: PhotoViewGallery.builder(
            itemCount: imageList.length,
            builder: (context, index) {
              return PhotoViewGalleryPageOptions(
                imageProvider: NetworkImage(
                  imageList[index],
                ),
                minScale: PhotoViewComputedScale.contained * 0.8,
                maxScale: PhotoViewComputedScale.covered * 2,
                initialScale: PhotoViewComputedScale.contained * 0.8,
                heroAttributes: PhotoViewHeroAttributes(tag: imageList[index]),
              );
            },
            scrollPhysics: BouncingScrollPhysics(),
            backgroundDecoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20)),
              color: Theme.of(context).canvasColor,
            ),
            enableRotation: true,
            loadingBuilder: (context, event) => Center(
              child: Container(
                width: 20.0,
                height: 20.0,
                child: CircularProgressIndicator(
                  backgroundColor: Colors.orange,
                  value: event == null
                      ? 0
                      : event.cumulativeBytesLoaded / event.expectedTotalBytes,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Hasil yang diperoleh

Berikut ini adalah beberapa gambar yang merupakan hasil dari kode diatas ketika dijalankan.

Tutorial Membuat PhotoView di Flutter_citra3

Tutorial Membuat PhotoView di Flutter_citra1

Tutorial Membuat PhotoView di Flutter_citra2

Temukan source code menarik lainnya hanya di Inpows.