Tutorial Membuat PhotoView di Flutter
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.
Temukan source code menarik lainnya hanya di Inpows.
Baca Juga:
Satu Kali Permission Pada Android 11
WhatsApp tidak akan kompatibel pada Android dan iPhone ini mulai tahun 2021