Using Flutter Photo View | Pair programming with the author of photo_view package

hello hello and welcome to this episode hi hi thanks for having me very nice to i see you in this podcast finally i know that you are a prolific author you have several packages and i think uh it's gonna be a great episode today talking about you your contribution to community as well as one of your packages which we're gonna put a program together today so and that's going to be photo view but uh before we start um stage is yours just introduce yourself who you are thanks thanks a lot thanks for having me it's a pleasure to be here and uh it's a pleasure to be uh talking to you i i have seen your contributions to the community with flutter victims and everything on twitter so i'm really thrilled to be here and to be talking to you this is this is a unique experience for me uh about myself uh i like flutter i love flutter since 2017 and since then i have been working on some stuff and most of this stuff uh i have made uh into made as open source or uh or also help to uh improve uh existing uh open source projects uh so uh there is this uh i guess it's a collective for uh open source which which we call blue fire team we decided to call blue fire team because it's basically the team that maintains some packages uh the biggest for sure is uh flame the the the game engine uh the game engine for flatter and uh we also have several packages around flame and some of them not uh connected to to flame at all it's just something we do so one of these packages that we have is a photo view which is a package a simple package to show image in a uh in a gallery like fashion so it's basically you can zoom and you can drag and you can switch between images just with a simple uh user uh gestures basically and uh yeah i also work for rose which is a company uh that's uh that's building the next generation of spreadsheets and we are making a desktop app using flutter for that so we are making like it's an excel killer uh using entirely uh flutter it's being really really awesome all right this is amazing uh you talked about flame i think flame is on fire these days and it's great that you are one of the you are uh one of the contributors you should promise me to come back to this show again and let's pray program with flame and build something together i actually i i have not done anything with flame yet and i would be happy to be like pair programming with you and do something and learn flame and that's going to be awesome you promised me right now in the camera i promise you and perhaps you can we can even get some of uh some of the other contributors and make this a team wow or something like that this is absolutely a fantastic idea yes there's so many things we can do with flame it's like just not just games you can you can have like a a sprite animation uh you can use a flame for that for any kind of app and you can uh it's this flame just like photo view and most things on flutter it's just a widget so you can have several games cool okay i don't know several possibilities that's cool that's cool let's let's not uh let's not talk about it right now so let's keep it as as high as possible let's do it next time in the another episode and and do something so yeah stay tuned uh for everyone who is watching us right now or listening to us so we will come back with flame and helen how to pray program and build something maybe a game who knows we will build something but uh one of your one of your packages uh is the photo view it's pretty actually popular as well it has like over a thousand likes and and uh it's uh pretty much used everywhere so um let me actually put up the website here so this is a repository so i'm gonna actually ask ask you a few questions here and you can explain more about your package uh first of all um first of all uh uh okay the package name is pretty much uh you know uh everyone can see that it's not very it's not very creative well it's actually self descriptive right you know that's that's important but uh i one question here have you done this package yourself like by yourself alone or do you have like a team of working on the how does that work uh okay uh it's on blowfire team so it's under this umbrella of of this collective but in general i am the responsible for the the package it was created by me and it was actually in my name until we created uh the blue fire team like some weeks ago so uh if you see on contributors we have awesome open source contributors from everywhere uh but uh regularly uh it's it's have it's a it has been a lonely uh journey right there but uh it's a it's it's been really really great to keep this package and about the number of likes it's pretty crazy because i i i didn't do much about media and blog posts about photo view i just published it i put on on solido's uh flutter awesome and also uh i went to florida london and presented there and that was it and uh if you search uh for uh uh the usage of uh photo view in pub specs on our uh github uh open search project there are thousands of open source projects using that and there's also some packages that are using photo view like uh they stream uh uh that gets demo getstring from mesh actually this was our two previous one of our episode in flutter stream we pair program with nash and we implemented a chat from a stream so yeah definitely everyone knows nice and then yes absolutely so they use uh photoview as well and i i when i saw that i was really really really thrilled and it's really grateful to to know that something you wrote some of you created uh is somehow being used by several people around the world this is just mind-blowing you know absolutely uh well uh if if we just take a look at the pop uh uh page of this package you see that it has like uh first of all uh great work it's like it has great points you just cover maximum points and popularity is quite high and you know everyone likes it so this seems like it's a great package and probably it's one of the best uh when it comes to its functionality but can you explain us actually for those who never uh have heard about this package before what does this package do actually what can we expect us you can expect a better way to show and to showcase showcase images not only images but actually any kind of widgets and uh when you have we just like a gallery photo or even uh an ecommerce uh page with the gallery details where you have you where you can see the details of the image of a product uh for all of the scenarios you have uh photo view so it's basically you can open an image zooming uh let the user to zoom in in any part of the of the the image and uh there's a huge amount of uh of uh api that can allow you to uh control this widget so it's not a sealed widget where we put the image and there's the gestures and that's it you can customize a lot of it without even having to to to fart uh the project okay well you're talking a lot about your package and you make me more curious let's uh go to our programming sessions right so let me explain to you what we have and what we're gonna build together so i i already have built a floater application which is very famous i use it in many of my courses in my videos and that's mj coffee app it has several screens you know you can go to each page go to the ordering page add to basket support chat profile and etc etc and perhaps one thing that we can do today together is to add a gallery a photo which we will upload later are let's say coffee shop photos for our customer to check and i think this is a perfect this is a perfect choice uh or perfect uh scenario for using your plugin isn't it absolutely alright absolutely so we're not gonna actually upload several probably paid uh pictures and stuff like that but then let's see how much of the functionality the most important one the most used one and the most maybe uh functionality that you are proud of doing that no like implementing that maybe just talking about all of this and stuff but but stop talking let's actually jump into the editor so you now have full access to my editor to my app and here is our main app so yes everyone can see that you are also in my application but all right i have not used your actually to be honest your package yet and here is the reason you are here so i'm going to learn today how can i how i can use your package can you now guide me like how i can move forward and implement a gallery right now so let's actually do that together okay i i assume that the first thing that we should do is we need to add your package to public speaking file uh right so let me actually quickly do that um all right so it's gonna be uh one of our dependencies perhaps here and that's gonna be uh photo well uh there is one thing here is that first of all in the latest start uh on flutter update you know that we have a new command for adding packages for the obvious code command palette there used to be another command palette uh from a great gte one of our friends who created the pub spec assist but now it's integrated to the uh you know package but i still have the public assist let's actually add your package via that uh flutter okay is it photo view right so i'm gonna actually add it absolutely and i see that it's now added here and and it seems like it's not even version one so are you still like consider this a better or unstable apis so how does that work yes uh we uh i i'm still figuring out how we should do some stuff mostly regarding photoview gallery which is the relationship of several photoview widgets in a pageview like widget so you can swipe between uh the two images and uh we still have uh some issues regarding that and some very very weird issues like you can not only reproduce on samsung phones uh that are built uh after 2020 for example we have a we have an issue for that for that that uh uh uh the the photo field uh the pageview widget messes up with the gesture detector inside pageville so i i create a custom recognizes a custom gesture recognizer for that but uh it's over the problem in most cases in most scenarios but we still have problems in this very specific devices and this is even though this is even uh a plugin it's just a widget uh so it's it it comes down also to the the very uh core of the flutters it's gesture uh uh mechanism basically all right so that that's why uh it's still not 1.0 yet so i'm not uh secure about going 1.0 yet but it's it's pretty uh pretty stable overall we have we have uh uh we didn't have uh recently much uh braking changes just some some regarding minor things that came from uh uh from flutter 2.5 uh which is as a breaking change regarding um the the image uh provider that we use we use in the api we will see in a second so that's that's why it's uh it's 0.0012 yet but uh i hope to go for one point also okay great all right cool uh thanks for explanation so let's move on now i added the package uh version as of uh now we are recording its version o12 uh so let's uh move on and see what we can do so to make it simpler and you know i don't want to navigate to this page different pages and you know and and uh implement these galleries so instead of that i'm going to replace my homepage with a new page which i'm going to create right now let's say i'm going to create a screen called the gallery like gallery.dart and let's say that is just only a gallery a screen which extends uh state should it be stateless or state pool whatever whatever i was gonna go with the state less for now and let's okay let's do that and for now what i'm gonna do i'm gonna just return a simple scaffold which is going to only have a body that is going to be a container and that's the only thing we're going to do right all right and that's the that's the page i just created let's format it and then i'm going to go back to my main.dart and i will replace my main home screen with this screen so all right good but now if i refresh hopefully i will see nothing that's expected right okay let's get it started from here yes uh let's move on to the gallery and then continue doing that tell me what should i do i'm going to build a gallery i'm going to show some pictures okay how do you approach your your uh your plugin when you want to start implementing that okay first of all it's a plugin for showing images we need an image do we have an image or something like that well absolutely assets or something all right so okay okay what i can do i can actually copy a couple of pictures here i actually copied the three picture here let's say i want to add these three pictures to my gallery we can add more if you want later but let's stick on that so now we have three i think we need to uh first of all make sure that the assets are loading oh yeah it's already i already have them here so i think it should be loaded automatically from the assets folder from the spec.yamlfy that's fine so i'm gonna actually restart to make sure that you know everything is working and the pictures are bundled and stuff like that all right okay yes i i think we can be uh interactive uh and also it starts just by adding uh normal image widgets in this container showing one of the images let's do that uh uh we can do like that you can yeah image from assets do you mean this absolutely yes okay exactly that well uh i think i need to let's actually create a safe area i think that's a good idea and then let's actually also add an app bar uh which is going to just well it's empty but let's just keep it and let's have a container another container maybe a column to show three picture right probably right and then i have the loading images um two and three all right so now we have images uh i think the problem is that i need to add also this to my images so yeah here we go well the overflow is expected right so i don't think we care at the moment but it's expected okay good so here's the stick with one image yeah yeah let's do it let's take it with one image right now there we go and then we can go for the gallery mode yeah afterwards sure great we have an image amazing it's there and you can make it zoomable if you want to yeah just by creating a photoview widget so basically instead of this whole column thing you can put just a photo view okay so all right you mean that i can actually comment this yes as a challenge of safety area and then i can go with photo view photo view that's it yes it's like a class or constructor yeah it's it's just a widget okay that's a visual that's that's everything i need to add an argument which is meant uh required which is image provider yes okay yes so image provider we have an image provider for each kind of way you can add an image uh to flutter so for assets we have asset image for network we have network image and you have plenty of them you have also memory image okay so for this for for our case is a search image can i can i type yes yeah yeah sure go ahead go ahead so we have a set image i guess that's it and for asset image the first uh first option we have is this one so basically we have our photo view running and that's it you have a photo view in your screen so if you if you uh go to the yeah and you can double tap right now so double tapping oh you know it's cool double tap again yes and if you if it this was a big bigger image you could have a a a a a zoom effect yeah just by double tapping and like i think it's more it's sorry go ahead sorry yes uh if you were on a physical device you could we could easily replicate the pinch uh gesture okay that was my question when you say zoomable you mean pinch so i can just pinch pinch in and out right oh that's yeah absolutely is it like that easy so uh yes it's that easy so this is everything you need to show a zoomable image but you can customize everything so if you if you comment click on the construction on photo view you will see plenty of options we have yeah definitely so we have okay so yeah if a comment click i guess it's better so i i would okay let's go inside actually i would just wow it's actually a lot of uh parameters yeah i guess i can't see on the on the stream but yeah okay yeah i can see now yes we have a lot of a lot of uh options we have that's cool we could go each by which but i i guess the easiest one is i think the the the easiest one we have right now is background decoration which is pretty easy do you guess what that is yeah operation yeah probably changing the background right so it's sorry yes you are right yes it's a i i have a question here uh hannah i have a question yes so yes when you implemented this uh package can we consider this as a package or a plugin let's say you know the difference is a package it's a package so it's like definite package fully written in dart like there is no native api involved yes fantastic nothing everything on top of letter and i i try to avoid going deep on raw things for flutter even so i in the in the beginning i used a raw image instead of image because uh internally on flutter on on photo view we manage also the loading effect so while the image is loading we you can show any kind of widgets there and we don't i i i the idea is to not let while the image is is being loaded yeah that the pinch gesture should be enabled uh because uh uh for for even the zoom effect to work we need to know the the width and height of the image that we only know after it's loaded yeah so uh that's why we solve the loading effects before uh before uh uh showing the image even so uh the idea was uh uh to make something that's easily uh uh uh uh applicable to any kind of app yeah without much setup without requiring the person to use the latest version of flutter for example yeah on a stable or something like that so that's why i move it from our image to image because uh i i ended up uh messing with a lot of stuff so uh we are we are i i try to to go far away from the platform and also far away from from the raw things uh uh in flutter but uh it's not always possible for example the gesture thing i just explained to you this is something that we had to go pretty raw on florida we have we are fighting in the gesture arena uh uh actively and in some cases in some very special scenarios we are losing the the the gesture arena so that's why we have this issue but uh that that's why i wanted to go uh far away from from the ralphie zone all right on flutter because uh i i want this to be a easy thing and another thing for the package user to worry about a lot you know well in fact i think so by going this way this path you also made another great uh choice is that because your package will gonna work on all platforms as long as flutter runs right yes yes that's great very good so um all right let's uh let's move on to this uh some of this i don't think we can cover all of this this is quite a lot i i think people can do you have a documentation by the way so they can just go and read up on it yes uh i have documentation in the readme there's also some examples and some brief explanation but the huge part of the documentation is on direct docs uh if you if you uh if you scroll a little bit uh in the beginning of this constructor thing you will see the a little bits of the dive dot so we have lots of dart stocks in everything that's public in every part of the public api we have documentation that's cool so we also have an example app in the in the in the repository which have some of the most used cases uh showcasing there there's also there's something that uh everybody uh uh asks for which is the drag down should dismiss uh the widget so this is possible if you combine with some of the materials uh features we have so if you combine it for bottom sheet for example you will have the uh the scroll down yeah to just miss the kind of behavior all right so this is also a good thing about photoview because you can combine with okay flutter the flutter ecosystem basically now a few practical questions so let's get back to the implementation yes so okay uh well i think we can change the background that's great and i see a couple of other things here which i can assume what they are but i want to ask is that for example tight mode and filter we will get back to those but before that oh yeah uh so why this right now it's fulling my whole page or whole screen so why doesn't just fit the picture size because this uh by default is using uh the constraints of expands the box constraints expand so we since in most cases you want to show an image uh in a biggest uh scenario possible you can uh you will use by default uh the constraints of expense but you can wrap this on us on a size uh sized uh box for example okay let's let's stop here let's actually do that let's actually do that because i i think in many use cases you are you're not gonna actually leave your screen and takes i mean the photo view takes up the whole screen right so you want to actually have some kind of size so you mean that if i come back here actually let me remove my comments here make it a little bit cleaner if i come back now here you mean that if i just go here and wrap this with a maybe a size box yes and give them a height per se right whatever 300. okay that's gonna fit it but is there any possibility is there any way that i instead of hard coding this like number just maybe the photo view automatically adjusts uh itself to the container or parent container whatever it is and that's usually a size of the picture right well i can't get the size of the picture that's okay but i mean i wanted instead of being this number hardcoded like something uh something automatically happening like a pair different screens you know i don't want to adjust it in each different screens i just want to get it automatically somehow yes okay yes uh you can use uh for example something uh anything in flutter you would have an automatic layout yeah so if you have a something of a column you could have an expanded with other widgets combined absolutely and put uh put photoview inside it inside the expanded i would not put photoview directly under columns and rows and and flexibles because uh the the constraints is expand yeah if you use an expanded widget uh on inside of this one you will have a constraint error okay so i would combine this you can use an x and expanded inside a column for example with other widgets occupying uh the rest of the screen space of the screen uh so something that's uh that's also uh i think it's good to take notice is uh you need to if if you are using this in a limit limited space of the screen and you don't want to show your image overflowing the widget you can wrap it on a clip wrecked yeah yeah yeah sure so okay if you wrap that we just want to clip wrecked you can yeah sure sure good i think we got the we got the what you mean and and that's that's correct so i actually uh implemented quickly when you were uh speaking about like the expanded i just quickly to demonstrate it how it can be possible is this is this is how we can do it but so definitely if we add more regen in the column then probably it will shrink it down and then the picture will come up and take the space over there all right um yes that's that's good and we actually talked about three different possibilities so i'm gonna go with this uh let's say expanded for now which is probably very common so we're gonna have usually a layout of with columns you know stuff like that but now uh what else i can do to this photo well first of all you get the background decoration right and i can guess it's a box decoration that's the box decoration so it's simple right so we're gonna have a box decoration and and probably whatever can i use anything like even gradients yeah you can even use an image yeah this is a good thing for you yeah but then i can go with uh at least colors and let's go with all right this is how we can change it that's cool um so that's one thing i i also have seen a couple of other things here one thing that i actually caught my eye was tight mode so and yes this is what is this this is a special case for when we are combining it with scrollables or official widgets material like button so this is more uh like when you are combining this on a thing that requires that we just be more aware of uh of uh how it works it's not uh i i think this should be renamed that's why it's not so because i'm not totally happy with this name because type mode can imply that this would use instead of box constraints expand to be box constraint byte so yeah actually that was my first assumption so that was my first assumption so okay so it's not related to that that's good so okay and another one uh i think was filter filter quality and that's also something that caught my eye what is this filter quality it says high oh you you like you work on the resolution of this this is from the image okay this is from uh if you if you uh see the image widgets you you have these options as well so this is just a forward for that widget inside internally okay okay uh from photoview we use the image so people want to use evidential the entire control of the of the switches as it would have on that on using an image widget directly so that's why we have that okay cool basically cool well uh loading lo one question here uh the the loading builder in the constructor and the widget actually it's not uh required and that means you already have like kind of like a default loading right yes okay that's good uh loader all right so this is this is more useful when you have something coming from the the network or where you or when you have a huge asset where you need some time to load that so basically in the loading state we don't let the user to zoom in basically just you just have the this widget that you specified in login builder uh centralized in the screen uh and then when you have after after loading then the user will have ability to to do the gestures uh can can can i change this image uh i guess just to showcase uh the different kind of sources we have yeah can i assume here that go ahead go ahead great so we can have the network network image one this here and i'm changing for this url that comes directly from splash and we can specify keywords so this is a coffee app so let's put the images from kofi and yeah take a very big size here i think uh there is something yeah here we go here we go i messed up my my passing let me actually add a comma here all right uh all right cool uh let me actually ask you a few other questions so i see a lot there are we have a lot of uh properties and parameters here i see by default you the enable rotation and rotation i i think when we like touch and we can rotate the picture right why did you disable it absolutely i i did disable it because uh i didn't see this as a default behavior on on the gallery uh vio apps i see so uh most gallery apps that i have or i have used in my life doesn't have this enabled by default and it's this is usually done when you're trying to edit an image so basically uh that's why okay uh but uh if you if you enable it the gesture will be uh uh available there okay and uh this is this is a great segue because uh edible rotation is usually made when you need access to the actual angle in which the image has been rotated yeah sure sure so how can the user have a have an access of an image of an information like that so we have an api for our control abilities so we have the controllers basically so if you if you're searching there's a huge amount of things here yeah here you see two controllers i guess so online two for two four four and two four five the controller and the scale scale stage controller it's a a little bit different one but this is a a a kind of a class that you can uh instantiate in your space for widgets in our state and uh and uh dispose in the disposable state and pass it to the to the uh to the photo view which that we are controlling and basically when you have an instance of a photoview controller you can listen for changes in the inside the in the internal states of the the uh for review okay so from there you can have access to uh informations like how is the scale factor of the image right now and how is uh uh how much of this is being uh uh uh rotated for example agents so from that you can you can uh listen and also change programmatically the stage so i i have an example on on the example app where we have a sliders when changing the slider you can rotate an image i think for example so if we want to do that i think we could do it right now i don't know uh well uh that's cool but i think it's uh i think we have one more thing to do before doing that and that's more important yes because this well the controller stuff might be kind of like a rare cases usually right but having all the pictures right now in a photo gallery and swapping them it's much more common isn't it let's actually go and do that absolutely uh this is my editor this is you just turn this to a photo gallery oh so we have uh three images right so this uh we require you a different uh a different kind of uh of widgets so it's not photoview anymore it's photoview gallery i see for that we have to import not affordable anymore for review that diet it's photoview i guess it's gallery i don't remember uh it's uh okay i don't have i don't have out completes here oh yeah yeah i should i should do that for you here you go yeah that's correct actually and i think it's it's has a factory right it's a builder right yeah yes it's just this is just a page view it's just a fancy page view okay control you control this kind of option so i'm gonna do this for the view gallery builder oh the absence of autumn bleach is really really bad oh like let me me let me do that actually you you tell me i'll do that so i think that's faster and i can also learn yes uh but first amazing so so now i have a review actually let me delete that i have a builder here which is uh great so then what should i do it's just like so probably like this field builder okay so it's probably i have a builder right okay and that's going to be a call back right with uh yes it's a callback and it's actually a photo it's a custom uh signature so it's basically a context and an index all right it's similar to like a list view okay and then it's gonna return and besides that from that you don't return a widget to return a photo of your gallery options aha okay photo view gallery page option ah yes and then here i will actually provide my image which is like this asset image we just uh added right yes isu yes and then we can pass the index as the image name that it was very very fortunate for you to create an image one two three let me uh format this the index uh i think uh i think let's imagine that i have like uh like probably a gallery list or something like there will be like a list of images okay but then in fact uh i can say like images let's say uh for now and then that's gonna be an index actually i need to define my index is probably somewhere here yes can i can i can i do something for you here yeah yeah just go ahead simplify things a lot yes we can do this uh assets well yeah but not all images have one two three as a name right so i just wanted to do it in this yeah okay yes it's it's just it's just uh the fortunate way but uh we can do for images you can keep yeah sure yeah i mean normally images they don't have uh one two three or they're the names are different but uh but that's cool that's okay yes and and why is uh you are creating the list here uh we also have eating counts for not going infinite you can go infinity if you want wow we already know the links uh sorry we already know the length of the array right yes yes so that's why uh we have the scenario but if you want to go uh fully screen full uh and you feel it's scrolling it's possible as well let's do that let's see what's the difference so i mean you add the infinite i will add the picture names in the array so assets oh i did the info that's the beauty of pear program oh right yes uh actually this is a false information because this is a plan for the future i guess it's not released yet for an influence scrolling so uh you know everything you just said about it okay okay that's cool yes uh it's still not really it's a sneak peek for the future okay so actually i need to also rename this to image something okay um so now we have a list which has i can also we have a list of images it's similar to list views as you said and then returning that and then that's going to create my hopefully my gallery right so the only thing i need to maybe hot restart because i changed a bunch of things here so now i don't have yeah i guess it's i have it here you go to the other side yes there is you can satisfy starting index yeah there is yeah can you can we yeah let me can i change the background of this black like to um white or something yes this is easily made by uh wrapping it on a colored box or wrapping the the the gallery on the color red box on a container or anything that you can specify aha okay is this true it's still flutter okay i was i was thinking like maybe there is uh like another parameter like photoview here like i don't know background or something which is actually there is oh yeah but this is for each page basically so it's the it's it will change the uh the black thing yeah for the amber thing but uh the the effects of the the the oh i see it's stupid yeah backgrounds of the screens right okay cool so so here in this loader do i still have that loading option and you know those loading builder and and things like that yes some of them are directly under uh on the under the photoview gallery thing so just like uh the background just said so it's on the gallery so this are options that are made for all pages but there are options made uh made for each page basically that are under pageview gallery options that brings some of the options that we have in the photovolt constructor but can we look at this uh widget right now it has a bunch of stuff that is similar to photo view apparently which is good yes what is this hero attributes actually it caught my eye again and i didn't understand what is it it's it's the possibility to add heroes uh can we just just add and see how it works like it's it's uh when we have a hero it won't work immediately right now because uh we have uh uh we don't have navigation yet in our case in our user case basically i see if you were on a previous screen and you click on the image and specify this is a hero it will open on a hero effect in the i i see in photo field okay okay that's cool so this would require yes and uh uh the the the hero attributes is a set of attributes that you you might pass your hero widget that's internal to photo okay so do i have uh this yeah i do have this pinch and things here as well okay yes cool and uh if you if you zoom the image uh if you double click an image and try to swap just to change to a different image uh you will only be able to swap when you reach the corner of the aha yeah i see that actually when i i it actually okay cool this is this was really tricky to do but uh it's there at school actually very nice um all right uh what else so i well actually i have one question is that uh usually you know galleries comes with some kind of like indicators in the button like it shows how many pictures and you know maybe sometimes thumbnail and back and forward and things like that is this something that you already implemented or something like maybe if you haven't implemented this in your on your to-do list to do or do you have a plan to do that at all or how does that work yes the idea is to have the less responsibilities possible on the gallery right so i want the user to be able to customize everything in every way yeah so when you talk about uh these kind of features on a gallery app it's something that can change a lot by use cases absolutely in this case and i don't wanna i don't wanna uh someone that has a a a a design for a gallery app that has something in mind that's probably different from uh something i thought to reach to this uh package and say i'm not able to use it because my implementation of this okay and this feature is a totally different so uh we have uh ways to access the stage with the controllers actually in the photo of your gallery we have another controller which is the page view controller where you can access which image which index of the gallery uh uh you is active right now and stuff like that and from this the user can build any of these uh features you just said okay so you mean that i have okay i see i actually i have two properties like page uh controller let's actually talk about it and then also i see another thing on page changed which i assume it's going to accept like a callback or something right does it uh yes exactly that that's actually this is the same the same you'll get from using pageview uh-huh letters pageview basically so it's nothing new so it's a callback here and that callback has an index okay so it's going to be like an index here and basically well i can print index and i know that which page is that so so okay let's actually let me actually now rephrase my question so by having only this one what i can do is that probably i can go ahead and hear like in my column create three dots right below let's say my um my photo gallery and what i can do on on the callback here when it's changing like i can know here i know the index of the image i can change the color of those buttons based on the index and i mean i can set the stage yes definitely that's that's the that's what you mean when you say responsibility on the uh customer or let's say on us as a developer and and what does this page controller supposed to do can i also get like this index change and and the number of let's say photos and stuff like that from the controller itself yes actually page controller is a very image fire so it will notify the listeners every time they change the the the page changes oh okay okay okay that's cool okay so it's different it's yet a different way to control everything okay perfect so now we have actually two uh let's say uh two handy helper here one of these is this on page change to set a state and do something out of this gallery absolutely and then another one is page controller which probably gives you more control over what you can do and as you said it's a value notifier okay yes so cool uh something very common that we have on gallery apps is the hud which is a set of widgets that are shown in the in front of the image that show shows yeah yeah yeah informations like file name and stuff and uh what users want most is the the ability to fade out these widgets owns the user as uh pinchings and zoomings yeah yeah yeah sure if the user is zooming in it hides everything that's in front of the image basically and when the user goes back to the original size of the image it shows back so this is also possible to do with photoview if you listen for a photo of your controller and you listen for the scale factor factor is different than one you can fade out the image if the the scale factor is one it it goes back to show the switches uh it's there's so many uh possibilities absolutely it's really great cool cool well um for the last part of this show if you wanna if you wanna tell us what is the most favorite feature that you have implemented and you are very proud of that and actually it's also released not something that you will release later okay yes i i deserve that so uh it's uh i would say is uh the max and minimum it's a it's a pretty dumb thing uh saying but it was really cool to do it's the max and minimal scales next means case page or stuff like that uh-huh because it enables the user to have different kind of uh of numbers but not just absolute numbers so uh i guess you can you can do this on yeah we can go on photo view or you can do on the photo of your page options i'm gonna actually quickly do that while you're speaking yes so it's it's basically the possibility to uh customize uh the uh double tap cycle that we have basically so yeah uh here on this uh uh demonstration that we have oh it's breaking yeah here in this demonstration that we have uh we cannot pinching because it's obviously a simulator but uh another gesture that most galleries have is a double tapping uh a widget an image and the image goes through screen and goes original size and then goes really big so you can customize that entirely you can summarize the cycle and you can also customize uh okay which of these uh options it will have so max scale you can put like uh 4.0 for example so the pinch will be limited to that and that means ko you can put i don't know half of the image or something or even uh bigger or than the original image size so this is a relative relative to the size of the image but uh if if you if you look into the type of uh maxi scale mean scale you will see it's it it's basically uh a little bit uh different than the thing yes it's dynamic yeah because you can also pass different things and this thing is the computed scale so 0.5 2.0 4.5 this is related to the image size you can put this relative to the container size basically so if you use a photoview computed style dot uh contained for example so can you uh scale or mean scale or any of them you can substitute this for photo view computed scale here you go yeah so yeah there are a couple of options this is just like a noon it's a it's i say it doesn't have a public constructor so you can have like contained and the the the minimum the max size it will have is uh the size that this image is touching the border of the container uh from inside so it's just like box feet uh contained okay that's cool that's cool one one thing i noticed here i just want to ask right now i'm not sure it's a bug or it's a problem we actually wrapped our um application with safe area right now and then we're going to have a column and now i have two uh photo gallery on both of you this one is much more zoomed is it because of mean scale because i put it uh half or or why it's so big yes uh if the image is image provided such image image is zero uh yeah let's uh change that maybe i get the original size of the image i can actually maybe quickly restart also because i also changed okay yes but this picture is quite big first of all i'm not sure why it's suddenly quite quite big but if you notice if you notice there is a problem here here you look at this button so i was messenger i was actually expecting to see the container size half of the column because the other one is also half but it seems now the picture is overloading the container yes so if you combine this with a clip wrecked around a photo view you will clip the image to not overflow uh the the widgets itself yeah i i didn't i had a clipper act internally just to to have this uh idea of uh customization and uh uh i the idea of availability of combining this with other flutter factors yeah so basically we have that now uh occupying the uh proper space basically okay uh okay but uh so i actually i'm gonna actually remove yeah so it seems like the max scale covered it's making this picture big is that the reason or contain maybe yes uh i i i i it's a good practice to if you're using a photo of your computer scale you should use in max scale and mean scale both because you have a validation the mean being being bigger than uh but the thing is you can you can multiply this amount for a number so let's see if that means we can put uh no this will break this will break like like this is always bigger than contain oh really yeah this will break because covert is always big in a container because covert is uh covering the entire space available okay uh and yes that's it and you can make miss khp half of the contained size so you can multiply uh contain it by like 0.5 yeah okay that's cool oh multiply it not uh okay well i can maybe do that the same with the max scale right so i can maybe say two or is it possible yes okay yes so good yes that's it you can do that as well so it's a relative uh kind of cool this is related to the size of the container yeah hannah and there's also the double yeah double tap scale that's a little i think it's another my another mile ahead but okay so you know the now i know why this package is quite popular you know it's pretty pretty amazing job that you've done and uh thanks for the contribution and what you have made for the flutter community i want to once more thank you for accepting my invitation joining me for despair programming actually i learned a lot today um thank you very much i want to take a moment and review your repository because i think this is a a good time to say everyone how they can contribute to this package so yes there's uh let's take a moment go back to the package so if someone wants to contribute can you guide us like what they can do here is the repo yes so we have uh some issues regarding things from flutter basically this uh gesture detector and stuff like that so this would require a major reflector uh inside of of the package that i guess an external uh uh someone that's really new to the coach base would not be uh the ideal thing but uh we have uh several types of way uh that we can uh customize uh uh we just like this one so if you have an idea if you have an idea of something that should be added to the package that could improve the usage for most users uh i would say go for it and and try to do it basically good thank you very much so then uh here is the repo i put the link in the show note and also the comments so you can also go to the repo open it up there is a contributing file so you can read up on it send the pr fix some issues open an issue i think hennan and the team will be quite happy to see uh what you can do with this package and with that said hang on i really appreciate once more thanks to you kudos to the team uh to the blue fire team and and everyone who is making these amazing packages for the flutter community um please uh promise me to come back once more and maybe do another programming i really enjoyed today's programming with you and uh please keep us posted regarding the new features in the photo view and people will follow you probably on twitter i will put the link in the comment and also later uh maybe here and they can follow you and get the latest updates uh regarding these packages who you are making um which you are making and so okay uh anything else that you want to share with us uh it was a pleasure uh uh absolutely thrilling pleasure to be here thank you uh and talking about photoview i i don't get to talk a lot about photoview i don't know why it's like flame it's more like uh the thing that everyone uh wanna knows about but uh it's good to know that this is out there and helping people absolutely and uh thanks a lot for for having me abs i'm absolutely it's absolutely fantastic experience thank you very much then have a lovely day and see you next time in the show

Channel: Majid Hajian

Views: 1,536

Keywords: flutter, flutter photo view, flutter photo, flutter gllery

Id: iP8WNXEB_ow

Length: 60min 33sec (3633 seconds)

Published: Mon Dec 13 2021