Zoom network image

Akshay Kumar

11 July 2023

In this blog we are going to discuss the Implementation of Zoom network image in flutter.

Images are most commonly used in application for making application user experience interactive.

Some time in the small are we have to use the image having some informative content at that can all of the information can not be collected from that fixed small area image.

For zooming the content of the image we are going to implement the setup where we can get image from the network and can use it inside our image having zoom functionality.

You may also check our flutter app development services page to read more about Flutter app development from mobikul.

Implementation:

We are going to use the PhotoView widget for creating the zoom functionality.

For implementation follow below steps:

Add photo_view dependency inside pubspec.yaml file like below:

photo_view: ^0.14.0

1	photo_view: ^0.14.0

Import below package inside your widget class like below:

import 'package:photo_view/photo_view.dart';

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

Add view for displaying the image:

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


class ZoomImageScreen extends StatefulWidget {
  ZoomImageScreen({Key? key}) : super(key: key);

  @override
  _ZoomImageScreenState createState() => _ZoomImageScreenState();
}

class _ZoomImageScreenState
    extends State<ZoomImageScreen> {

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.only(top: 30.0),
        child: Scaffold(
            backgroundColor: Theme.of(context).colorScheme.background,
            appBar: AppBar(
              title: Text("Zoom image demo"),
            ),
            body: Center(
              child: Container(
                height: 200,
                color: Colors.white,
                width: 200,
                child: PhotoView(
                  backgroundDecoration: BoxDecoration(color: Colors.white),
                  enableRotation: true,
                  imageProvider: CachedNetworkImageProvider("https://demomobikul.webkul.com/mobikul4/pub/media/mobikulresized/392x261/mobikul/bannerimages/File-1682672984.jpg"),
                  maxScale: 100.0,
                ),
              ),
            ),
        ));
  }

}

import 'package:cached_network_image/cached_network_image.dart';

import 'package:flutter/material.dart';

import 'package:photo_view/photo_view.dart';

class ZoomImageScreen extends StatefulWidget {

ZoomImageScreen({Key? key}) : super(key: key);

@override

_ZoomImageScreenState createState() => _ZoomImageScreenState();

}

class _ZoomImageScreenState

extends State<ZoomImageScreen> {

@override

Widget build(BuildContext context) {

return Padding(

padding: const EdgeInsets.only(top: 30.0),

child: Scaffold(

backgroundColor: Theme.of(context).colorScheme.background,

appBar: AppBar(

title: Text("Zoom image demo"),

body: Center(

child: Container(

height: 200,

color: Colors.white,

width: 200,

child: PhotoView(

backgroundDecoration: BoxDecoration(color: Colors.white),

enableRotation: true,

imageProvider: CachedNetworkImageProvider("https://demomobikul.webkul.com/mobikul4/pub/media/mobikulresized/392x261/mobikul/bannerimages/File-1682672984.jpg"),

maxScale: 100.0,

));

}

We are using PhotoView for displaying the image with rotation feature.

We have used CachedNetworkImageProvider inside the PhotoView for image provider. It will access the image from url and display on the image view.

If you want to display images from the local resources the you can add below line of code:

PhotoView(
       backgroundDecoration: BoxDecoration(color: Colors.white),
       enableRotation: true,
       imageProvider: AssetImage("assets/images/placeholder.png"),
       maxScale: 200.0,
)

PhotoView(

backgroundDecoration: BoxDecoration(color: Colors.white),

enableRotation: true,

imageProvider: AssetImage("assets/images/placeholder.png"),

maxScale: 200.0,

)

Result

Result will look like:

Conclusion:

For more information regarding the Implementation of LinearGradient in flutter follow link.

In this blog, we have learned Implementation of Zoom network image on flutter to make the interactive UI experience in your app.

Thanks for reading this blog. You can also check other blogs from here.