Membuat Photo View & Gallery Menggunakan Flutter

Photo View merupakan Library yang memungkinkan gambar bisa diperbesar dan bisa digeser dengan gerakan oleh pengguna seperti diputar, diseret.

Library ini juga dapat menampilkan widget apapun seperti Gambar, Text dan SVG.

Menyiapkan Proyek

Langkah pertama masukan library photo view dibagian file pubspec.yaml

...
dependencies:
  flutter:
    sdk: flutter
  photo_view: ^0.3.1
...

Memperbesar Gambar Secara Keseluruhan

Memperbesar, memperkecil dan memutar gambar secara keseluruhan.

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

void main() {
  runApp(new KodetrApp());
}

class KodetrApp extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo View'),
        ),
        body: PhotoView(
          imageProvider: NetworkImage(
            'https://kodetr.herokuapp.com/banners/post/flutter/flutter_photoview.webp',
          ),
          minScale: PhotoViewComputedScale.contained * 0.8,
          maxScale: PhotoViewComputedScale.covered * 2,
          enableRotation: true,
          backgroundDecoration: BoxDecoration(
            color: Theme.of(context).canvasColor,
          ),
          loadingChild: Center(
            child: CircularProgressIndicator(),
          ),
        ),
      ),
    );
  }
}

Result:

Membatasi Gambar

Menampilkan gambar dengan membatasi jika gambar diperbesar ataupun gambar diputar

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

void main() {
  runApp(new KodetrApp());
}

class KodetrApp extends StatelessWidget {
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Photo View'),
        ),
        body: Center(
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: ClipRect(
            child: PhotoView(
              imageProvider: NetworkImage(
                'https://kodetr.herokuapp.com/banners/post/flutter/flutter_photoview.webp',
              ),
              minScale: PhotoViewComputedScale.contained * 0.8,
              maxScale: PhotoViewComputedScale.covered * 2,
              enableRotation: true,
              loadingChild: Center(
                child: CircularProgressIndicator(),
              ),
            ),
          ),
        ),
      ),
      ),
    );
  }
}

Result:

Berbeda dengan PhotoView hanya menampung satu gambar, dengan photo gallery gambar bisa kita tampilkan lebih dari satu, untuk membuat photo gallery gambar harus ditampung dalam ListView

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

void main() {
  runApp(new KodetrApp());
}

class KodetrApp extends StatelessWidget {
final imageList = [
    'https://kodetr.herokuapp.com/banners/post/flutter/flutter_photoview.webp',
    'https://kodetr.herokuapp.com/banners/post/flutter/fluttermap.webp',
    'https://kodetr.herokuapp.com/banners/post/map/placenearby.webp',
  ];

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Photo View',
      home: Scaffold(
        appBar: AppBar(
         title: Text('Photo Gallery'),
        ),
        body: PhotoViewGallery.builder(
        itemCount: imageList.length,
        builder: (context, index) {
          return PhotoViewGalleryPageOptions(
            imageProvider: NetworkImage(
              imageList[index],
            ),
            minScale: PhotoViewComputedScale.contained * 0.8,
            maxScale: PhotoViewComputedScale.covered * 2,
          );
        },
        scrollPhysics: BouncingScrollPhysics(),
        backgroundDecoration: BoxDecoration(
          color: Theme.of(context).canvasColor,
        ),
        loadingChild: Center(
          child: CircularProgressIndicator(),
        ),
      ),
      ),
    );
  }
}

Result:

Kesimpulan

Dengan menggunakan Photo View anda bisa menampilkan gambar yang dapat disesuaikan seperti dapat di putar, diperbesar, diperkecil. Photo View Gallery dapat menampilkan gambar seperti roda dan gambar bisa diperbesar.

Share Comments
comments powered by Disqus