Flutter Photo View widget with zoomable image gallery

Hi Guys, welcome to proto coders point In this Flutter Tutorial will see above flutter photo view package library widget.

Flutter Photo View widget with zoomable image gallery

Photo View widget in flutter is a simple zoomable image or any content widget in flutter application development.

Using PhotoView widget on any widget view enable the widget images to become able to add zoom effect and a pan with user gestures such a rotate,pinch and drag gestures.

It also can show any widget instead of an image, such as Container, Text or a SVG.

This image viewer widget is super simple to use and play, Flutter zoom photo view widget is extremely customizable through the various options it provide and easy  controllers.

For more details visit official site HERE

Let’s begin implementing this flutter widget in our project

Step 1:  Create new Flutter project

Create a new Flutter Project in android-studio or any other Framework or open your existing flutter project

File > New > New Flutter project

Once your project is ready remove all the default dart code from main.dart file

and just copy paste the below code in main.dart

main.dart

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, //primary theme color
      ),
      home: MyHomePage(), //call to homepage class
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Photo View + Zoomable widget"),
      ),
      // your body code here
    );
  }
}

Step 2:  Add Dependencies

Then, you need to add dependencies in your project

open pubspec.yaml file and under dependencies line add below

dependencies:
  photo_view: ^0.9.1

Step 3: import the photo view widget package

Once you have added photo_view dependencies in your project now you can use those packages into your project by just importing photo_view.dart library

import 'package:photo_view/photo_view.dart';

on the top of main.dart file  add this import statement.

This allows you to make user of flutter zoomable image photoViewer library in main.dart file

Step 4: Create a folder(assets) and add path to asset folder in pubspec.yaml file

You need to create a assets folder and assign the path to be able to access images under assets folder.

Right click ( project ) > New > Directory

Name it as assets  and then add some images under that folder.

After you add images in assets folder open pubspec.yaml file to assign access path to assets folder for your project, So that your project can easily use that folder.

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
  - assets/
  # add the above assets exactly below users-material-----

Then, now the project is ready to make use of Flutter PhotoView zoomable image widget

Zoom image  flutter basic code base

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, //primary theme color
      ),
      home: MyHomePage(), //call to homepage class
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Photo View + Zoomable widget"),
      ),
      // add this body tag with container and photoview widget
      body: Container(
          child: PhotoView(
        imageProvider: AssetImage("assets/nightwolf.jpeg"),
      )),
    );
  }
}

The above code will result you with:

Photo View Gallery

If you want to show more that 1 image in a form of slidable image gallery then you need to user PhotoViewGallery.dart package

import 'package:photo_view/photo_view_gallery.dart';

Copy paste the below code to  in main.dart file

Flutter photoview gallery example

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, //primary theme color
      ),
      home: MyHomePage(), //call to homepage class
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final imageList = [
    'assets/nightwolf.jpeg',
    'assets/lakeview.jpeg',
    'assets/redsundet.jpeg',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Photo View + Zoomable widget"),
      ),
      // add this body tag with container and photoview widget
      body: 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(
          color: Theme.of(context).canvasColor,
        ),
        loadingChild: Center(
          child: CircularProgressIndicator(),
        ),
      ),
    );
  }
}

Result : 

Conclusion