Flutter Photo View & Gallery - Resize & Rotate + Image Carousel

images speak louder than words having a good image is just half of the battle though if the image is non-responsive non resizable and overall the user experience is not that great your app will suffer this is where the photo view library comes to the rescue with it you can easily create images which can be resized and manipulated and on top of that photo view also simplifies the creation of image growls otherwise known as galleries its online privacy important to you of course it is with North VP and you will be safe whether you are at home on your computer or on your phone connected to a public Wi-Fi nor VPN has got you covered with military-grade encryption unlimited bandwidth servers in more than 62 countries around the world absolutely no logging easy to use apps for all the different platforms superfast servers and North EPN comes with a 30-day money-back guarantee as if that wasn't enough and now you can get 75% of nor VPN plus an additional amount for free if use the link in the description or use the coupon code reso coder during the checkout hello welcome to resale coder and let's first set up the project the first step is obviously to go into the pub spec diamo file and import the photo view library link to the photo of you libraries in the video description and so is the fully written tutorial from which you can learn at your own pace so definitely check it out after we have imported the photo view and saved the pub spec diamo file let's create our first page which will display the most basic form of photo view usage so in a new file called simple photo view page the dart we are going to have the most basic implementation of photo view as you probably know flutter has a default widget called image which is perfect for simple images which do not need anything else than be displayed but photo view is here for you if the image widget just doesn't cut it anymore just like image photo view can work with network asset or any kind of other image provider even the cached image provider which basically makes sure that you aren't going to unnecessarily use up the bandwidth for the same image twice so really any image provider can work with photo view in addition to that users of the app can zoom in on an image and rotate it when it's displayed inside a photo view and the library also provides a convenient way to display a loading indicator while the image is being fetched so basically the photo view library is like a package to simplify this plane of zoomable and rotatable resizable photos to use photo of you we obviously need to first import the packages then we're gonna have a simple photo view page which is a stateless widget we want to have a scaffold here with an app bar and now comes the important part which is the photo view itself the photo view needs to have an image provider specified which can be network image asset image or any kind of other image provider as I've already said here you can use any kind of a URL with network image provider I'm using some images from reso color comm website then with the image provider specified we need to add some other properties to the photo view the first one is min scale so the minimum scale and we're going to set it to a constant which is photo view computed scale that contain it's actually not really a constant it's a dynamically computed value which is handled by the photo of you library but all you need to know about it is that contained means that it's the smallest possible size to fit one dimension of the screen and the min scale therefore is 80% of the smallest dimension what does that mean well it means that if we try to scale the image down you can see that it cannot be scaled down any further then is the 80% of the smaller dimension of the screen which is the width in this case so you cannot scale it down more than 80% of the width of the screen is always going to pop back to be larger a similar property to min scale is max scale which we are going to set to photo view computed scale covered and when you set the max scale to be covered times 2 what this will do is that you will now be able to zoom in on the image to be more zoomed in then twice the size of the larger dimension of the screen in this case the height so this is one time zoom then because it takes up the whole screen right and if we try to zoom in more it's going to zoom out whenever we try to zoom in more than twice as much as is the height of the screen with min scale and max scale done and with these photo View computed scale values covered we want to enable rotation now because now we were in the example app where the rotation was already enabled and we can do this but without rotation enabled we are now gonna be able to rotate the image so let's actually jump right into the actual average we are currently developing so here we go you can immediately notice that the background is completely black we are going to change it in just a little while but we can rotate the image as we want and without the enabled rotation we would not be able to rotate the image we will just be able to zoom in and zoom out so enable rotation and the next thing that we want to do here is background decoration background decoration can set the background color and also many other things which you can set on background decoration like for example gradient you can set a custom image and now kind of an image to be displayed behind the zoomable and a rotatable image so box decoration is really versatile all we want to do here is to set the color to be the classic white color of the canvas so when we save now and go to the emulator you can see that the color was changed and now you cannot even see that we have some kind of a view over here it looks like as if it was just floating on the default canvas so remember that the photo view actually takes up the whole screen space so if we comment this code out it takes up the whole screen in a little while you are going to learn how to make it not take up the whole screen so that you can have multiple widgets displayed on a single page for example in the ListView and still be able to zoom in on a particular image because having just one image displayed on the whole screen is probably not a good use case for many purposes the last thing that we want to have here is loading child you can also leave it empty and it's going to display also a circular progress indicator but it looks kind of weird if you set it up yourself the circular progress indicator will look much better so now if we try to restart the app by hitting ctrl shift f5 and go quickly to the emulator you'll be able to see the holding indicator for a while here it is and now we have the image loaded from the reso corner calm website so this is the most basic usage of the photo view library then as I've said you can also inline the photo view so that it doesn't take up the whole screen as it does now but it takes up only a portion of the screen so you can have other widgets above it besides it or anywhere else on the same screen so let's learn how to make an inline photo view right now so again we want to import stuff into this dart file we want to have material that dart and also photo view library down dart and then inside a basic page widget stateless widget we want to a scaffold and as the body we are going to specify the center widget actually in lining of the photo view so that our widgets can be displayed around it is done through the most basic flower widgets which are available so there is no option to inline the photo view inside the photo of you library itself we are inline images with basic flower widgets but I thought that I will show you this because it's something that you probably wanna do if you're building an app with the photo view library we're now gonna place the photo of you directly inside the center widget but we want to have an aspect ratio here an aspect ratio basically dynamically sets a fixed size for its child widget so that it takes up the most possible screen space while adhering to its defined aspect ratio what this means is that by default the clipped photo view page will look really the same as simple photo view page until we start to zoom in on the photo view obviously so you will not be able to tell that the difference between these two pages because the aspect ratio of the image is sixteen by nine and what this aspect ratio widget will do is that even though we set the size of the image to be fixed it's gonna be done in a way that it's dynamically set so that it's going to take up the most space that it can and it's going to fit the screen just perfectly then this aspect ratio widget will contain a clip rect which basically puts a mask on the child so that it will keep its original and zoomed size even while it's being zoomed in and then this clip rect will contain the photo view which contains all of the same things as the photo view in the simple photo view page but we do not even have to set its background decoration here because the background will not be visible at all all we will see is the image itself so try and save it and here's the thing if we now soo-min you can see there we're not spreading this zoomed in image across the whole screen but only within a certain space on the screen which is really cool and we can even rotate the widget as we could before and now you can actually see the black background now let's get to the more advanced stuff because in addition to letting the user scale and rotate the photo view manually photo view library provides controls so that you can control the view programmatically this can be done by using a controller and this controller also gives you access to the scale and rotation data of the photo view so you can use them in some interesting way maybe remember a certain scale and rotation for future use or you can just display the obtained data on the screen as we are going to do in this app so again let's import the packages inside this dart file and controller photo view page will be a state full widget because we need to keep track of the controller and we also need to call the dispose method on the controller which can only be done inside the state class so here we go we have photo view controller and we want to instantiate it inside in its state function and then don't forget to call this pose inside the dispose function of the state class so you wanna call photo view controller that disposed this is going to prevent any kind of a memory leak and just using unnecessary resources when your app doesn't need to use them anymore and now we have the build function with the default app bar and all that good stuff and the body will contain a stack what a stack does is that it puts widgets on top of each other not like a column where it puts widgets above each other but on top of each other here means that it operates with the depth you'll see in just a bit if you've never seen stack before the first child of the stack will be the photo view we're going to get to creating these helper functions in just a bit and then the stag will contain a column because at the bottom of the screen we want to display the scale info which is going to say the current zoom level is for example 2 so it's 2 times zoomed in and then we want to have a reset scale button which is going to programmatically reset the scale the user is not going to touch the photo view itself the user will just press the reset scale button and we're going to programmatically reset the scale how cool is that right so here we are going to make the built photo view function first inside of it we want to have a photo view on which we mustn't forget to specify the photo view controller which we have set up at the top of this state class because through it we can get data out of the photo view and also put data into the photo view and then the same old stuff which is image provider main scale max scale and background decoration and all of that good stuff then the next function is build scale info which will be done through a stream builder that's because photo view controller provides an output state stream and this stream is a way to listen and the photo views controller so whenever some value changes on the photo of you when it's zoomed in or rotated or anything else the stream will output a new value and we can listen to that new value through this stream builder and update the UI accordingly with a new text if you're not familiar with stream builders I really recommend you to check out the basics of flower if you are familiar with stream builder follow along so stream builder takes in a builder and inside of it if the snapshot of the string builder doesn't have any kind of a data we are just gonna return an empty container so that user cannot see anything however if the snapshot has some kind of a data we want to display the current scale compared to the original of the image and we can get to this data by calling snapshot data at scale in addition to scale you can also get information about the position of the photo rotation rotation focus point and also the scale which we want to have here so that's it for the built scale info function and then we want to have the reset scale button which will be simply a raised button and whenever it's pressed we want to set the controller's scale to be the initial scale from the photo view controller so here we go we are inside the controller photo view page and when we now try to zoom in on this photo here we'll be able to see the scale compared to the original is currently 0.3 one something and we can also reset the scale by hitting the button let's try once more reset the scale and we have just reset the scale again programmatically and whenever you set the scale to be original it's apparently null value that's how it's implemented inside the library and the last thing that we're gonna do here is to make a gallery of multiple photos which can also be obviously zoomed in and also rotated if you want to import the packages now we have one additional package which is photo view gallery Daud art and the gallery page will be only simple statelets widget we want to have the list of images because we are going to make the gallery through a builder just like a ListView has a builder gallery also has a builder we have three images over here and inside the build function we have the body of the scaffold set to be photo view gallery that builder and photo view gallery is implemented as a page view but it's simpler than just setting up the page for yourself because the photo of your gallery abstracts many things out so that you don't need to worry about them you can either specify images directly or by using a builder as we are going to do right now so first thing to do is to specify the item count which is three right now because we have only three images and then the Builder which passes in context and index we'll return not photo view but photo view gallery page options which is basically almost the same thing as a photo of you but it's specifically designed to work with the gallery over there we want to specify the image provider again and we are going to get the image URL from the image list at index which is passed in to the Builder and then again min scale max scale and outside of the photo view gallery page options directly on the photo view gallery builder we want to specify scroll physics so that we have nice scrolling animations and then again background decoration and loading child these are now specified directly on the photo view gallery and that's it we have the first image then the second image and then the third image and we can obviously zoom in and zoom out and it works as you would expect and that's it for this tutorial don't forget that you can get 75% of North VPN by clicking on the link in the video description or using the coupon code reso colder during the checkout for a three year subscription if you don't want to miss more tutorials like this subscribe to the channel and also hit the bell button so that you will join the notification squad and be reminded about every single video that I upload here because here on resale color my mission is to provide you with the best app development material out there if this particular video helped you definitely give it a like and also share it with others leave a comment if you have anything to say follow me on Instagram Facebook and Twitter and see you in the next video [Music]

Channel: Reso Coder

Views: 27,281

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter photoview, flutter image carousel, flutter image slider, flutter image slideshow, flutter image zoom, flutter image rotation, flutter photo gallery, flutter photo app, flutter scale image, flutter zoom image, flutter tutorial, flutter for beginners, google flutter

Id: cZwbVPix2PE

Length: 19min 52sec (1192 seconds)

Published: Sat May 04 2019