Flutter YouTube Video Application - Live Coding with Flutter

Key Takeaways

hey guys welcome to the stream and if you're on YouTube welcome to the YouTube video and I wait for a few you guys get in here before I really start with this hey Jeff it how you doing hopefully I said that correctly let's see a DNA now you down I'm just going to wait for a few more to get in here and then we'll be off to the races [Music] so basically well I'll get into this in a moment I know wait for a few more minutes just for people coming in you I had a bit of an ordeal getting this working so hopefully we won't run into any problems I don't think we will but on the off chance that we do well I'll get to that if it happens alright it looks like we've got plenty of people in here now got a few familiar faces and some new people in here as well how you guys doing all right so let me show you guys what we're going to be looking at today I've already gone ahead and done a few of the preliminary things but let me show you these particular dependencies so the main one that we're gonna be looking at is this one the flutter player are a YouTube player flutter library this guy he's got two libraries one of them is just called YouTube player and then the other one is called YouTube player flutter YouTube player apparently only works on Android and so because I know that a lot of you guys also work on iOS I figured that we'd go with this one that also is supposed to work on both Android and iOS and of course because we need to interface with the YouTube API we're going to use this library the YouTube API library and mainly we're doing this so that we don't actually have to build all of that logic ourselves so we just have to put in our API key which I've already put in but you i've got hidden from you guys and then and we can use in this particular library to go and fetch data from the YouTube API looks like we still got some people filtering filtering in excuse me alright so got these two libraries these will be primary libraries for this project what I'm thinking of doing is building some kind of just basic YouTube app like I want to be able to fetch YouTube videos based on a query so you put in a text box go get a list of YouTube videos click on a tile pops up the video player you can play the video and then if you want to you can go into full screen as well so something like that I guess we could add comments and things like that but really not gonna worry about that right now because I think this should be enough for this particular video all right so already I've got a few things going on here just basic app here but I've got the imports right here and I've also got a separate file for my API key just to keep it out of you if you guys want to see the actual of the dependencies these are the current versions that I'm using for the player and for the API and yes so I guess we'll get started here so I guess first we want to make sure all of this works so all right we kind of want to see how it works because I've never really used these libraries before so what I'm going to do here is turn this into a stateless widget or a stateful widget rather and going to essentially just erect a YouTube video player I think that's what is called and then just play a video so I'll grab one of my videos and I'll do it that way all right so let's see I guess basically we just want to put a youtube the auto-completion is not working that's a pain in the butt there is this bug I'm not sure if it's still around with the current version or not that the ER what's it called the analyzer doesn't actually pick up the auto completions of third-party libraries may have been fixed by this version of flutter which is one point six point three but the version before at one point six point two and versions before that had the broken issue all right so YouTube player let's see so we need to put in the video ID it looks like and the context so context is just the build context and I'm going to get a video ID from one of my videos let me do that real quick let's see I'll just grab one of my elixir videos you this should work out I mean I I really don't know so let's build this thing see what it looks like and I'll throw up the emulator you you you is it Philly and thanks for being up late in Sweden Fred it's kind of cool that you're building a big flutter up got a few other names that I can't pronounce unfortunately sorry guys hey everyone all right so let's wait for this to build to take a few seconds because it's never built before so while this is Billy I'm just gonna let you guys know that the stream could potentially crack crass in the crash rather and if that happens well if the stream just stops suddenly wait a few minutes and I'll get it back up so I had an issue where Windows was giving me a blue screen of death as a result of hypervisor and basically I think I fixed it but I had to like go all the way up to the insider release of Windows to get this to work all right let's see so it looks like it's doing something no there we go so we've got my video thumbnail let's see if I can play it all right so we've got controls on there and there's my beautiful voice let me give you guys some desktop audio so you can hear it too so yes the video is playing even though it's buffering so I guess a little laggy on this device currently probably because I'm streaming too anyway I'll stop that now so this works perfect this is exactly what I thought it would be looks like we've got built-in controls so we can seek to further into the video seems like that's a little broken though but it does seek further into the video which is fine there's this full screen which I'm kind of worried about pushing but might as well do it alright so this actually puts us in a portrait mode and I think I'd flip to the wrong way but whatever if it still plays in portrait mode let me check and see now there's some kind of exception that was thrown there's really nothing I can do about that and it looks like it does in fact work but we're not getting any video all right so we'll have to worry about that as we're building our app I guess let me flip it back turn this off as much as I like hearing my own voice I don't really want to hear right now all right and I'll mute the desktop audio on a minute you're thinking I should embed the stream into the into the Android app yeah that would be interesting that I'm not really sure how to actually get the streaming video or whether or not that would actually work on this particular plugin Hector that is it Dima Dima Frances thank you as well all right um hopefully I didn't put your name by the way all right so got this working we know it works that's good so let's start to build some of this logic then I'm going to just close out the emulator for now so because we're really not going to worry about it and yes so essentially what I'm thinking is that rather than worry about our relying on the YouTube players full screen we could do it ourselves by essentially rotating the screen to a portrait view and then making the screen larger and then we could also create our own controls as well and I guess I'll show you what I'm talking about when we actually get there so let's first build a body here so we have a center let's replace this with a stack actually so that we can have a bunch of different components in here and then I will have the list of widgets at the top we'll have a text form field because I want to be able to query get any video I want and in this we're gonna have to get a controller so let's create that so text editing controller I'll just call this text controller because we're going to also have the YouTube player controller off of this one video controller and then let's set up in its state so that we can initialize these I think that we only need to initialize the text editing controller some text like this all right so text field here we could put in our controller all right and then we want on field submitted and we'll have our string which will just call s and then in here we're going to call a function that will create called I guess call API it's a call to the YouTube API we'll pass in our s and actually let's call this Q because it'll be the query then let's grab our text controller and just call whether I'm getting errors and just call clear to clear out the box okay so that's pretty straightforward let's now build this logic here but actually before that let me finish with this layout so we'll have a flexible here and then inside of it we'll have a ListView builder and this will build out the tiles for all of our YouTube videos and I guess I'll just put a empty item builder in here for now so if I build the context and then the index I just have this return null or rather let's just make it concerning container for now and yeah so now let's work on this call API function so I'm going to put this up here would be a future of null type we'll take in our string query and we're also going to need let's see I have a list of it gets you to API so YouTube API items I'll call this our YouTube results and we can initialize this in here and so this this actually comes from the YouTube API library this is the specific results they have a bunch of metadata attached to them and they'll have all the metadata that we need like the video ID and the URL for the thumbnails and stuff like that so while we're at it we're going to need a YouTube API object so YouTube API which we'll just call YouTube API and we want to set that up in here as well and I'm gonna put in my API key which as I mentioned before is in another file here called API key oh.just API key like this I think I don't know let's see okay so the key just goes in there it doesn't it's not a named item we put in our API key we can also specify the type that we want back we only want videos to come back so I'm assuming we can just say type video and it seems that we can also specify the max results by default that's ten let's make it like 30 so we want 30 videos to come back from calling to the API all right so inside of this function check to see that our YouTube results are empty and actually is not empty rather I want to see if it has items in it and if it does we can clear it and then if it doesn't we'll go ahead and call to our YouTube API and actually they want you to Bree solves equals and then we call to the YouTube API and there should be a search a search function pass in our query and that should give us our list of YouTube API objects then we can unwrap them and what I'll do is I'll call set stayed in here and I'll just have a for loop normally I'd use like a mapping function but I'm feeling like using some object-oriented programming for this particular application so we'll go with a four loop here and then we'll build out a item which will take all this stuff and then we can put that in another list so actually while we're doing this let's let's go ahead and then create that class so the video item will be another widget let's make this stateless and we'll pass in a YouTube API item so we'll just call this API and then we'll pass in a well that that'll be it so we're passing these two for now of course add this to the constructor and then the basic idea behind this will just be a container with a ListView inside of it essentially so let's create our build function real quick let's wrap this in it card and then we'll wrap that in a list I'll like that and then our list I will have say leading will be the thumbnail so image that network and we get our thumbnail from our API by calling API thumbnail then we want to get the high quality thumbnail so you need to pass in the key hi like that and I think we also need to get passing the key URL so that we can get the URL the title let's make it just a text item call API title like that and then we can have a subtitle I'm gonna call API channel channel title like this title and yeah that'll do it so now in here we can go ahead and create another list so list of video item type let's just call these video item of course we want to initialize this down here and we'll go ahead and populate our list and in fact this is not what we wanted to clear we wanted to clear this right so see so essentially we say video item item new item and we pass in our API which will be our result and then yep so passing those two things and then we want to just call to our video item list and add this in there that should work for us so now inside of Bennett state we can actually even call this function hmm yeah so call API just press in flutter like that so that it will initialize on flutter query and then here let's add an a wait like that and then for the for the listview builder we can go and essentially just called to our list and then pass in the index so video items index like this so this should display all of our items and let's also put in the item count this will just be video item blank like that and that should do it for this particular part of this app so let's go ahead and do it and see what it looks like you um all right so Aiko says why I feature a null and not future void they do act like the same thing they're not technically the same thing you are returning a future from a function that's asynchronous even if you're not returning anything so you can just write future if you want or you can write few journal or future void can you explain why because we need to update the we need to update the state I mean we could call it inside of the inside of the call down here instead but I don't know it just feels a little bit easier this way I guess this is a little bit better to do it here because calling set stayed inside of the init state function is not really advised let me see this seems to not be showing anything so let's see what we've got here looks like we've got some kind of error here let me make this bigger so you guys can see we did in fact get some videos it looks like I don't in South their IDs but that's fine I guess it's a part of the library here that we do not know the size of these items I guess so I guess we want to add padding then let's make this 8.0 not sure if that'll fix it or not let's reload it all right so we're still getting an error oh yes I know what's going on okay I didn't mean to embed all this directly in the stack the problem is they're all overlapping with one another I want to put this inside of a container before I put it into the stack and not a container but actually call them so container like this and then a column in there and then I'll grab all this stuff here and actually we don't even need the stack but whatever put it in like that this should resolve the problem let's clear the console where you start the app there we go all righty so we've got our list of YouTube videos it seems to be pretty decent of course we can't click on them we can't do anything with them yet but it looks like they're coming in and to address that minor issue before I'm going to put this set state down here so just set state like this and so we'll call set state after we call to the call API and then that should make this a little bit nicer so let's let's check to see if we can query something so I don't know let's put in Dart cuz why not and it looks like we do get videos about throwing darts so alright so that's one piece of this for sure let's add some more functionality here so I want to be able to get more items on the same from the same concept now let's add a bottom navigation bar and rather a bottom at bar and in this will have a button bar and essentially I just want an arrow to go back and an arrow to go forward so let's see children in here we probably want to Center this thing so axes yes it's just a line that not main access alignments main axis alignment Center and then we'll make some icon so icon button let's make two of these and see as a child now it's not child it's icon so we need arrows so icons arrow we have an arrow bag here and then for this one I'm sure we have an arrow forward arrow forward like that and of course these both need to on pressed for now let's make them know was I wouldn't give me an area commas all right so that looks decent maybe we could give him some color so let's give this one some color make it red [Music] apparently it's not updating I guess cuz it's uh it's not yeah if I if I give it a function it should turn red because then I should be able to push it yeah okay and then for this run it'll be white I think yeah okay so make this one I don't know blue gray or something all right so we've got individual buttons and we're gonna be wanting to be able to go backwards and forwards through our data and actually what I'm going to do rather than create separate functions I'm going to put the functionality inside of the call API function here this is kind of a bad practice normally you'd probably want to build your own function for this but why not so I'm going to put a a optional parameter called next page which will be a boolean type normally what I would do is build like an enum type for this but you know yeah I'm not gonna go that far because we still got a lot to do here and I'm not confident that I'll be able to cover it all in the time that I want so what we'll do is add a bit of logic so if the next page is equal to null and you should probably never do this like deliberately pass null into a function it's a pretty bad practice so if it's null then we're just searching for the query if it's if it's true then we want to say let's see YouTube results equals oh wait YouTube API and there should be next page like that and then if it's false you just say else and we could just grab this and call previous page instead all right so this is pretty disgusting code but honestly it should suffice for what we we want so got our current videos alright I need to of course connect these so we'll call a wait on these two functions so our Wade's call API and pass an async like this I pass in an empty string here and then we're going to pass in the well this one's back so back will be false and this is next cage like that and then for a forward will do it like this true make this a sink and we also need to call such state where is it giving me an extra rent to see whatever if this works looks like it kind of does yeah looks like it's going for these videos all look the same and that's the thing and backwards yeah it's changing videos so let's go to something a little bit more varied here so flutter content yeah it's it's definitely changing the videos at least exchanging some of them not sure yeah seems like the it's not really our logic so much is it's the API that's not particularly doing its job properly or in the library rather well at least we have the feature in here yeah a cursory billions can be in three states null false and true you should never use a null like that it's really a bad practice if you're going to do something like that build up Billy Inu manned and put that in there have it be like enum query for like the first call API and then he knew next Beijing in previous page something like that don't use a boolean and using all it's really really bad to do that we could make an infinity list but the problem with this API is that you can only fetch 50 items at a time so we'd have to make it so that when you get down to the bottom it then calls to the next page yeah I don't really want to put that much effort into it something that maybe we could look at later in another video though but yeah and I think I've already touched on it before I want to get the video working in here though so let's not dwell too much on the actual list part of this application but yeah it's a good suggestion if we had more time I'd say let's go for it but we really don't all right so we want to be able to tap on these items and have it open up a pop-up window and now so there are two ways that we could go about doing this we could we can make a pop-up window that out of a dialog box an alert dialog and that seems like an all right idea the problem with that though the problem that I have with that is that the alert dialog doesn't really seem like it should be used for something like that it's probably better to actually use a a full route instead like an actual page an actual widget so I think that's what I'm going to do also we want to be able to obviously move this to our pop-up window so what I'm going to do here is I'm actually going to you because I'm feeling like I want to do some IOP type stuff I'm gonna write a mix in here believe it or not so let's uh and I'm actually I'm thinking I'm going to write a bunch of mix-ins for this app so first mix in here will be for essentially building the pop-up so we'll call this lists pop up tap or something so this will have a function called on tap inside of it which when we add to our list items will be material by the way we'll be able to the API item and then open up the video player so what we want to do is this needs to take in a type T that extends the stateful widget type because we want to attach this to the state object rather than the actual stateful widget we need to write it like that so and this should be extends so this is connected to a state object that extends a stateful widget essentially and then we can pass in the page that we're attaching this mixin to and then inside of it I'm just going to put the on tap function so this is just gonna and let's go grab the YouTube API that's not it and we're also going to need his services all right so on tap will take in a YouTube API item just call it the API item like this and then let's pass in the build context as well like that so now I go back to main import this and I brought in services for another reason I'll show you guys that in a moment so bringing our mix in and then we can attach it to we want to attach it huh not to the video item we want to attach it to our touch it or my homepage essentially so this this here so we can say with what did we call it this pop up tap my lips did not mean to do that and we need to pass in the my home page like that and now let's create that missing override which should be our on tap function and there it is so now we can create the logic for this function and then we can pass it down to our list items you sorry my cat just threw up on the floor well that's kind of disgusting but yeah it's not really much I can do about it let's see I'm just going to hang on guys let me spray this real quick then deal with it this is absolutely the worst time for a cat to just like vomit on the floor you [Music] you this is disgusting I will whatever [Music] second I got this spray on edge should be alright should not reek here in a moment all right so no and great now people are texting me all right whatever all right so we've got our on tap function and we want to create the logic for it and then we want to pass it down so on tap is just going to take in the API in the context we can call set state this is one of the main advantages of creating the mixin like this by calling set state up here even though we're calling it inside of a stateless widget it'll still rebuild properly so we can say we want to get the video ID so let's create a I'm gonna create a global variable up here our video ideas so give your ID like that and then down here what we'll do is just set that video ID so video ID equals KPI item dots and there should be a video ID in here I guess it's just ID all right and then we'll call navigator of context push and we want to push in a route they were gonna create so for now it's just comment this out because we don't actually have a route built yet and the route will then take in the video ID but while we're doing this we also need to then pass this this on tap function into here so we can pass it in via the class so let's pop up tap whatever you just call this the I guess let's pop a tab like that and then we can add it to our constructor and then down here and in our list style we can have a call to our on tap function like this then we can just call a list pop up tab dot on tab like this and then we just need to pass in our API item which is just our API and then the context and that will call the function up here which will then work properly so then let's where we're passing this in there should be an error right now or there's not an error but we do need to specify here what this item is was it list pop-up item just by saying this so we're essentially just passing in this object so that it work and that should do it for us now when we click it it should work and what I'm going to do here just to test it let's just print out the video ID let's see if that works so I click on one of these you get an error so let's see on tap what's called on null because this is not set up properly okay now let me reset this that should fix it because they weren't being passed through you all right so it actually did print it out I don't know why it didn't it should have loaded the list in the beginning let's see all right so we need to fix that apparently the in it is not actually loading the list properly likely because we just passed in this object so we need to remedy that fact let me see you and this seems alright the way that we implemented it you you know what it could be it could be that it's not building before so it's not building the object before the call to the API is happening excuse me so what we can actually do to fix this is wrap the call in in its State inside of another function which is a little bit of a pain or whatever so future let's just call in it API like this and the main reason why we want to do this is so that we can call a wait call API on flutter and make sure to spell flutter properly and then now because you can't call you can't make this asynchronous so instead you can call it from inside of the unit stay like this through another function so now it should properly wait let's see fix it you know it also might help is going back and clawing set stayed here as much as I really don't want to do this okay so let's reset it yep and that works all right so we don't want to call said state too many times and I can go ahead and let's remove this let's put this in here instead and then when we remove these calls to set state and this one as well so I guess we're gonna have to do it inside of the function which I don't particularly like doing but you know it it's not a huge deal usually what I would do in this case is probably refactor everything into a smaller or another widget rather and then add the pop-up tab that way when we call to init States it's already been built so yeah that would resolve the problem the other way we could do it is just to pass the on tap function in rather than the object but I'm not gonna go into that right now all right are there any questions as far we've got some deleted messages from a GU I'm gonna try and say your name sorry call you Eagle Eagle Eagle II maybe that's a big Louie form and akos has called set state after the for-loop yeah we could call it after the for loop or we could just wrap the for loop in it it's basically the same thing I guess wrapping the for loop in it yeah no it's it's the same thing because basically when you're wrapping it in the for loop it's not being called for every iteration that's only being called when the for loop completes so it's basically same as what I'm doing right here so and I can even show you if we just is wait it'll pop up like that then click on one of these it should give us our printout here so you can see here at the bottom rather than printing out video ID first it prints out the ID itself alright so that's good enough for now let's go into creating our pop-up window along with the proverb window we want to create another mixer so the main reason why I wanted to create mix-ins was to make it so that we could force the app to be in portrait mode or in landscape mode so this this will be similar to this and that it extends a stateful widget this will when we implemented on a stateful widget it will try to force that state of a widget to be in portrait mode and then when we dispose that stay for widget it'll go back to normal so it'll allow us to sort of temporarily change these settings and we can also do the same by creating a landscape mode version like this for when we when we actually create the fullscreen window for the for the actual video so to set these up we need to create some helper functions here so let's create the first one just call this landscape mode only and we just want to call system da as it's just in Chrome does set preferred orientation and then we can put in the orientations here so device orientation for landscape its rights and left and then let's copy this for the landscape landscape then this one let's call this portrait and for this one we want up and down and then we just want a function that will enable the rotation so we can just call this enable rotation and we'll just put all these options in here so now what we can do is override build and dispose for both of these so build and it's actually important that we don't call super build we want to pass back null but before we build it we'll put in our portrait mode only for this one and then for dispose we'll put in we can call super disposed in dispose we'll put in enable rotation like that and then for the other one we just want to change the build part to enable the landscape mode like that all right so that that looks good to me and we can actually use one of these so if I want to I can force this state for widget to be in portrait mode so just put my homepage in there and now that's automatically in there so every time the build function is called for this widget it calls to the mix-ins build function which then calls the portrait mode only function for us and then when this widget goes out of view it gets disposed which gives us back our rotation so it's a fairly simple idea honestly I think it's very underused and what I mean by very underused are mix-ins mix-ins can be really powerful and yeah so you can see why they're pretty useful I'm sorry for constantly asking for Haskell but do you have plans Dinks of the Haskell yeah I do have plans of doing stuff with Haskell II eventually and yeah John I feel a little bit icky about null as well in this case it's not a big deal but yes I would rather not have null in my language luckily dart is bringing in all safety not sure how far they are on implementing that but last I checked it was almost fully implemented all right so now let's create our popup window so could another file here so pop up that dart we're gonna want material we're going to need the YouTube player let's bring in the mix-ins seems my analyzer is slowing down hopefully it's not too bad mix-ins and then yeah that should be fine for now and then we can create a class here which we'll call the pop-up video player route extend this with model Ralph's like that and then what we can do with this is make it so that we can override all this stuff and basically create a our own route basically so we're creating our own routes and our own where does this edge their own pop-up window so we can choose a barrier color here let's make this something nice and actually before we do that let's add some let's add some variables here so we want a child widget and this might give us an error you okay now it's just giving us an error because it needs to be initialized and then we want doubles for top left right and down these will be the margin doubles so we can control how big our pop-up window is and so let's create that constructor and yeah let's make this all named constructors it's not top it's that left this time right is not up and now this should be up not top make this down okay and also while we're at it you can add some logic to initialize these by default so we can just say if top equals and I don't know why I keep writing cop if top equals null then we'll just say up equals 20 so we'll have 20 pixels by default and we'll do this for all of these so that and these should actually be twenty point zero one zero because they're doubles not that it really matters dirt should automatically add the point zero but it's usually a good practice to make sure to write your doubles properly all right so now this will automatically initialize these for us and it'll build our a nice window then let's create the barrier color so this will be the border color whatever's on the outside of the window we can make it like transparent if we wanted to but I'm not going to go into that because it gets kind of complicated if you really want to make like a translucent window so let's make this like blue grey and we'll set we'll have like it with opacity here so it'll be slightly translucent but it won't show the background processes so we won't show our list and actually speaking of the list I still have the emulator opened down I so let me close that cuz it's not gonna matter right now now we have this barrier dismissible this you can see here it actually says we can dismiss the route by tapping the barrier I don't want that I want to actually create a button to dismisses so we'll put that as false and we have the barrier label this is just a semantic label so we can just say video papa the page will come back to maintain state you want to set this if you want to maintain this maintain the state behind this window I think for now we'll have it be false like that and then of course we have opaque it's pretty self-explanatory you know what I'm gonna make this fall so I guess we could have it be somewhat somewhat transparent and then transit duration this is the duration that it takes for the page to pop up and of course we can add an animation so you can have a duration here and I'm just going to put in like 400 milliseconds so that we can see that animation and to actually get the animation we will want to override another function here called build transitions we could create the animation in here but it's actually better practice to do it in here so you can see that the build transitions here as build context animation and a secondary animation and then it also has the child of this particular route so and don't worry about this child this child here it's not going to override our child from up here luckily even if we don't rename it so we'll all have a fade transition and for this the opacity will be based on our primary animation and then we'll have a scale transition and for this we'll make the scale based on our primary animation have my coal in there and then inside of this will just have the child like that and why are we getting an error she expected to find a comma that's why all right so that'll give us a nice animation when the window opens and the I believe this secondary animation is for when the let's see I'm not sure what the secondary animation does we could look into it I guess let me look real quick so okay so the animation for the rope being pushed on top of this route so if another route gets pushed on top of this route then we want to call to the secondary animation since it's not going to happen we don't really care about it so then in the build page let's define the basic structure of this widget so we're just going to have a material and then inside of the material well first we'll have this material be a type of material type let's make a transparency and then we'll have a safe area now a safe area if you guys have never encountered this widget before it's a widget that allows you to avoid basically say alright I don't want the bottom to be overlapping I don't want the top to be overlapping so you can basically choose to scale the window around like like bezels and other pieces of the UI with a safe area so for this by default top bottom left and right will all be true so I'll just leave that alone we'll just have our child in here with the game container and then in the container we can have our margin which will be an edge game set let's make it only put in our top which will be the up bottom which will be the bottom Left will be the left and then right will be the right and maybe top may be the up should have been I and I didn't change these by the way maybe up should be top instead of top and bottom should be down so let's do that so I can select them all like this replace them all do the same for UPS place this the top here we go that looks a bit better alright so then inside of the container we just want to have our child in here which is the child that we're passing into this route so this child up here so then this is funny my cat threw up on the floor and then he came in and started snoring I don't know if you guys hear it but it's really annoying all right so we want to embed a stateful widget inside of this so we'll create that guess we've just called it this is called what pop-up video routes so we'll just call our stateful widget pop-up video player and actually I could use the it's not working I can use the thing to create a stateful widget so if you type in STF or was it SDF yes SDF work ready to stayed for widget like this and then you can just fill it out so just call this pop-up video player like that and then you can see I have a lot of different things and then if you want to stateless I think it's ste STL is stateless and then SDF is stateful it's pretty useful they had to know that especially if you're working with vs code well of course if you're working with vias code anyway so we want to then just we're gonna embed this stateful widget inside of the inside of the route when we call to it inside of our main funk our main object so in here is where we want to have the video player and so we need to pass in the video ID so this is just a string and I'll pass it into the widget part instead of the state part as a final item that way we can access it inside of our Steve a widget and here we also want to add the portrait mode I don't know if we brought in mix-ins but we should have portrait mode with the pop-up can you player inside of it properly yeah I didn't stop the mix in properly portrait you hurry up so we want this to stay in portrait mode we could make this also fullscreen so that when we click on it rather than go into another route we we just make this fullscreen but you know what I want to make two separate video players that way I can show you guys how to do this properly so in here let's put in a scaffold and then we'll have a body a center and we'll have a child this time we'll have our stack in here so that we can align things around and the fit for the stack let's make this stack get loose so they fit around loosely and then we'll have our children and in here we're going to have our video player which we'll put in the middle of the stack and then we'll have a button to close this pop-up window then we also have buttons to play the video a button to pause the video and then a button to open up our fullscreen you Josh no there is no result type inside of Dart you a trying to say your name but it's really hard a wrong a wrong day a wrong day here on day thank you yes I noticed that just now luckily I caught it but you were - yeah thanks for telling me yeah you're right know is just another identifier babe time yes vaping a just a normal custard flavor okay so if you guys have any more questions feel free to just start throwing them in the chat I'll come back to them in a moment let's build this out though so have a container we want to specify the alignment because this is how the stack works stack is just literally a stack of items and we want to align them around the stack so that they don't overlap with one another unless we actually actually want that to happen so first let's start with alignment to make this bottom center so this will be our button bar and you know what I can actually grab the button bar from in here and reuse it so let's just grab this um it's down to there this part in this part is we don't need in these don't need to be asynchronous I don't think so button bar we're gonna have three buttons in here instead of two let's grab one of these and make a third and get rid of the colors if we want to I guess we could have kept this one red because this will be our play button so let's see way arrow there we go our was there what was that circle one way circle filled or circle outline I liked better that one alright so we're puttin the logic here in a moment because we're going to need to get a controller from our video player but since we don't have the video player in here we don't have that controller so for this icons will have our pause button and then for this one we'll have our fullscreen and actually while we're at it let's go ahead and import the pop-up file and see if it works it should work I think it should work but yeah we can add it in here really quickly so navigator of context we're going to push in our new route which is the route named what did we call it video player route I think so we just want to put that in no I was pop-up video player route like that normally you'd put like a material route in here and then the child here will be they are pop-up video player and the pop-up video player needs to the video ID which is just our video ID remember we set it up here so all right yeah it seems like the analyzer is slowing down this is a known issue with this [Music] let's see now this is a current known issue that they're working on fixing I guess I didn't how pop top yeah no wonder it's causing their pop up there we go so if we open up the emulator here now we should be able to click on one of these and have our pop-up come up and you can see it it's actually transparent so we can see the list behind we'll have the video player in the middle here we have our play button our pause button our fullscreen button and then we'll also have a close button that will be right on the video player itself and with the normal setup you could actually close this thing by just clicking on the outside I've put that to false but we may want to add true in this case just to make it easier for a user to navigate it's actually let's do that real quick so barrier dismiss world just make this true and now I should be able to click the outside I probably need to restart it but yeah I should be able to click the outside and just dismiss the barrier so click on this video apparently it's still not working but whatever you know that's that's fine you can just hit back and it works like that all right so we've got our buttons here let's now set up the with the video later now while we're doing that we want to set up the controller first so the controller not quite sure how the controller works but we'll find out here in a moment so it's called YouTube video as a player controller yeah so video controller is what we'll call it and we also have one in here with that we didn't use it all ah I think need it in here all right yeah no we don't really need it in there I will need it in here though sir video controller and then in our stack let's go below our button bar button bar is right here and actually we need to go another container even and yeah we'll create another container here this will have alignments let's just make it a line meant Center so to be in the very center of the screen and then our child here will be our YouTube player put into context then the video ID which remember is inside of our widgets of widget video ID let's make autoplay false it doesn't automatically start to play and then we're gonna hide the controls because we want to be able to control it ourself so make that true and then to get the controller I think we need to call this on player initiating initiated function this takes in a youtube visit YouTube player or controller and what we'll do is just say video controller equals controller like that all right so then let's see yeah so that should be alright let's see what this looks like and then we have the video in there obviously we can't play because we disabled the controls but me reenable them so that we can see if it works and yes so it's actually playing the video got this big bearded dude talking and I've got sound and everything so we can hear the sound if you want the feed was getting Skippy you said looks like I'm sterile uploading at a fairly consistent speed I'll have to check yeah and it looks like it's still eight kilobytes per second or eight thousand kilobytes per second I don't know maybe there's something else going on all right so that works let's go ahead and hide the controls again and now that we have the controller we can set up these buttons so for foreplay let's put a comma here so for the play button let me just go video controller check to see if it's no first then we want to say you should just be a play function and for pause just video controller probably paused and then for the full screen this is an entirely different thing we want to pop another pop another route so now if I hit play this starts the video and then if I hit pause it stops the video so that works pretty well alright let's create our close button so I just want to make this close button let's make it a padding why am I not getting auto completion whatever so petting and I want to push this button so that it's on top of the video player so you can use edge in sets for this I think this needs to be capital and it doesn't need to be constant like that see put in like 50 pixels and see if that's good enough and then inside of here and put in our container and then inside it is excuse me we'll have our icon button put in icons close which will be an X I think yeah this this is absurd the analyzer is just shooting the bed hang on let me reload the window that should fix it but I wonder if it's gonna Carol the emulator I probably did I even though we still see the application it did disconnect it now let's just give it a sec to relearn I'll talk to you guys while I'm doing that and my med you don't really understand any of this but it's really interesting to watch flutters very easy to get into a gotta say so you should be able to grasp it pretty quickly I've been able to teach people and within a few hours they're able to build very basic apps and then within a few weeks they can easily build apps this complicated if not more complicated so it is a very very easy framework to learn and the dart language definitely helps you in that regard because it's very simple I mean aside from things like isolates and zones which you really don't have to worry about for flutter so much you I think that's part of the reason why it's becoming more popular and they've been a lot of these really cool polls and things done on on flutter and people tend to really like it I've also seen a lot of job openings and stuff for flutter developers recently I actually got my own job recently with a contractor to do some flutter work so I actually got two contractors that have asked me to do some work with them I'm still finalizing that but I should be working on at least one of those projects anyway all right so when we push the button here we just want to call navigator of passing the build context and then we just want to pop the window off the stack so that's all this is doing here so remember the window itself is being popped on or pushed on to the stack which is just our router and then to get rid of it we just pop it off on I don't need to pass the contacts in the top all right so let me rerun the emulator get this rerunning extension methods are coming in fact while we're waiting here there is a roadmap that you can take a look at there's a there's an entire github repository I'll show you this real quick so if you go to this github repository the dart Liang Liang Guajira posit Ori you can see here what they're working on so the accepted specifications so for the future releases we've got a synchronous star behavior constant updates contravariant super interfaces generalized type deaths these I'm really excited about being able to specify types with type def it's pretty cool language versioning triple shift operator that's not really that impressive but let's see I'm in 2.3 they put in the spread operator they put in all those control flow collections and unified collections which are pretty good then we've got stuff they're working on so working we've got set literals static extension methods which you were just talking about implicit constructors static and meet ability so yeah you can you can really kind of take a look at these and see what people are suggesting and what they're working on which is pretty cool some of these have been well some of these and abandoned but if you really want to see what people are asking for you can also look at these to the issues themselves you've got people talking about what they want so some people are asking for crazy things like dependent types and and hire kinda types and stuff like that this guy wants sealed classes you know and and these are being added in I think I think they're actually going to do algebraic data types eventually so there's a lot of cool stuff on the horizon for Dart all right so let's switch back over we got our application open here let's see you this up we've got our eggs here it's it's actually at the top let me that's because we don't have the alignment we want the alignment to be in the center I think that'll put it there let's put it Center and left our right rather sorry dyslexia for the win and then we want to push it up further so I think probably another 50 pixels or 100 yeah a little bit higher 120 maybe it looks about right so click that it closes the window and actually still a little off to me 140 seems about right maybe 135 would be better that's just to 130 all right so there we go we've got like this nice X button in the middle of the window and we can close it all right so that does it for this piece of the application now let's create our full screen player so I'll make a file here called full screen and then we can build the actual full screen player now I know that this library gives us the ability to open things in full screen but as you guys saw it was a bit buggy so what we essentially want to do is recreate it with the smaller screen player so essentially we just want to create a stateful widget that will allow us to basically build a decently sized window and have it you know display well so that people can actually watch these videos so let's bring in material we're gonna need our mix ends and let's also bring in the player and then for this I'll use the little thing to make our stateful widget video player full screen that's what we'll call it odd let me reset that as I put a capital L there the player place that there we go close that and yes essentially in this thing we want to pass in the video ID again so that we can specifically target the video ID and and then play the video and we may want to also add a duration so that when the user opens the fullscreen window it starts the video where it left off but I'm not sure if that works so let's let's just do it real quick let's just add it and see if it works so position is what I'll call it and then we can just add it here so then with this one we're going to add the the landscape mode mix in so landscape mode video player full screen like that now I'm sure you guys are wondering why I'm using so many stateful widgets even though I'm not crawling like such state or anything in here that's mainly because I'm implementing these mix-ins I could make these work for stateless widgets the thing is they don't have a dispose method so I can tree in able the rotation though I guess in this case it really wouldn't matter so for a landscape mode let's make this a stateless widget instead of a stateful so let's just have it on state was widget like that and then we can just remove the disposed because when we go backwards this should then work so we can just reconvert this back to a state full widget so let me just are stateless widget rather okay so that's that should be fine I don't I we'll see we'll see if it breaks it or not so let's see oh yes of course we need to add the actual mixin again so landscape mode like that I'm in this we could also actually completely forgot to call super build passing the contents so this I need to call in all of our widgets that have the mix in so let me do that real quick with the pop in I think the popping as mixing you so call super built context and then inside of main we have it too so we put it right here all right so that way it actually calls your build context all right our calls to our build function okay so we're going to return a let's return a stack again though actually it really doesn't matter we only have the one item in the stack I guess we can no you know what we're gonna return the stack because we're gonna have another close button again so we'll have the YouTube player and then we'll have a button that will allow us to go backwards so start with a container which will have our video player in it and let's Center this thing get the YouTube player that's in our context I can spell pass in our video ID well make this let's make this autoplay so that when a user opens up the window it just automatically starts playing we're gonna leave the the controller's here so the controls rather so the user can move around the the bar and positon and things because we don't want to implement those on top of our chordal court fullscreen player though in the future like if I was actually going to build this and then ship it I probably would disable the player controls because when they're in the quote/unquote fullscreen mode they're not actually in fullscreen so they could just hit that button and then it would cause an error anyway so to disable that I would just disable the plugins and then I'd have my own like pop-up bar that would disappear when the user just not hovering over it with their finger hi anyway we don't have time to do that right now unfortunately so I'm not gonna get into that let's put it in show progress indicator so we can see how far the videos gone and I guess we could set up a controller but we don't really need one all we really need to do here is is then just create the close button so in this case because this is taking up the entire screen we can just use the alignment rather than using like a margin to center this button so alignment will be just be left our top left like that and then we'll have a child here which would be our icon button and for this I'm going to just grab the the text that we had in the pop-up AHA where is it here and I'll just put this in here and it just occurred to me that I didn't implement the full screen button yet that's fine this is all the same we're still just popping everything out and we could actually make this icon bigger so 40 pixels and let's give it a color all right so that's actually it for this but let's now hook up the logic to make this actually open up to full screen when we want it to with this it's just a matter of moving down the route again so we're gonna call a material route and yeah and then the material route will build out to our video player full screen objects so we just want to calm yeah abigai you don't have to call it so I'm doing this navigator of context thing every time you don't actually have to do that you can just do navigator and then just do push and then pass in the context like that but yeah you can you can do either do or you can just do push or pop or whatever you're gonna do and then pass in the context so let's just do it that that way this time we want the material page route and the material page route just implements the Builder which has the context in it and for this we're just going to video player fullscreen like that we don't have the position yet so we want to put in our video ID so that's just a quick video ID and then the position it's going to be from our controller so video controller I guess it's a value position there we go and that gives us a duration and we could then apply that to our video player so let's uh give this a shot now looks like the emulator is still open all right so let me open one of these start playing it in this window should be alright do you guys actually hear that or not the dude talking ListView widget so let me turn off that sound you all right you guys are saying yes so you do hear it hey let me recenter the check is being annoying there we go now you guys stuff is popping up so yeah this is working now we open to full screen looks like we've got a big old error going on and it killed the app so let's find out what actually happened here so well this is pretty long let me make this bigger I think I know exactly what happened here so let me check to see what we've got so it looks like it's loading the page so she was sore my building the icon button material color primary valley of colored bah-bah-bah no material widget was found that's why so we need to add a scaffold around the the fullscreen so we could just add a piece of material but I'm gonna add a actually you know what let's just do that like this the main reason is because without the material we don't have access to the Navigator we don't have a lot of other pieces and that could potentially cause a lot of barriers and that's that's what we just saw is that huge error red screen of death yes sort of it's not usually it doesn't kill the emulator like that or kill the app but this time it did because apparently it couldn't handle out on the Java side either you you so it looks like it's building once he gets there it should work in theory you oh well apparently there are 25 concurrent viewers that's a lot more than I expected there to be right now oh now as soon as I said something it goes down to 23 so I guess there are a lot of people who watch these videos without saying much and that's fine you guys don't have to interact in the chat anyway yep that is true Jeff it I think you said something in the beginning and then you haven't said much it's funny how Android just throws out the activity and rebuild everything on configuration changed yeah it is kind of funny watch most of your Freddy series really love they were working on my own project now and do this on the freelance app development alright ah man good for you you're living the dream as they say I'm glad I was able to get you to a place where you can actually use your skills to make some money and do something that you enjoy doing hopefully I don't know if you enjoy flutter or not but most people do seem to enjoy it alright so that actually worked let's spin our screen the proper way we've got our eggs should play no see let me click it one more time let's see if we've got any errors here no errors I think the issue is not on my end I think it's on the end of the plugin unfortunately something tells me that the android plug-in that this guy built is probably more stable because it looks like this one from what I can see it uses a it uses that webview and that's how it's able to work on iOS as well and as a result you've got some errors that could potentially happen with JavaScript and a few other things all right so let's go with this video now and with the other one I think when I looked at it I we've got the video playing when I looked at it did it also had the ability to change the the actual quality of the video inside of it where is this one you don't you just kind of play the video from this dream anyway it seems to be working we've got this sound working as well I'll put it on for a moment so you guys can hear it you can also move it forward just more third-party libraries available to you compared to the ones you have available with flutter now the one that is missing okay anyway so I'm not gonna advertise this guy's YouTube video but yeah so there we go we've got this thing working all right let's see if we can make it so that the positioning works so like when we play a video in this screen and then like pause it and want to go to the full screen we can then get where that video was and then and then resume it in the full screen version so let's see so I guess what we want to do here we could add a play button no you know we could do is on in it player initialize passing the YouTube controller let's just call this controller and then what we can do is take our let's create a new controller here call this I don't know underscore controller all right so we say under script controller equals controller we're going to use the Cascade operator to then cue this to where we want it to be and it actually Q looks like it takes in an integer I guess we can put in the position in seconds and you know this requires start it's named constructor and maybe that'll work I don't I don't know I'm really kind of dubious on that so let's play this get a few seconds going let me turn off the sound so it doesn't annoy you guys and now when we open this in theory yeah okay so it actually starts where it left off and yeah so that works I guess this needs to be in the constructor that's fine and it really doesn't really bother me and that's just I guess we'll just call this video controller them all right so that that works and I'm actually pleasantly surprised that it actually worked properly looks like we still got some kind of error here and that's because it's final so I guess we don't want it to be final it's still gonna you moan about it because this is constant so should be alright like this even though it's going to complain because this is supposed to be immutable and this is obviously not immutable in fact I could probably just remove this here completely and just call Controller Q start at position and that should do what we want it to so let me open up another letter tutorial I'm kind of upset that I haven't seen any of my own flutter tutorials in here and look at all these like crazy thumbnails that these people make God YouTube is such a clickbait heaven let's just tense their programming I'm not really one to talk my recent thumbnail on this particular stream is pretty click bTW we got a error some kind of exception happened see what that was you that looks like big old exception you okay that's just it couldn't load some random JPEG that I guess is coming in through the webview okay so play this thing it should be plain but apparently not let's open it in full screen and we get some issues with the okay so I guess our cue plan is not working because this is somehow null even though it shouldn't be because it's coming from on player initialized this should be the controller of this video should be being created by the video player you yeah all right so I guess we got to throw this out let's just remove this entirely I think the app will automatically do it for us because it was working before if it has that error that we were seeing then all right so this guy's talking now when I open it in the full screen it should know it did restart all right so the other way of doing it did actually work I'm not sure why though you know what I can do though is actually make a controller in here so and we can just say video controller equals controller let's just copy this her you know let's just use the Cascade operator like that and that killed our app there's an issue with the Java API on the side of the plugin maybe this is just not meant to be here's a title suggestion for you better than react native you won't believe what I live code I got ya makes me sound like such a shell how to keep it playing by blocking the screen sorry I'm not really sure what you mean how would you implement a bar or a button that appears and fades away on touch there are various ways that you could do this you would have a gesture detector probably so gesture detector check to see if the user is like tapping the screen or tapping the gesture detector area and if they are then you have the button up here and you can do it similar to how we did with our pop-up window I mean obviously you don't have to go all the way and create a model route and have that route pop up instead you have a dialog box appear so and you can do this by calling um I think it's just show dialog something like that and show dialog well I can't do it in a state list widget but a stateful widget should have it show dialog will pop up a dialog screen you should be able to control how long it stays open so that it will automatically closed and then yeah so you could have it stay open for like a second or so and then close it after the user is done with it all right so this is just not going to work and I'm not going to worry about it and frankly it's not a big deal so a shame I'm not sure why I worked before and now it's not working but nothing we can do about it if it's a part of the library it's not something that I can fix I guess that sort of teaches me not to use the the iOS version of some third-party library that I've never looked at before you short to ground says I've got an app rejected for putting a YouTube video in a web view you have to use API what was it rejected from and the Playstore I've never heard of that happening we are using the API in this plugin the plugin does use the API in the backend so there's no issue here I don't see why Google would say oh you can't deploy this app you you could deploy this app as it is that I wouldn't because there are too many bugs with it you all righty guys well I guess we're done we've got her app built it does exactly what I expected it to do and well there are a few features that I would have liked to implement but it seems to be all right obviously if you were to build this on a device it would run a lot faster but you know what it's actually pretty smooth considering that it was that it's all web views and it's pinging the AP and all that stuff even like the full screen like it's running at at least 30 frames per second which is pretty decent so and you know obviously there's some stuttering here and there which is fine there are some rough edges with this app but you know it's just a demo app so I don't really care about that it's not for production if you guys want to take it and use it as like a template for something you want to build go right ahead by all means but I'm not responsible for that for what happens if you run into all kinds of crazy bugs anyway guys thanks for coming out and thanks for checking out this livestream it's a lot of fun to talk to you guys and to code this application I'm gonna commit it over to github if you guys you guys want to you know if you're not subscribed to the channel go ahead and subscribe to the channel if you're interested in the content of course there'll be a lot more flutter content coming out and yeah that's they do rust I do a lick sir I'm gonna start doing some closures some haskell some old camels and f-sharp some scala at some point and yeah got a lot of stuff going on and hopefully things are starting to pick up actually just announced that I'm probably gonna start doing like three to four videos a week now I don't have any merchandise or anything like that but you can click that little notification bell if you want to just kidding oh actually you should probably do that because the way that YouTube works even if you're a subscriber you're not guaranteed to get my content that's kind of infuriating alright guys well you guys have a good night all right and or morning or you know I know some of you is fairly early so yeah you guys all have a good day night evening whatever and I'll see you in the next video a next livestream you