Flutter Video Player Tutorial With Controls Fullscreen | Aspect Ratio ListView | Url Example

[Music] this is the squat walk keep your chest up and your shoulders back keep your back straight this is the squat walk i'm gonna have you go through your legs [Music] getting it getting in a nice squatted position all four quarters [Music] hello everyone in this tutorial we'll take a look how to make a video player okay and check out the link in the description section for the starter code and if you're following along with me from the previous tutorial you're good to go but if you're new to this tutorial just check out the link below okay and at the same time if you really want to start from the beginning from the previous tutorial you also check out the youtube link below in this video section okay anyway let's get started so in previous tutorial in this page video info dart okay we have done this thing uh loading this json file over here and then we have saved it in a variable once again the json file is over here in our json file json folder okay yes and uh if you are starting from right here if you didn't follow the previous tutorial make sure that it is in your uh assets over here like listed under your access property in pub spec file and then you should be good to go all right and this is our json file and you can also check out the json file from the link below all right anyway so we loaded it using default asset bundle and after loading it we tried to check at the value and as we check out the value we decoded it and that's what happened pretty much in previous tutorial okay of course we have called it uh in our init state method so it will get initialized before everything is built in this section okay and in this section we have this main body section body section has a container container is drawing this okay but once again if you followed from the previous tutorial you should be good to go and if you're new in this tutorial just check out the link below in the video description okay and then we have this linear gradient and after that we have this column okay this column is basically showing this section and this section okay yes and so over here as you see um we have this column inside expanded container okay yeah so this is our sized box and size box has created this distance and then we have this row and this row is showing this few text over here and the basic layout okay anyway so now we'll go ahead and put another container another widget which is called expanded okay and we'll do this because we want to put our video list like this okay as you can see from here so first we'll put our video file like this and then we'll be able to click them and once we click them we'll be able to play it over here okay yeah that's what we want to do and we already loaded the json files so they are already in a string format so all we need to do we need to go ahead and um just call them and display in our simulator or in our app okay yeah so the first thing here i want to return something because as you saw that uh this would be in a list okay so we'll use list view builder okay yeah so let's go ahead and call it we'll call list view dot builder okay and of course uh it takes it's a constructor so we need to supply some parameters okay first we'll supply this cons context but it's an empty context so which we are not going to use all right and then we want to supply an index okay so it would be int type and then we'll return okay so once you want to return make sure you have this uh bracket over here okay because we want to return a function okay yeah so return a function or widget it's up to you whatever you return for now we'll return null okay and at the same time this list view builder it takes few parameters the first one is well i wouldn't say it's the first one one of them is called item count so it's more like how many times you want to run it run this list view loop so once again this list view is more like a loop okay it is a constructor but it's more like a for loop so if you have basic programming background you'll know that and this is the counter limitation and over here it counts and return the necessary stuff okay now now this item count where is this coming from well this would be coming from up over here okay so remember we loaded the json file okay and then we saved in a variable called info but i want to change the name i want to call it the video info all right like this video info okay so once we load them uh we saved in a variable called video info okay now let's come down over here now everything is in video info so we can directly get the length so it's more like an array right now you can think like this if you don't understand what is list so now array has a length so we're going to use the length so this item count is same as the length of the number of objects in our video info okay and now item builder will have access to this video info and we'll access each of them using an index okay all right now over here we want to return something okay and uh well as you see from here so these are in the list and they would be clickable okay so in future we want to click them all right and that's why we want to return something special a widget or constructor that's clickable so that is one of them is there are many of them so we'll return detector because once you wrap things uh with gesture detector you can click on that thing or click on the widget or click on that item whatever it is okay and over here we'll um say for example there is a function there is a property called ontap we'll do on tap all right and then we can actually put a log out there and make sure that things are working pretty good we'll call it index dot say for example to string all right yeah anyway uh it will work later not yet and another thing it does is over here uh well gesture detector has a child so we need to return a child over here okay yeah so let's go ahead and return so so what's what are you going to return now over here we'll return the cards as you can see that the list are pretty much like in a beautiful card so we want to return a card but now the default card in flatter i don't like it it's not that good looking so i want to achieve this thing over here okay so that's why we'll build our custom card okay all right so what we'll do first we'll return a container okay yes so now this container if you see over here that now each of this container will contain this row okay including this section all right yeah now this section will have two big parts so this is the first row and this would be the second row okay all right and later on each row is divided into two section first section second section now this section again is laid out in column format okay now for this one this row will have two sections so this is the first section this is the second section okay well now what do you want to do as i said early so each of the container will contain this section okay this section now this section has two big parts this one and this one so they're on the top of each other so we'll return them in a column okay so we'll use our column property right now okay so go ahead and do it so called column okay now column text children so we'll return a list of children okay all right and um as it's a container we want to do we want to give it a height okay for example say i would give it height so 135 so height this height all right pretty much this height okay all right um anyway so now here within the column say you want to well now for our test purpose we can give it a color okay so say colors dot red or red accent it doesn't matter so now what you're going to do um we can run it and make sure that things are working all right uh well now if you're following just from this tutorial um what we could do we can actually come over here in our main file so for now i will change it to video info okay video info page yes well later on at the end of this tutorial we'll jump from home page to video info page okay all right now let's save it okay now we are here all right okay so well of course definitely nothing is visible over here yet okay yeah uh let's see give it a width okay say with like uh 200 okay now let's save it okay well of course uh this list are pretty close to each other so it's not visible that they're dividable they're not like this but if you click on them as you can see you can see that you are clicking on certain index okay so it's all there but now i have done this just because of this uh test purpose okay test purpose so it means it's working all right because we have total four items as you can see from here and we are passing the index within on tap and we are converting it to a string okay and then we are putting the log so it means that our container is working okay now back to this one so once again now it will have two two rows as i said earlier so now let's go ahead and work in the first row okay all right and once again we learned that row takes children all right now so this row would be the first row and well it will have two sections this one and this one now the first section is this image okay now this image uh would be in a container well we i'm putting it within a container because i want to have this border and container takes box decoration and with that you can create beautiful border okay and it will have width and height so give it width 80 and height 80 all right and later on let's go ahead with the decoration property so called box decoration all right and we'll give it border radius and i'll give it like say 10 all right so it's pretty much 10 i would say all right and then we want to show this image okay all right so go ahead and write the image properly and we'll use decoration image to do it okay all right now it is another property within decoration image that's called image property remember this image properly within box decoration and this image property within decoration image and it takes asset image constructor so now here we need to supply the image path okay yeah so now this image path would be coming from our json file okay yeah so json file the one we loaded before okay and do remember that all this information is saved in video info okay now over here as we are coming down as you can see we also have the access to index okay yeah so now here we'll first access to our video info using the index all right now here within json file which of the key we want to get now let's see our json file so now we want to show this image right and this image is within this key and the value is right next to it okay so all we need to do we need to copy this thing all right okay so once you copy it and put it over here uh so this thumbnail is coming from our json file okay yeah so as you saw earlier json file is over here okay now what it could do uh we can go ahead and run it and see what happens okay yes right now of course the first thing we have this error okay so let's go ahead and fix the error uh instead of embed i think i have changed the file name uh json file it's in [Music] over here sorry it's in uh assets folder so i'll just change the name to assets i'll just change the name early so just copy paste all right now let's run it once again yes the error is gone and things are there all right yeah okay well don't worry about this background color now we'll remove it later okay it doesn't matter okay so it means it's working and it's showing up this video all right uh sorry the thumbnail okay yeah now back to our file over here so it means that our things are uh uh our json file is working our list builder over here it's also working all right yeah and let's make sure click on this and those i think we'll see different index like so this index should be two yes this index is zero perfect this is one and this is uh three all right so that's working okay now um one more thing before we go ahead i think uh we need to fix this issue here well now this should return this is an async operation so we need to write a weight before it and once you do that you need to add a modifier in front after this function okay yeah and then we should be good to go all right okay so make sure things are working fine okay everything has loaded perfectly okay so now back to this thing so this is the container over here so this container is showing uh this uh thumbnail images right the next we want to show this too all right but this 2 should be in a column all right before we do the column let's create a distance so we'll lose size box and so with like 10 and with this we'll have this 10 pixel distance i guess all right and now we'll write our column widget okay and it takes children okay now as you can see the first one is a sentence or text right so wrap it around text widget okay and now this text once again would be coming from our json file now we can access our json file using this and we'll go to the uh corresponding index and then we'll call this one okay and now what is the key for this the key is title okay so this is called key and this is called value okay in json file so what is our uh key that's called title okay all right so that's it and then we want to style it okay yeah so text style and say font size we do 18 and we'll also use the font weight to do font way dot bold okay now that's it let's save it and see what's happening uh it's uh there is an issue i guess let's see let's restart it okay perfect so our text is there once again don't worry about the red background we'll remove that later this is for debugging purpose so if you want to debug a lot of time you can use different background color and that helps you with the debugging all right so next we want to show this uh second text now before second text as you can see here we have this bit of distance so we'll create this distance and once again we'll use size box sorry and we'll do height 10 and later on we'll do this text okay all right now this is pretty much more than 10 pixels as you can see the distance okay well i can either increase the distance or i can use a different widget which has more top padding okay so we'll use a padding widget in this case it doesn't matter you can all continue to go ahead with text widget and create this size box but because we are learning so we want to learn a bit of different things so this time i'll use padding now padding text child okay now in our case this is the text okay and we do video info index and then our [Music] this one this one is the key is the time as you can see time so we'll read that so we do time and then we want to create a bit of uh we want to create style over here okay so what style we want to pose i think in this case we just change the color do text style okay yeah and color say colors dot gray and 500 we don't want too much gray all right so now there's an hair over here that's because it needs padding so as you can see from here so we added it and now it a bit of padding so we do edge inserts only top padding say for example top three all right now once again go ahead save it and run it because json file there might be issues if you don't reload things okay now like this okay now it's a bit of ugly right now so the first thing i want to do is remove this background color okay uh so this one we don't need so save it the color should be gone okay all right okay now it's loaded and but we want a layout like this okay okay all right so how to achieve this one uh at the same time we don't need this one all right now you want to fix this issue and it's pretty easy to fix okay so now as you can see this is our column so it is this three sections okay so over here we can set up some of the properties uh the first one is called main axis alignment so in our case the main axis is this one for this section for this row uh well i'm sorry this is a column right so this this should be our main axis so we want to put in the center okay yeah to do main access dot center and if you save it uh well i'm sure it's the problem here though i'll manually load it not much because they're already in the middle i guess and then would do cross access alignment okay yeah so cross axis alignment dot start so as we do this one this is our cross axis it will start from here right here okay now let's save it reload it okay now it's looking much better all right yeah uh well i think i'm not very happy with this border so let's change the border so instead of and well i guess it's not the border issue though there's another property that we can use that comes in uh box decoration okay so that's called fit properly okay so we'll use that one and box fit sorry box fit dot cover okay now let's save it uh once again i'm not sure what's problem with my android studio yeah no no it's looking much better right yeah so that is really good and another problem with this is as you can see this is too close to this left side so we want to fix this issue and to do that we can put a bit of padding in our list view builder so we'll put padding over here okay all right now we'll use edge inserts only our are we symmetric this time not only now if you use a symmetric we'll just use a two property horizontal and a top okay now horizontal works for both the left and right side the two at the same time okay so we want to use horizontal 30 okay let's save it once again i'm not sure what's the problem we'll fix it later i mean that way so it's working over here as you can see and at the same time i want to put a vertical distance let's put it vertical say eight all right now let's manually restart it okay yeah so it created a bit of distance at the top okay yeah uh well we can do a bit more okay over here sized box say height 20 okay now let's restart it okay uh yes so it's much better and this vertical padding actually within the list itself later on okay yeah so but with this one this is the fixed top distance anyway now things are looking much better and you can also click on them and it works as you can see from the log down there okay perfect okay so next we want to do uh i'm sorry next we want to do this design all right over here uh as we said earlier we talked earlier that we have two big rows right so this is the first row and now we'll work with the second row okay all right so what we'll do we'll go ahead and declare another row proper row constructor and within it as you can see from here we have this two sections right so this would be a container and this would be i guess another container okay yeah so how to do that uh so we'll have children children texts um child so first child is a container okay on the container we'll have width and height so let's define with 80 and height say 20 okay yeah on the decoration box decoration okay and now we want to give a give it a bit of color okay for this section so let's go ahead and define the color so to color color we do o x f f e a e e f c all right yeah and then we'll do border radius dot circular we'll do 10 all right okay so we are pretty good let's uh reload our thing and see what's going on all right so it's there right now it's really too close so to make it better we do size box once again size box height say 18 instead of 20. let's reload it manually okay yes okay now it's looking much better now container text child so there is a text over here okay we'll put this text within child property okay yeah so do child okay and then we'll do text okay on the text is for now uh this text is 15 seconds so let's go ahead and do it we do 15 second rest okay perfect and then we'll do style so do text style okay and it would do color ox ff three nine f e d all right and i think that's it so let's run it and see the result okay it's right there and yeah now let's see if we can put it in the center of this uh this container and what happens we can wrap it around center widget let's see if it works or not let's reload it once again and done okay so it's in the center perfect okay so we can center if you center widget you put things in the center of a container all right yes okay well now we'll do this thing this dotted lines okay now unfortunately in flatter there is no easy way to do that so you have to write your own algorithm to do that okay um well now as you see i will have a row for this section just for this in the row i'll have this dashed line as children or each of them is a child okay so that's why i want to wrap all of them in a row okay perfect so let's go ahead and do it there are some plugins but i don't want to use plugins so we want to learn programming the actual programming so once you're good at programming you can create your own plugin all right anyway so now so as you can see this dotted line actually consists of this dotted line as well as the white dot okay blue dot and white dot together that's what we want to do and we want to draw them in a loop okay yeah for for for example first say we have this one so first say we have a container all right and container with is a three and say height is one and then we'll do decoration and we do box decoration all right and the color o x f f say eight nine eight i guess eight three nine f e d all right and uh with the border radius say border radius dot circular two okay yeah now let's go and save it and run it and see the result okay now as you see here there's one this little dot well it's not really dot because you can't really draw a dot over here uh but it it it makes sense right okay now what do we want to do we want to run it in a loop okay so that will have a lot of a lot of these things all right yeah so we can just declare over here uh for loop and we'll run it certain times and i equals zero and i is say less than 70 will run it 70 times and i plus plus all right now let's see what happens over here once you reload it yes but now it's not this dust line anymore so what's going to do well we can actually put blue line and white line together or blue dot and what the white dot together so it will create the vision of uh dust line okay and how to do that now we can do it very easily over here so first one say would be blue things like that and second one would be white so based on this index we change the color of this container all right yeah that's what we could do now how to check the index so we'll see if i is even okay well 0 is counted as even all right if i is even then we do this one okay otherwise if i is not even we just show a container all right container all right container if i is even then we'll fall back to this one if it's odd we'll fall back to this one but this is an empty container right now let's go ahead and see what happens yes uh it's it's a bit weird right okay well it's it's not working because this container itself doesn't have within height okay this container so over here we can do the same thing like for example this one okay and then we can change the color okay we'll do color colors dot white okay all right now let's go and save it and see the result perfect so it's working okay now once again go ahead and click on them it looks like everything is working okay okay uh well now we can restructure our code rearrange our code i would say to be organized let's collapse them like this over here same and our column a row pretty much like that okay yes and this one okay now this one it's pretty long i don't want to put it there i want to put it in a separate function okay so let's create a function over here all right and we'll call this function say list view okay all right and list view let's open it up and let's see well the only thing list view should take is this index okay so we can pass index that's what we'll do so over here well we don't need this thing and we'll have int index and it's a function okay and this function would return return something what it return it'll return this container so we'll just cut it copy paste and put it over here all right and we need to put our semicolon and now over here we can call list view okay listview all right and we are passing the index all right and this index once again is coming from here so you're passing the same index to this one all right uh well let's save it and make sure that everything is fine okay yeah so there is no error and at the same time i also want to uh change this section over here that expanded restructure part of the code like this all of it okay yeah uh like this okay uh well i think we can rename this one instead of list view i would say build card sorry let's call it uh build card okay because we're building the card actually and build card okay yes now it's fine and this section over here okay we'll move it inside another function so so that our code looks neat and clean okay and this one actually called list view all right and it'll take index and that will return this list view builder okay the one earlier we copied from here and we'll call it list view okay yes well now this should oh yeah by the way this shouldn't take any parameters so it doesn't need any parameter and we're good now yeah so the error is gone and uh it should be working all right yes okay now let's kill this app and uh let's reload it and see something all right and there's another issue that we need to fix all right but now you see our json file the information and the information we read from jason five they're all gone why well now that's happening because at the top we have done something which is not complete over here well by the time it's loaded all this information in this variable the build method has been called and it's done i mean that also means that this is a slow operation as you can see that we have a sink and a weight so it does take a little bit of time but our build method doesn't really wait for this method to be finished so once it is the build is done by the time this information is not there yet so we see it's empty so we need to retrigger this drawing okay drawing our screen and how can you do that uh we can put it inside a set state function okay okay now let's save it okay so when you put things on set state function and if there is new information it updates the screen okay now let's save it and see yeah this time it's working okay yeah so we can stop our app and rerun it again and we'll see that it'll work yes as you see all this redrawing or to re this redrawing is being auto triggered so it's working uh at the same time if you're following along from the previous tutorial the same thing should happen here okay so we do set substrate and put it there anyway so that's it now come back to our file video info over here right i guess um this one right okay so list view builder and now what you want to do next we want to uh click on this video or a list on this we want to click on them and load the video load the related video from json file because json file has video url as you can see so we need to load them from this video url and then we'll display it here and to do that definitely first we need to hide this section and then we display the video over here so that's what we'll do in next section well the first thing we want to do we want to be able to click on them and then we'll know that somewhere in the list we have clicked okay that's what we want to do all right to do that uh we can put a log over here first uh within this one actually we already have one okay yeah now within this from here we want to redraw trigger a redraw of our widget okay like we'll be clicking here and then it will trigger a signal and based on that signal we'll hide this section over here and play the video okay well to do that here we can use the set state function because we know that set state triggers signal that helps the widget to redraw okay now definitely we need to do something within this okay so first we need to declare a variable so let's go top at the top very top uh i would say let's go over here and declare a boolean here so we'll do bull and the variable name is uh play area i will call it play area and the default is say false okay yeah false all right great now we'll go down at the end and over here we'll what we'll do we'll check if play area equal false then we'll set it to true okay play area equal true okay now we have to check this condition somewhere and the place where we check it will cause a re-render of our widget okay yeah so now we need to use this one somewhere okay all right now take a look over here uh this is our place from where we are actually drawing everything this one i guess this column okay we can collapse it all right and the same for this one all right okay and what else let's see and this is the body section right well we can collapse the decoration section now you know that this part is responsible for this expanded part is responsible for drawing this one and this area container is responsible for drawing this one okay so this condition play area will check it over here using this variable we will will check things over here and change things from here so in default condition play area is false right yeah so that's where we'll check so we'll do itenary operator over here so check play area uh equal false if it's false yeah if it's false then we'll show this container okay otherwise we'll have a different container okay and this container will definitely draw here something different right yes okay now the first thing we want to do first well definitely if it's true the play area over here we can do a check right now we can just say container say with well say 300 for now and sorry and then we'll do height say 300 okay and then we'll set color so colors.red okay just do it for fun right now okay so now let's go ahead and restart our app okay all right yes so now we'll click over here and hopefully we'll see that container changed all right yeah as as you see so it changed whatever it was there and it changed the thing with this rectangular square thing okay so it means that it's working right but definitely you see this blue one actually this is this background color which is coming from our decoration right yes so now the first thing we want to take care of take care of this background color as well we don't want this background color when someone triggers over here right yeah so at the same time here we can set up a condition all right so we'll do well if play area is false then whatever the background is there decoration we'll use that one otherwise we'll use a new background color within box decoration okay yeah that's what we want to do so now here we'll do color okay and color dot app color uh sorry color dot app color dot uh gradient second this is the color we want to use and what is this color though you can check take a look over here this file so gradient second uh i guess this is the color okay you can of course directly use this color if you don't want to use the way i want it because this is our color file so over here we can also directly use the color anyway so let's go ahead and save it all right okay now let's take a look so we'll see that uh now this is the default background color as well as the information once we click on this this background color would be gone would be replaced with this color as well as with this container so this play area is helping us to make changes in two places over here in the container and the background color itself let's check it out one more time all right so the color change right perfect now of course this is pretty ugly but this is for debugging purpose that we know what we're doing right okay well now the first thing we want to do is here we want to put a back button at the top okay so that we can go back somehow if we need to and then we'll have our play area and then we'll have our control area over here from here we'll control so that's what we are going to do now all right so for now i'll definitely remove this part we don't need this one okay all right so just now i explained that we'll have three sections the top section for going back if we need to go back to the previous page somehow later on and then the play area and then the control area so this section will have a column layout format okay so within container we'll declare a column of course we need to use the child property to do that so because we have three sections they'll sit on the top of each other so we'll use column section or column sorry column widget or constructor okay now first we want to draw things over here a back button and other things like some icons okay now we'll do that in a container okay all right now container will uh say we'll have a height okay we'll give it height 100 okay and it will have say then i will have child here right okay all right and child will use row over here why because this section within this container we'll have a back button then empty space and then another icon here so we'll have two icons one empty space so within this container we can put things in a row all right okay so that's what we want to do all right and now the back button would be able to click on it right so we need to wrap it around something clickable in this case we'll use inkwell all right okay now encore has ontap property that's what would you would be using and the ink oil itself takes a child okay now in this child we'll use icon okay yeah so icons dot arrow back ios i guess that's what we want to use all right and then we'll use say size new size and let's use color all right so we'll use color from our color palette up color and then we'll use second let's see second page icon color all right so that's what we want to use now let's save it and let's see if we see something right yes okay so this is our icon all right and this color is once again coming from over here let's see second page icon color i guess this one second page top icon color this one all right okay anyway let's go ahead now there's a problem though like uh this uh too too close to this top section so here what you could do we can set up some padding okay right okay so let's do it we do const edge inserts on the top say let's go with 50 and see the result all right so i guess we are happy top 50 and say left 30 okay and write 30. let's save it perfect now it's aligned with this line over here perfect things are working and of course you can click on this button but if you want to click on this we can actually put a log out here so that we know what's happening so you could do debug print and would say tapped all right now let's save it and let's try to tap on it yeah tapped as you can see from here so it's being tapped that's fine and another thing we want to do over here what do i do we'll use another icon over here i think that's information icon all right so let's go ahead and do it so i'll do icon i can start say in for let's see info outline this one okay and the size 20 and the color [Music] color dot app color dot second page top icon color within second page i'm sorry top i can color now let's save it and see the result okay sorry i changed the color though now they're too close to each other so what do you want to do we want to create the maximum distance between them so that's why now we can use expanded widget okay and then we'll use empty container all right perfect so now it's working okay so let's uh reload it one more time in the beginning all right now here we are let's tap on this one so the index is one so this is the index background color change and the icon showed up and uh tapping is also working okay but now that's uh this section is done but now what do we want to do we want to play the video the actual video and that's what we've been working for okay yeah so we want to play the video well now if we want to play the video definitely within this column and here we can define an area for playing okay and we'll define a function here we'll call it play view okay that's what we'll call it play view and let's see and we can i guess we can pass a context over here it might be useful okay and let's collapse it uh this is the build card now let's define this function here we'll call it play view okay and it'll take a parameter would call it build context context all right yeah like this and well this is for playing so we'll be playing a video over here but before we want to play a video at the same time we also need to initialize the video okay do remember them videos links are coming from here okay we can get the link from here from this list from here if you take a closer look uh let's see the list over here this one actually list view and the list view is once again this function over here and here as you see we have this index so as we have the index then we can retrieve the video url from our json file so we have the video url here okay yeah so now over here we want to use this index and initialize our video okay so now we'll declare a simple method here okay we'll call it say on tab video and we pass the index all right yeah well this play view for now is empty but uh we will use it a little later okay let's see it's throwing an error on tap okay so we need to define this function so we'll define it right up there okay so we'll call it on tab video and it takes index index type is int all right now the error should be gone so here i have this index okay and now we'll use this index to get the video now to get the video we need to use the plugin okay so we'll go ahead and install the plugin over here in our pop specs file say just right here we'd use video player this one let's get it one more time well hopefully it installed because there is no error right okay now it install and we'll be able to use it let's come back to this place over here okay well now we need to initialize our video using video controller okay and this videos are coming from network so json file has this network link so it means they're coming from network right okay now let's go ahead and initialize it we'll declare variable and we'll call it controller and now over here we'll use video player controller like this one so as you can see and your studio has recognized it so we'll use the network because we've been using url we'll be using url okay now it's ask you to get the data source now do remember that earlier we were able to access this video info list and now we have the access to index so this index is coming from here and then we'll use the video url key v video url and now do remember that this video url is this is the key okay so we have a few videos over here so this is the key all right okay and i guess i need to put a comma over here okay perfect okay now with this we are going to control initialize the controller video controller with the data okay well now this variable is local variable so you also want to use uh declare a global variable let me collapse it it's too much information here right now yeah okay perfect so let's go ahead and declare a global variable okay so it will do we declare video player controller and we'll call the variable controller okay just like this okay and let's see a light modifier and it should work okay so now what do you want to do you want to save it to the global variable the local variable our local variable is controller this one okay now this is our global variable okay all right and after that once controller is done uh we can call set state function but this would be empty set state but hopefully it will help us to re retrigger some of the drawing okay and then once again we'll use this controller and then we'll access a method which is called initialize okay from this one okay all right let's call this controller okay all right now it is a cascade operator this one it saves you typing and we'll in access the method which is called initialize okay and during the initialization okay i guess this will initialize things during the initialization we'll call another function which is called then okay well now then can take a value but for now will not pass any value we'll keep it empty [Music] to keep it empty you can use underscore okay and then you can use this second braces all right yeah okay now within this we'll initialize things okay all right so definitely we can do this one controller dot play all right yeah but we want to use it just for local variable for now we'll use it the global variable little later so this is one we can do okay once the initialization has been done then we'll play the video okay so that's what we want to do and at the same time let's see we will set state to make sure that redraw happens even though it's empty all right so that's what we have so we have ontap function within ontap function we have this video url okay and then we save it to the global controller and we'll use it later don't worry and then we initialize and try to play okay so that's what we want to do and now we can go ahead find a place to play it okay now where to play this thing earlier we took a look over here and within this let's see within this over here actually this one container play area false over here so we have this play view function okay and player view should be able to play things okay so where is our play view play view is over here okay so now here we'll first declare a variable we call do you remember we have global controller variable so which is this one all right so we got the global controller and we save it to this one which is local variable and then over here we'll check some things what do we check we'll check if controller not equal null at the same time controller value dot is initialized so video player plugin and video player has this value so don't worry you can just all you need to know know them what they are and what they don't do okay so over here we are checking this variable which is global controller we make sure that it's not null and at the same time the value has been initialized and if it's so then we'll return something okay otherwise we'll return something different okay else will return something different so what happens if video controller exists and the value has been initialized okay then we'll return something what do we return we want to return a video player okay that's what we want to do and in general you do it controller sorry container and child uh when you do here you'd call video player yeah video player and then you pass the controller variable which is the global controller do remember this one local variable contains this global variable okay yeah so you pass it uh at the same time you can define height and width say height 300 and say with 300 okay otherwise so if they are not initialized or it is still empty in that case we'll show something different what do you so we'll show a text okay for now is it being any sha lies please wait that's all we want to do for now okay yeah that's what we want to do and we want to return this one actually okay well uh we are returning from here so we also return we need to return the type so what's the type we are returning we are returning widget type okay because container is a widget text is a widget so we are returning widget type so now what we'll do we'll play here tap on the play button run button and let's see what happens now everything has been reloaded now let's uh click on this and see what's what happens okay well now it says being initialized please which means that it's right over here hold on yeah oh sorry this one okay but it looks like it's taking a lot of time okay now we'll see if you if you wait a few moment you'll get an error okay most probably it will give you a platform specific error if you are running on ios and at the same time there should be an error if you're running on android okay but anyway it's not playing all right so if you come to their official website this is the video player their official website okay well now over here for installation we also have some of the settings that we need to take care for ios you need to come to this folder info plist and over here you need to add this section okay so we'll just copy paste this by the way uh if you're running on android device so you have to set certain thing in androidmanifest.xml file this one just copy paste and it should be good to go um so let's go ahead and change our settings over here project settings like this one okay now over here with the copied the thing so we'll copy paste here and save it and after that uh we'll rerun our application okay yeah and it might take a bit of time to get initialized as you see as it's working over here hopefully it would be done very soon and at the same time come back to this place and let's see and we'll click on here and uh this is the squat start it and that's what chest up and your shoulders back now this part back straight weird right wow the frame i'll stop it for now okay or it stopped automatically because the video played finished right but now we want to change this thing it doesn't look really good uh to change this thing here actually instead of using container we can use aspect ratio okay so we'll just write aspect ratio okay and expect ratio doesn't take within height what it does it has a parameter which is called aspect ratio and we do 16 by nine well this is the best aspect ratio for any device from my understanding okay yeah and at the same time we also want to change wrap it around expect ratio otherwise when it plays and when we wait for this text when you see the text at the top it doesn't really look good it's too small so while we wait the video to be loaded we want this text background should be as big as the videos aspect ratio okay so we can wrap it around aspect ratio widget so we'll just write here aspect ratio okay and once again i will set the aspect ratio over here it's a ratio 16 by nine so what it does based on your device screen device width and height it takes the frame width and height and set for your video controller or your text okay and it looks great and actually i also want to wrap this around within center widget so everything would be put in the center and instead of writing this one i'll write preparing it means the video is being loaded and over here we can do a bit of text style okay so we'll do style text style font size sorry font size 20 and then uh color we'll use colors dot white for now 160 all right okay now let's stop it and run it once again and we'll see what happens here okay so hopefully this will work and everything would look much better okay perfect things loaded now let's click on this this looks beautiful squat and now this is your chest up in your shoulders much better okay keep your back straight keep your butt low okay now let's click on other one yeah i'm gonna have you go through so it means our videos are working being loaded perfectly okay all four corners but i'll i'll stop it now stop opening the gate and then close the gate big step okay so next we want to actually have uh for example hold on let it load uh what do you want we want to have a controller over here this is the squat walk so that we can control it back and also work on the sound thing okay so i want to put a controller over here so that we can control well before we go ahead and do that i need to tell you that i have made some of the changes if you want to know well the first thing i made a change over here this video controller instead of writing here late late okay i did this uh checker so it checks if it's null or not but it could be null so that's why we have this one okay so you should change it to this one but of course it also depends on your sdk version so my sdk version is this one so depends depending on your environment setting this uh settings or this kind of question mark could be different okay so for for me uh for this kind of in this environment um i have to have this one otherwise it will throw an error okay as you see of course you can go ahead to write late but it creates problem later so i have decided to go with this question mark okay well of course some of the older version you even don't need this question mark just this this one works so just check it out or leave a question below in the comment section i'll try to answer your question okay so that's one thing about video controller and the second thing your json file so over here is better you have http s and it works fine without https it also works with http but in that case you need to make changes over here okay all right and another thing is that i found after hours of debugging if you have space between your in your video name initially which i had and it just doesn't work so if you have space please remove the space in your video because you might have your own video so you have to remove the videos otherwise they don't work okay so these are the few things you have to remember and another thing if your videos even after everything they don't work you might want to restart your whole machine your uh computer and they might work okay so this is a few annoying things working with video or video controller but these are the problems that i've faced and i decided to share with you guys okay anyway now we'll go ahead and set up this controller over here okay well to make a control button over here we need to come to our layout main layout which is over here okay and here we'll declare a function we'll say control view okay and we'll pass a context if we want to use it in future it doesn't matter for now and over here we'll make it okay well so we'll declare over here control view i mean sorry define the function control view and it will take context to build context context because we are passing the context all right from here okay all right now we think we want to return widget uh well even if we don't return widget i think it should work so let's go ahead uh okay yes i think we have to because it's a different function we have to write your return function anyway so use widget we'll return widget and now here return okay we need to write return stack statement and here we'll have a row because we want to put everything in a row okay like that okay now we'll have children all right okay now the first one we want to do is uh we want to create few flat buttons over here okay so do flat button okay yes definitely flat button has its own properties few properties that we need to use okay well definitely we have this unpressed button okay and child we have child icon so do icon icons i can start fast rewind i think that's what we'll do first rewind okay this would be our left button okay yeah and definitely we can set up size here so do size 36 and color colors dot say white this one okay and this would be definitely an async operation i think okay but for now we'll just keep it there we're not going to use it so this is the first button okay and we'll have three buttons okay so this is the other button and over here i think we need a comma all right so over here we'll have a button for like say for playing and pausing and playing like that okay so here first uh the icon let's change the icon name uh play arrow we do play arrow i guess for now this is good the color stays the same and let's uh copy it one more time and put it here by the way it's being cranky because we have a return statement so we need to use semicolon all right yeah and over here this is the last one we'd use fast forward this one and everything else stays the same so we have three buttons so this is for this is for playing the one on the left or the earlier one this is for pausing on replaying and this is for going to the next one so first we'll work on this one more now once we click on this we want to be able to stop it right stop playing that's what we want to do and to do that we need to declare a new variable otherwise we won't be able to stop and play like that okay so let's go ahead and declare the variable uh we'll declare a boolean variable at the top over here okay and we'll do bull is playing okay well is playing equal say false beginning is not playing okay now let's come back to our function i guess which one sorry i think we are here all right okay so over here so somehow we'll check if is is playing okay well if it's is playing true then we will pause it okay now we have the access to the global controller remember okay and we'll do pause all right p a u sc pause all right okay uh but it wants you to do the null check operator so we'll just use this uh uh question mark but depending on your version you might need to do this one but in my version this might throw error which i've already tested so i'm going with the question mark okay so if it's playing then we'll pause it okay otherwise otherwise okay otherwise we'll uh play it so we'll do controller dot play okay this one all right now the same thing over here so yeah that's it but now we initialized it as false right so definitely it wouldn't work so we need to find a place where we can set it to play when it plays right because right now it once we click on this it automatically plays so we need to set up a listener okay and when it plays we will have a listener and in the listener we will set it as playing as a true okay and at that moment it is playing and we can click on this button and pause it okay again once again because once we click on this links they played automatically so the place where it plays automatically from there we need to set it as a true okay now this happens in our initialization we have a function um which is called initialize video this one okay yeah so it's coming from on tap video okay so over here we can add a listener okay yeah so let's go ahead and do it uh we'll just call uh controller this one dot add listener okay yeah so over here we'll declare a new function we'll call on controller update okay controller update okay now definitely we need to define this function so let's go ahead and define it over here yeah and this would be a void function which returns nothing on controller on controller update and this would be an async operation a sync operation which is not regular operation so we might stop uh i mean the loading resources this and that could be late so that's why you tag it as async so the system understands and it doesn't crash okay or doesn't return null all the time so over here okay and over here we want to update our thing okay all right so if if the video player is there first definitely we'll check some of the chattings or uh settings actually okay yeah so first before uh first we'll declare a variable we'll call it controller and we get the global controller okay yeah so now global controller has is saved over here now we can check on this one so we'll check if controller this one is null then would debug print controller is null okay and would return all right return okay that's the first check okay yeah because it's listening because listener is attached to this controller and it would be listening all the time and if somewhere somehow the controller is null will return okay and log a message on the screen and at the same time over here we'll check another thing if controller dot value dot initialized is initialized so this is to check if the controller has been at the end initialized or not if it's not initialized we'll fall back here and would debug print message controller cannot be any and then we would return once again okay so if this two condition passes it means that controller is there right okay so right now if the controller is there we can get a value okay so would call it playing value i mean we'll save it in a variable called playing and we'll get it from controller okay and controller has a property call called value and value has a property called is playing okay this one so after this controller should be playing okay and if it's playing the value is saved there and then we can save it our global variable which is called is playing okay all right so this is happening first we are checking the controller that whether it's still there and it's not null okay it cannot be null and the value has to be initialized and if it's done then uh we update our variable okay and once we do that now we can work on our uh buttons over here like let's see our flat buttons okay now here it will be true as it's playing the video right and then we'll be able to play it okay while if it's playing then we'll pause it if it's not playing then we'll play it like that okay of course it also means that you need to change your condition okay okay now if it's playing we need to check it over here is playing is the playing is true if it's true the values is true then we'll show this icon icons dot pause okay so if it's already playing the button should be pause button if it's not playing then it's a play arrow button okay so that's what we have so far okay now here another thing is that uh this row could be ugly right because we didn't have any style so we want to style it so what we could do you could wrap it around a widget which is container widget okay and we can give it a height okay say height 120 and we'll have width say for width we'll get get it from media query context dot size dot width okay and at the same time we also want to give it a background color okay so we'll use it from our color palette a color suck gradient second that's my favorite color all right okay now hopefully everything should work fine so restart our app and we'll see what happens there okay so it's reloaded so now let's click on this here we go this is the squat walk so it's working right chest up and your shoulders back turn off the audio okay so it's working and our button is there and we can pause it as you see all right okay uh but looks like we paused it the button the icon didn't changed let's see so oh that's because over here we also need to set if we set it to pause then we need to set it to false is playing is playing okay so this one over here we need to set it to false okay yeah and how do you do that we can i think we can do it using uh set state function okay uh so that it triggers the redraw of our screen so do is playing false okay all right so let's reload it one more time and see okay yes it's working the sound is there but very little okay and i can stop it icon changed i can play it one more time now this icon didn't change again right so i think we need to do the same over here but the opposite okay so we'll say it is a plane called true okay now let's go ahead run it and see the result this is the squat okay it's stopped it plays your chest up and your shoulders back and we can stop it we can play back straight perfect so this is the time actually we're working for whole time okay but there are far more things we can do first let me center it okay uh to how to center that because it's a row so this is our uh main axis alignment so we do center main axis alignment main access alignment dot center let's save it it should be centered right okay perfect all right so now everything is working fine the audio and this and that okay i think we can also replay another one okay and then we can pause it right okay so there are many more things that we need to do but we'll be doing all of them one by one okay next we'll see uh if we change the video one of the videos we need to dispose the earlier video and how to do that okay to dispose our video once another video is clicked like for example if you're playing this one and once you click on this one this should be disposed right or they should be freed up from the memory okay to do that we can go at the top and over here okay right below this edit method we can override another method and that is the disposed method okay dispose all right and this method has another method that is super method that we need to implement super dot dispose fine and so this is this would get called right after local resources are being removed okay now local resources we need to remove manually okay right and to do this we also need to uh declare the variable we'll call it disposed equal false okay all right now over here we'll declare or assign disposed equal true but of course this variable we are not using yet so we'll be using in other places and we'll see how it works okay so this would be a boolean variable and we would use it in our listener later on anyway so let's go ahead and now we have this global controller so we'll first pause it okay so if you click on the other one let's go ahead and pause it or if you leave the page go ahead and pause it first you can leave the page by clicking here and then you can dispose it okay so you only dispose if the controller exists so this question mark means if it exists then do something do what we can now dispose okay yeah and then after that we can set it to null okay so this way it will make sure that controller has been removed or set it to null nullify okay that's done all right and uh now we need to use this one and do other stuff in a couple of other places so let's go down at the bottom uh i guess over here right well first we need to save our old controller what is the old controller like if you say this is playing and you click on this one so this becomes the old controller so which means this is the previous global controller okay so we need to save it all right so we'll declare in a final variable we'll call it old and also save the previous old controller okay so at first of course beginning it's null but uh once you play the second one the first one becomes the old controller so this is our old controller and we need to save it and that's what we're doing here okay and after that we'll also do other check now we'll do checking that if old controller is not null okay so if it's not null we'll remove it okay but uh before removing or before pausing so we need to attach a listener which is called a remove listener and to it will pass a function that we created early the function is on controller update all right it'll listen to it and remember some of this information and then what do you do with the old dot pause okay so it will pause it okay if it's not removed or or if it's not null but if it's null of course it means that our dispose method has already worked okay yeah and then during when we go to initialize our next video so next time when we initialize the video we'll again check once again if the old one exists then dispose it okay because video might not be removed immediately it might take times based on the system lower level how it works we don't know but these are the staffs that make sure that video will remove or disposed eventually all right so here we'll check if the old one which is this one is not null then we pause it okay and then if we are going to really initialize the next video so disperse the earlier one so using this uh function call we can dispose the earlier one but now over here uh okay so we can use another mat option which we just used early like the disposed variable okay so if uh well during the listening because this listener which is on update controller it it might get called again and again and again even if say the player has been disposed okay so what we'll do we'll just check over here if this posed to true then what it will do we'll just return because it was listening but at the same time uh the controller has been disposed then we just return we don't need to do any of these things okay once again because over here it will get called many times because it's a listener and same over here once you attach a function to listener the system keeps calling this function again and again and again okay and some of the times things may go wrong so you can return early if it if it has already been disposed you don't need to go ahead and check other things right okay and speaking of this one just now i said that because we attached a function to a listener so it gets called many times like in a second maybe many few times okay or a lot more 100 times or 200 times okay so because it's listening to the states right but we don't want to call it so many times so we can limit it okay once you limit it it's good for your video performance okay so to do that we'll declare a variable okay all right so here we'll do final now and here we'll use the function in uh flatter datetime.now this one and it has another uh callback function which is called millisecond since epoch this one so it will give you the current time in milliseconds i guess all right okay and at the same time we need to declare the variable so let's go ahead and do it we do uh update on update controller this is a variable okay remember it's different from on controller update so you can attach time maybe this should sound better okay so what we'll do so if well first let's see here on update controller time we set it to zero okay and now if on update controller time is greater than now then we'll return okay then we don't do anything if it's not then what we do we add some times on it so say now plus 500 so here 500 is more like adding 500 milliseconds to it so all it does is that if you call it too quickly but uh well i mean this function if it gets cold too quickly but 500 milliseconds has not passed yet then we return from here okay so that's what it does so using this 500 millisecond a lot of time when it gets called too frequently so it gets removed from here because in earlier call there was added 500 okay so so from then on the now and this value difference definitely big so which means that this is bigger than now okay so we'll return so this will make sure that the controller listener is not being called too quickly all right okay so this is so much for this disposing and performance issue so the next thing we want to do we want to work on those buttons all right so we want to work on this button so let's go ahead and find this button and we'll work on this so because we want to click on this and go to the next video all right yeah well now to do that we need to first first when we initialize a video we need to keep track of our index okay so here we'll keep track of the index all right like let's see we have an index here right so this index we can save it so we'll call it is playing index equal index okay and now this is a playing index we can initialize at the top over here so we do int is playing index equal say minus one since the default value is minus one so let's come back to the bottom so now over here we save it say for example this video is being played now once i click on this one this one so first we have to know the index of this current video so the index of the current video is saved over here within this so we save it and later on we based on this we can do some calculation so where we do the calculation we do the calculation in our function buttons uh sorry the buttons are let's see where the buttons yeah over here so this is the first button which is this one okay so over here we do some checking right so first we save the index final final index you call so is playing index so whatever the index we are playing we take that one and do minus one from it for example if you want to play on this one you definitely you if you want if you tap on this one definitely you are going to play the earlier video right so earlier video the index should be minus one okay so that's what we are taking the current index here remember we saved it this one because we press on the button now we do minus one from the earlier video which is this one okay so this should be the index of the video that's going we are going to play now which is the earlier video right okay but now there could be problems okay because earlier videos index could be minus we which we don't want okay so we check if index greater than or equal zero because the first video is always zero okay like for this one so if i'm playing this one now i click on this so index for this is zero right so that's what we check over here and video info dot length is greater than or equal to zero so we have to make the both conditions all right if it meets then we go ahead and play the earlier video okay so now we'll call here the earlier video how to call it we can call it initialize video this one and we pass this index okay and that's how it should work all right so let's go ahead and restart our app and see if it's working or not okay say for example i click on this one okay it started to play right now i pause it say for example okay now what i do i click on this one so we should be able to see this video is playing okay yeah i'm going to have you go through a little lateral squat walk getting in a nice squatted position all four corners of the foot on the ground okay now click it here one more time so this is the squat walk keep your chest up and your shoulders back keep your back straight it's working right but of course if we click once again then this method wouldn't work in that case we can uh use a message okay so else we can send a message so what's the message get dot snack bar this one okay so title video and message no more video to play all right so for now we'll just design it like this we'll change it later once again this get dot snag bar is coming from our gatex package if you're just following along uh from this tutorial the current tutorial so make sure that you have this dependencies which is called get okay all right so this is our snack bar all right okay so we saved it over here all right now let's see if we click on this yeah no more videos to play so this is the message but later on we'll style this uh snack bar okay but you get the idea okay yes all right now what we'll do we'll work on this one okay this one so this button is over here all right so once we click on this one the logic is opposite so what will happen once you're clicking this one you have to get the index of this and do plus one with this current index only then you can go to the next video okay so we do final index a call is playing index okay over here plus one okay and now we'll check it if index greater than or equal video info dot length minus one okay so if it video info is say for example if you have three videos so the last index should be two right why because zero one two this three index right but now the length is a three so that's why we have to do minus one that becomes two all right so two is greater than or equal to this one okay which is the last one just for an example okay now in this case we'll continue and we'll call uh his initial initialize video this one okay and pass the index hopefully you understood if not we can also send another message so get snicker video list no more videos in the list no more videos in the list okay all right so let's play save it now we'll click on this immediately it will play the next you go through a lateral squat walk getting a nice squatted click once again so i guess this is the last video i'm not sure then click one one more time oh we have another video okay all right now let's click on this one so you see no more videos in the list all right perfect so come back to the earlier video or the earlier one i'm going to have you go through go back to the next one so it means our program is working perfectly that's wonderful right yes okay so next we'll work on uh first we'll work on this snack bar we'll style it a little bit and then we'll also work on the volume icon over here all right okay well the first thing we want to do we want to style this snack bur okay because we can do much better job so first we want to set the position we do snack position okay and snack position the bottom so we want it to show up from the bottom and then we'll also use a custom icon color right so icon icons dot with two face and then we'll also do say font size uh sorry we do size say size say 30 and it also takes color so we do colors.white okay all right perfect so that's one of the thing and then what else you can do we can also set the background color okay so for background color we would use our color palette so which is f color and gradient second but of course you can use any custom color over here as you want it's up to you all right okay uh so let's go ahead and save it and see the result okay done so these are the things that we have now but definitely we need to color the text okay so what you could do now we can color the text so color text colors dot white so actually these properties color text background icon snack position these are all coming from here okay so you can play around with the properties as you want okay and later on what you could do you can also do the custom message text which takes a widget all right if you really don't understand you can hover over like this and you can come to the properties like for example message text for title text you can also do the same anyway so now it takes a widget so we are passing text widget so how we will move the message to this section over here all right yeah but i guess we still need to pass an empty message text otherwise it will show an error okay anyway okay now this is a pretty simple text so we can style it so we would use text style to do that and we do font size say 20 and then we do color over here so colors would use white for now okay all right now let's save it how to reload and uh now let's click on this one perfect so it looks much better now okay now this color actually what do you do we'll just copy paste this one uh this section and put in our earlier message section okay earlier message section is this one okay all we need to do we just need to change this one so over here we'll say no more earlier videos no videos ahead okay no videos ahead yeah like this okay i'll save it so looks like i have an issue with hot reload uh the issue could be let's see if i'm doing something wrong over here it looks like i'm not doing anything wrong okay let's see oh yeah this one sorry okay so now let's save it okay now what you could do we can click one on one by one you can go ahead go ahead this is our first video now this is the squat walk yeah keep your chest up and your shoulders back all right okay so that's it uh well but now here actually you can also say you have finished watching all the videos congrats okay so you have finished all the vid all the you finished watching all the videos all the videos congrats okay i think this is much better let's save it now we'll directly click on the last one our last video is this one okay it's preparing and now let's see this one over here so beautiful all right so it's working okay the next thing we want to do we want to put a volume button over here so that the user can play around or mute the volume okay so to do that we can use our uh row the same row and over here we want to put a child okay yeah so this over here we can put a child and we'll wrap the child around a container okay or inkwell this widget i think this is better okay and over here we need to set up some of the properties so it takes child okay and i will use padding for this okay and padding we want 12 and vertical we want eight all right yeah okay now padding takes a child so we'll supply child over here and here we'll have a container okay and within container we'll have uh this box decoration okay all right so we'll do decoration box decoration all right and then we'll use the shape so volume shape should be circular right so we'll use the shape property over here so do box shape dot circle i think that's it and then we'll do box shadow okay now for box shadow we'll just use one box shadow and let's do offset so there isn't much shadow though because the opposite is zero and then we do blur radius okay so what would be our blur radius say 4.0 and we can do a color over here okay box shader text color and we do color dot from r g a b so different kind of color together zero zero and the earlier one zero all right you can use any color it's up to you it doesn't matter though all right now let's save it and see the result and it looks like we have an issue over here okay let's save it and see the result okay i also need to use an icon right because this is a container so here i should have a child so where's your child okay so for child we'll pass an icon over here okay all right and for now say icon is icons.volume up that's what we'll use volume up this one okay and for now we'll also use color colors dot white okay that's what we want okay so now let's save it and here here we go so it has a bit of radius blur radius as you can see from here but of course if you tap on this nothing happens because there is no tap event yet okay so now this is with an ink well so what we did here just we created within a padding a container and container has a box decoration which is circle we used a circle to give it this uh bit blur shadow as you can see around it so that's why we put it within a container in a circle of box decoration and then we have this icon all right okay so but of course uh inkwell so which is uh this one in call also has a tapping properly okay so on tap property we'll use okay now here we need to play around with volume values okay and how can we do that well do remember so we have a global con container so we can use that that global controller sorry we have a global controller and we can use that one all right so we'll use a variable uh declare a variable and we'll call it no mute all right and then we'll hop onto our tap into our controller global controller remember if the controller exists then we'll get a value from it okay and if the value exists then we'll get volume from it so these are the properties our video controller plugin has so you can just go ahead and play with that and if volume exists okay then we'll use the volume if the volume doesn't exist then we'll use zero okay so volume could be turned off when the volume turned off the volume is the value is zero if you don't turn it off it's not zero okay so what's happening here first we check if the controller exists remember controller could be disposed so you check it first if it exists whether it is a current value or not or it just paused things like that and then if it has value then you check the volume property of it okay and if the volume exists which means the volume is say for example not zero or zero okay so in this case if it is zero then we'll use zero okay if the volume has value greater than zero then we'll use that value so it depends on this one okay so here we want to create a condition okay so based on this condition it will return either true or false because this section is only either true or false okay yeah so that's what we are doing here perfect so now we'll use this value no mute uh within our uh ontap function okay so we'll check so what happens if it returns here true which means volume has value that means it is playing loudly right yeah so if no mute is a true which means it has volume so we can change the volume to set volume okay this property will set it to zero okay yes volume i think we need to add a null checker well else what do we do we'll get it one at one more time and then we'll check and then we do set volume equal one okay one second what's happening here so if volume has value so this condition becomes true it means that video is playing loudly in this case when you tap on this button it will just shut it down okay in opposite case the tools reset the volume to one all right so that's what is happening here and right after this what you could do we can gently create another method which should set state all right so this will just simply make sure that re-render happens okay of course you can put all of this inside sets set state function it doesn't matter how you do that okay now let's go ahead um let's restart our app from the beginning let's play it this is the squat walk now you see the volume has gone okay now if your butt is up the volume is gone all right but now what do you need to do we also need to change the icon based on this volume okay uh currently we are not changing the icon so we can change the icon so where do we change the icon we can change the icon let's see over here okay so we can change the icon based on this value is no mute value okay so based on that we can use it so if no mute is it's true if it's no true if it's true which means it's playing loudly then we use uh volume let's see if it's true which means it's playing loudly right then this is the condition otherwise if it's false then we'll use volume off this one okay now let's save it okay perfect you see it was mute right so let's go ahead and play second one i'm gonna have you go through a lateral squat walk so you see it's gone no the foot on the ground big steps gone close the gate big step so everything is working so far perfectly as we want it next we'll work on the slider okay yeah let's go ahead and do it all right here we are so now we are going to implement our slider okay well before implementing slider uh we can take care of some of the stuff that we did before like for example say this height is too big so we can change it to say 40 all right yeah and well now it doesn't look that great but what you could do we can add a margin okay yeah so we do constant insets and with the bottom margin say 10 pixels okay yeah or for pixels okay perfect and now we want to realize our slider on the top of this one okay well to do that actually i have over here declared some variables and some math computation so these are the parts like for example so i'm getting the duration okay so it's the duration of the video and then i'm also getting the position like in where right now we are playing uh i mean in terms of time where we are right now okay because your video could be one minute long or long hours anyway with this you can get the current position where it's playing now okay and because do remember that earlier we added this in our listeners so listeners will always be able to listen the current position and save it in this variable okay and then uh i have the remaining time like as a video is playing so total duration minus this one okay it's the current position where it's in in terms of time so we we get the minus and we do minus and then we get the remaining part of course uh between zero and whatever the number it is maximum should be whatever the number comes here but not less than zero and then we use this one okay to get the minute part and this one is forget the second part well now this one you could understand it like this so we have a special operator so this is uh this operator right and how how it works so it's more like say for example if you have 22 and then you want to divide it by say 7 and what do you expect okay so in general you would expect like for example with this if you divide it like this you'd expect something like more than three right say more than three one point blah blah blah like this three point one blah blah blah it goes like this but once you have this tilde it tells you just take the integer part okay not the remaining part or not anything fraction so once you do this one you will get just integer like in our case we'll get three so whatever it is we are getting from here the time okay so because we need the minute minute can't be fraction right so that's why we want to get the integer part all right yeah and of course uh uh well now another thing that you need to know here we are getting them in seconds right yeah we are getting them all in seconds okay but once we divide it by 60 then we transfer it to minute but because we are dividing by 60 so there could be an fractional part so because of this operator we can get rid of that fractional part at the same time the same value we we do this module operator so that gets the remaining part right we already know that like 22 by 7 if you do that then your answer could be in general say your answer is 3.1 blah blah blah right but once you do this one so you'll just get the remaining part okay so remaining part is in our case one right yeah so that's the minute and second thing all right so that's what i've done and we also have used this function convert to which is over here and what it does is that basically whatever the value is here and it checks if it's less than 10 and we put a 0 in front of it otherwise we use the value for example as you can see like for first one minute so uh well it's the total length is this one one minute 51 seconds long right but over here we just get the first value remember with this we don't take after fraction so we get one but now just showing here one is a bit odd so that's why we convert it to like over here uh zero one how to do that we just check if the past value over here is uh uh less than zero less than ten or not if it's less than ten we just put zero with the value otherwise we use the value whatever is given all right so that's what it does this function and at the same time uh i have changed a bit of the not really change code i have over here so if we come down to our controller update we here i have a variable which is progress i need to we need to use it later so we declared it and at the same time i believe from here i've added this this part of this code okay yeah so a bit of change uh i'll give you the full view of this so we check the duration and if it's null then we get the duration from our controller for a specific video controller and at the same time we check it again double check if there is a duration or not okay otherwise we return because that video cannot be initialized anyway then we also get the position now the position is operator sorry this value because once you play a video this position always changing so that's why we need to use a weight so we wait when we can then we get the value and we save it okay so that's what we are doing and over here we added if a video is playing then we want to know the progress but in terms of zero to 100 okay so now as you see here earlier i said that we declared this progress variable over here at the top okay now what we are doing uh over here uh we are getting the position and at the same time we are dividing it by duration okay but of course we convert all of them in milliseconds and then to double okay so while we are doing that for example if you say your video is uh say 60 seconds long okay now the position currently you are somewhere say 30 okay so once we do this thing like 30 by 60 so we'll get answer 0.5 right so of course as it progresses this value this value would get higher and higher because the video as progresses this value is getting bigger and bigger okay so at the end once the video is almost finished this value would be close to one i think you get the idea so for example if we do 45 maybe here the value is uh close to one say for example seven or seven five like that okay so now the progress would always range between uh zero to zero point nine at that close or nine nine like that okay or it could be even one okay so this is the range for progress and we do that because we want to use it later when we slide things okay this is the purpose otherwise we don't really need this thing okay because of sliding purpose whatever the time we have the position and the duration uh based on that one we have a range from 0 to 1 like that or from 0 to 0.99 so it gets us better value so that we can use it later okay so these are the changes we have done all right and now let's go back to our slider section uh let's see so at the same time uh over here let's see we don't need this now we can close it like this okay and i've also added this section which you don't have yet i have i have added it already i'll explain it later what's happening okay because with this section actually i can explain now but this one is actually showing the time over here as you can see okay so let me open it up so once again these are the values that we have at the top okay like the values over here means and sex which i already explained to you okay so we decided to display it at the end over here now it looks much better like we have total five items and everything is centered okay so for example as the video plays do your right so this time so this this value decreases okay so from the highest value to the lowest value okay so that's what's happening using this it's pretty simple straightforward now i'll close it and the last part is the slider section okay i already did the slider section so i'll copy paste because it's a lot of code and this video has been very long by this time so i don't want to make it so much longer all right so this is the slider theme over here okay let me open it up so it's pretty long okay now there's also the child okay that's within one code um of course we can just go with slider not slider's name okay now if you have sliders theme it gets you better control for example let me save the code okay now here we are let's see okay i think we don't need this one here actually i'll just copy paste it sorry and we'll put it here because in a column i want the slider to be at the top okay all right sorry about that now let's save it the arrow should be gone perfect okay now it's looking much better as you see uh so our slider is already there and this slider does a lot of thing i'll go through them very quickly so this is the active track color red color like this section okay this color and inactive track color is over here this red color and the track shape well this is not that important you can skip that this is the shape of the track and the track height so it's the height for example you can change it to say five it'll look much thicker but it looks ugly so do two and the thumb shape so what is this thumb shape this thumb shape is for example when you slide like this you see something showed up at the top so that's that top part is this uh thumb shape okay and thumb collar as you can see that uh we have this uh thumb collar red and red accent right and overlay color they're very different um let me let me stop it so parameters that you can play around okay it's pretty simple but there are a lot of them that you need to set up for a beautiful slider i really worked a long time on this because there's so many parameters and you don't know how to work with them so a lot of them i i actually found by myself anyway uh later on so because if you want to show this value on the top this value indicator over here this is pretty important okay this value indicator is showing the value at the top all right and text color is white as you can see all right anyway we'll stop it and now of course you can just simply use slider instead of using slider theme together because right now slider theme is the parent and slider is this a child and now we are using that because we want to have a beautiful slider without this slider's theme uh you can't really style it so much okay for example we can hop over to anywhere we want and see the time like that okay thing and tightening your bot down okay shift that perfect so that's what's happening because of this slider theme anyway so now within slider itself there are a lot of parameters that you need to set up like as i said earlier that we have this progress so progress is from zero to one so we divide the slider the whole slider from zero to one or in our case we are magnifying it by multiplying by 100 now it becomes from 0 to 100 okay and you also specifically mention it and now because we are showing this value at the top that's why you also need the division okay so they somehow work together if you turn it off it wouldn't work okay now let's save the code and uh try to work with this you see the value is gone right click so you need this in general this should be the same as this one that's my understanding and this is the time the position where the slider is right now and as you see okay and as you let me save the code okay so you can focus so this label is this one the one showing the text at the top okay yeah focus on and the time is there and we get the position for example say if you if you don't have this one uh just save it and let's try to view the time i can you know it's too long right so it has you can see it has seconds milliseconds microseconds but and there's a dot okay at the top there is a dot so based on dot we split it and we get the first section okay first section is our zero zero zero and five three i can you can focus on one side first you can target the anyway and then we have this on change so whenever you click somewhere sorry let me save the code once again to that weight so whenever you click somewhere uh we get a value and uh within using that value we also what do we do because remember over here this value is from now 0 to 100 right because we multiplied it by 100 but now here we once again we change it to zero to one okay yeah uh so we get the like more perfect value okay and uh later on we also have like once we start dragging okay and then you see if you drag part or if you drag right there oh why don't you just stop that's because of this one and once the video dragging is end this is what happens here okay uh so we get the duration controller duration total duration and from there we do a bit of math okay and then we set it to the value where we want to go okay like for example once again over here the value remember here we change it uh sorry this value okay from 0 to 100 so once again uh we we make it like in terms of decimal we calculate it okay and then we multiply it with this new value of duration which is counted in milliseconds and turn it to integer and then we go to that certain part where we click right like yes uh using this seek to function okay seek to function always takes in general it should take milliseconds all right and then you play it okay yeah so that's what's happening but anyway a lot of the math part might be confusing i can explain more but the video would be too long so which i don't want anyway so that's what right now with this our video player is a pretty much complete video player go through a little later this one we are pretty happy with this video player right now a lot of you might be following it from the from this tutorial but this is a previous section now i'll connect our tutorial with the previous section okay now let's go to our main file over here currently it's video info what i do i'll do home page okay our home page yeah home page so we'll connect with home page okay yeah now we'll restart our app okay now we click on this okay now click on this this is the squat walk okay keep it i'm gonna have you go through a lateral squat everything is working as we expect squatted position yeah now of course we want to go back to the home page from here so we need to come to our video info file and over here let's collapse it video info file over here we have this section and do remember that over here we have this child's column section and over here i believe that this is the part that's uh that will take us to previous page so over here what we can do we can just do get dot back this is once again get x tutorial i mean we are using get x for check check my get x tutorial if you want to know more uh in the video description so once we do this it will take us to previous uh page okay all right so let's save it okay now let's click on this yeah it took us to previous place now let's go ahead it's gone and let's play it now let's click on this video is gone okay it's not playing because we we came back to our homepage just because in video uh video info over here at the top we have this dispose method when you leave the page these are all being called so all the culture controllers are being disposed okay so now we are done with this page and we are done with this app in this section in next tutorial we'll see how to connect this app in the back end and we'll upload these videos from the back end okay and play them and we'll do that with uh get x once again okay and using our rest api so if you like the video don't forget to subscribe and share with your friends thank you so much

Channel: dbestech

Views: 12,342

Keywords: flutter video player, flutter complete video player, flutter video player with controls, flutter video player app, flutter video player in listview, flutter video player fullscreen, flutter app development, flutter app development tutorial, flutter app ui, flutter 2021, flutter 2021 tutorial, flutter app development full course, flutter app for beginners, flutter project, flutter tutorial, learn flutter from scratch, flutter video streaming app, flutter plugin, dart, flutter

Id: OXQ5ee6p9ZA

Length: 137min 43sec (8263 seconds)

Published: Mon Sep 06 2021