Flutter Tutorial - Video Player - Fullscreen, Portrait & Landscape

nova days most of the apps are displaying their videos in full screen and this is exactly what we want to do in this tutorial we also want to look at how we can create a landscape video view and lastly we will also look at how we can switch between a pottery and a landscape video if you're new here subscribe to my channel and make sure to watch this video till the end let's get started by displaying a video in portrait mode and full screen mode and by the way if you haven't watched my last video i highly recommend you to watch it before because there we learned how you can display videos and load it from your assets from your file system or also from the internet i've created here a new state for widget and here inside we basically want to create our video and therefore i simply put here this video player controller inside which we now want to initialize in our init state method and to play our videos you need to go to your pubspec drama file and here you need to add this video player under your dependencies inside next we go back to our widget and here we initialize then our video player controller so here we call network and inside of this you can then supply a url to the video which you have stored in the internet and after this we call here all these things what we learned in the last tutorial so we initialize our video and then we also play it then after we have successfully initialized our controller we also need to call the dispose method and here we clean everything up if our widget is not in the widget tree anymore and lastly we go then to our build method and here we want to create our video and therefore i create here this video player full screen widget which we want to create and here inside i pass in the controller inside which we have initialized before now let's create this video player full screen widget and here i start with the basic implementation what we learned in the last tutorial so all in all we wait until our video is loaded and our controller is then initialized and if this is the case then we will see a video and this is the most important thing here to actually call this video player and here we put then this controller inside and we also wrap it here around with this aspect ratio so that the video is displayed in the right aspect ratio and now our video is here displayed in our view and i have chosen here a specific video which has less width however more height and i have chosen this video to demonstrate you how you can put this video to the full screen mode even if it is such a video the first thing we like to do is to go to our stack and here inside our video player is displayed and we want to call here this property fit and then we say stack fit expand and now our video is stretched here to the whole width however the video which we right now have is not correctly displayed and therefore i also wrap here around our video player which is displaying this video a new method around and this is called build fullscreen and within this method we basically return then here our child and then we want to receive here the size of our video and this is what you can do by calling controller.value and then you can access the size of the original video and from the size we get then the width and also the height attributes and then we wrap here around our child which is our video player a size box around and here we put then the width and height inside of our video and lastly you wrap your a fitted box around and here you set the property fit and i set it to cover and now our video is displayed in the right aspect ratio and is displayed in full screen and within your fitted box you also have the property alignment and then you can set it here to alignment top center and this will then display the upper part of our video and we want to remove again the alignment because we don't need it and this is because right now our video has here this format which is a bit strange and therefore this video is not showing really correctly however if we have later a portray video which has here this format then everything is fine and the next thing is to put here a real video inside so i go again to the portrait player widget and then i replace here this video which was only for test purposes and then i put a real portrait video inside and now the video should be displayed here correctly and it is in full screen with the right aspect ratio we also want to go over to the landscape mode and this is then displaying the video in the full landscape mode and here in this video it doesn't look right however if you use your correct phone then it is displayed in the landscape mode and to display our video in the landscape mode this is pretty simple we simply have the same setup as the portrait video and here we basically add a method within our init state and here we implement the set landscape method and what this method is doing it is basically changing here our orientation of our device and we set here the orientation to landscape left and landscape right and now if i click here on this landscape tab then he is switching to the landscape mode and on your real device this will then show the video in the landscape mode however here this video is not displaying it correctly and now every time if we navigate to this landscape player page then he is setting the landscape and here it's putting then the device orientation to landscape however also if we go again outside of this page then we need to clean everything again up and therefore i create here this method set all orientations and inside of this method we call again this set orientations and this time we set it to the device orientation values which means that we put again all the orientations inside also portray in landscape and this means if i navigate again back from this page then he is switching again to the portrait mode within our landscape mode you can see that we have here the status bar at the top and this is also what you can hide easily if you like and therefore you go to the init state set landscape method and here inside we call them the set overlays and we put here an empty list inside which means that we hide here this overlay at the top and now if i go again to the landscape mode you see that the status bar is hidden and not anymore visible similarly like before we also need to go again to our dispose method and here inside of the set all orientations and here we do exactly the same thing as before we call again this enabled overlays however this time we put again all the overlays inside so our status bar is again displayed if we navigate back from this screen another thing which might be helpful if you go to the landscape mode is to call here this method wake lock enable and this will make sure that our device stays awake and is not sleeping if we are currently watching a long video so let's say you have a video of 10 minutes then normally your device would sleep after some time because you don't interact with the phone however if we call here this method then we prevent that our phone goes to sleep and to use this method you need to go to your pubspec jumble file and here you need to add this wake lock under your dependencies inside and like before we also want to implement here this set all orientations so if we go again away from this page here then we want to call this wakelock disable and this will make sure that if we leave from this page that our phone can sleep again and lastly we want to create a video which can switch between portrait and landscape like for example youtube is doing so they have here this view where they display a video and then later if you turn your phone then it is switching to the landscape mode and then you can watch your video in full screen and if you like you can also switch again back to the portrait mode and therefore we will also implement here this full screen button so that you later can toggle between the landscape mode and the portrait mode to build this portrait landscape mode we have here a new page and here we basically initialize our controller like what we did before with this network constructor and we also dispose our controller then we go to our build method and here we create a new widget which we want to create right now and the switcher then displays the portrait and landscape mode to implement this new widget i will go to the video player full screen widget which we have developed before and then we basically copy here all the source code which we had before implemented and then we create here our new widget video player bose widget and here we put then the controller inside and this widget works exactly like before so we display here a video player and this is then displayed in full screen around our video player and our stack we want to wrap now this orientation builder and then we basically get every time the orientation if we are currently in the portrait mode or if we are in the landscape mode and this is then basically the field which you can access here and we want to check then if we are currently within the portrait mode so we simply check our current orientation and check if we are within the pottery mode right now i'm here within this page and you see currently the portrait mode and i also can rotate my phone and then he will switch to the landscape mode however here on the right side and also on the left side the video is not displayed completely so if you like you can also go within your stack and then you can put it here to stack fit expand and now after i hot reload you see that the video is displayed here on the left side and also on the right side correctly however if i now go back to the portray mode you see that this is also here expanded and it tries to expand to the whole screen and this is what we want to change and therefore we simply access here this is portray boolean field and if we are currently in the portrait mode then we want to have here the stack fit loose so we don't want to expand here our widget however if we are in the landscape mode then we expand it and now if a hot reload you see we come here back to this simple view next we want to create here an overlay over our video so that we have here displayed the current speed and also this progress indicator and the most important button is this one so that we can toggle to the full screen mode and therefore i simply go here to the build video method and here we have our video player which is displayed here and on top of our video player we want to display here an overlay and therefore i create a new widget advanced overlay widget which i want to create with you and here inside i put the controller inside and i also put here a property inside which is called unclicked full screen which we want to implement later and this property is every time cold if we click here on this button and we can already implement this so if we are currently inside of the portrait mode then we want to switch to the landscape mode and therefore you simply can call here this auto orientation and then you can switch to the landscape mode and otherwise if we are already inside of the landscape mode then we want to switch here to the portrait mode and to make use of this auto orientation you need to go to your pop spec jumble file and here you need to add this auto orientation under your dependencies inside and what these both methods are doing they are basically forcing the phone to go to the landscape mode and this one is forcing the phone to go again to the portrait mode and now we want to create this advanced overlay widget together in the last video i have already shown you how you can create this overlay of this video indicator which is then displayed here at the bottom of our video and we want to continue from this source code base so i have put it here already inside and basically here inside we show an indicator at the bottom so we show here this video progress indicator which is exactly this indicator here at the bottom and this then displays the video position of our current video and now what we want to do is we want to display here next to our indicator this full screen button and therefore i simply go to this indicator and i wrap it inside of a row and we will also make this indicator expanded so that it gets the maximum width at once and next to it we want to place then our icon this full screen icon and now every time if we click on this icon then we want to call here this callback and this is the callback which we have integrated already before and now you see here that we have our indicator and next to it we have here this full screen button and if we now click on this full screen button it should then force it to the landscape mode and also to the portray mode so let's try it out so i click here on this full screen button and then he will switch to the landscape mode and if i again click on this full screen button then he will go back to the portrait mode now we also want to look at how we can change the speed of our video and therefore we create here this button and then you can basically choose the speed of the video and change it and secondly we also want to create here text above our indicator which then displays the current video position to implement these we go again to our overlay widget and here we go then to our build method to our stack and here we want to add simply a text and this is then the text which we display here on the left side and to display it on the left side i put it here inside of this position and i say that it should be displayed here on the left side and also on the bottom and inside of this text we want to display then the current position of our video and therefore i create a new method get position and inside of this method we simply access here the controller value position and here you basically get then the milliseconds of the current position of our video and after this we create a list of our duration which is in our position and we put here the minutes inside and also the seconds and after this you call them here this code which is then converting this duration to a correct string and this code will make sure that first of all are the minutes displayed at later the seconds and now we can try it out so i hot reload and you see here we have our current video position and it's always changing and also if we switch to the landscape mode then it is displayed here on the left side now we also want to create here at the top the speed button and then you basically can choose the speed of the video to display all the lists of the different speeds you create here in our overlay simply a list of all the options of the speed which you like to have and here we define for example twice the speed sort the speed and so on after this we go again to our stack and here we create a new method build speed and now we want to create here at the top right corner the speed button and this then displays our current speed and if we later click on this button then this list will pop up with all the different speeds which we can select therefore let's implement right now this build speed method and here inside i basically align our button which we want to create to the top right side and here inside i create then this pop-up menu button which then displays our list later and here i put then the initial value to the current controller value playback speed and this is then the current speed of our video alternatively you also can add here tooltip and the most important thing is then to implement this on selected so every time if we later change our value so if we have here this list and click on another value then we want to change our playback speed and therefore we call here our controller and the selected state what we selected from the list is then changed with the set playback speed method now we want to implement the list of all the speeds and therefore i go here inside and i implement this item builder and then we map over all of the speeds which we have implemented here at the top and we create for each of these speeds a pop-up menu item and here we basically display then the speed with an x after it and this item builder is then displaying here this list of all the different speeds which we have however initially we want to display here at the top right corner the speed which we have right now and therefore you implement here this child property and here we put then the current speed inside which we can access over our controller and i also wrap here around a container to make everything a bit better so we add here some padding and also white background and now our speed button is here displayed on the top right corner and i can click on it and then you see here this pop-up which we have built with this item builder and this displays then all the different speeds which we have and we can also select another speed and then you see that the video is also changing its speed at the end we want to go again back to our widget where we have implemented the full screen and where we basically forced it to the landscape mode and to the pottery mode and we want to fix now a problem with these both methods so basically if i click here on this full screen button then he will switch to the landscape however now i'm stuck in the landscape mode and if i try to rotate my phone to the portrait mode then it is not changing because this statement here is basically forcing the landscape mode and is setting then the landscape mode all the time the same thing is also for this method it is forcing it to the port remote so let's say i click again on this button then it is in the portrait mode however now if i try to rotate my phone to the landscape mode then it is not turning to the landscape mode and this is what we want to fix right now to dynamically rotate our phone and change the orientation of our video player and also to have here this full screen button we create here at the top of our state this field orientation and here inside we want to store then the target of our orientation where we go if we click here on this button so if we click on this button then we want to set our target and if we are right now in the portrait mode then the target will be the landscape mode because if we are right now here in the portrait mode and click on this button then we switch to the landscape mode and if we are in the landscape mode then we want to switch back to the portrait mode this is our target next we implement the init state method and here we call then this native device orientation communicator and with this one you can basically listen on the current orientation of your phone and therefore you call here on this one the method listen and then you get here every time the current orientation of your phone ss event back and to make use of this method you need to go to your pubspec jammer file and here you need to add this native device orientation under your dependencies inside after this we go again back to our widget and now we can listen here to our event and here we want to check if our event is within the portrait mode and therefore we simply check if our event has here this field native device orientation portray then we also check here if we are currently inside of the landscape mode therefore we check here if our event is here of the landscape type or of the landscape right type and with these both fields we basically check if we are currently within the pottery or if we are currently within the landscape mode and lastly we also want to do the same thing for our target here we also want to check if our target where we want to go if we click on this button is also on the portrait mode and secondly we also want to check if our target here is within the landscape mode and now it's pretty simple we create here this condition and we check if our target is matching with our current mode and this means if our target was to go here to the portray mode and also we are currently in the portrait mode then we want to do something and we also want to check here if our target was a landscape mode and we actually reach this landscape mode then we also want to do something and what we want to do is first of all to reset our target and secondly we want to call here the set orientations and then we want to enable every orientation again and this will make sure that we can rotate again our device and now we can try it out so i first of all click here on this full screen icon and then he will switch to the landscape mode and now i also rotate my phone to the landscape mode and now if i go again and rotate my phone to the portrait mode you also see that he is going back to the portrait mode and in this case the target was the landscape mode and then if we have reached the landscape mode then we enabled again the rotation of our phone and we rotated then back to the portrait mode again and now our video player works quite similar to youtube so you always can change the rotation of your phone and then he is changing it or you can also click on the buttons and then he's also changing the orientation hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye [Music] you

Channel: Johannes Milke

Views: 11,412

Keywords: portrait flutter app, landscape flutter app, change app orientation, orientation, flutter, flutter video, flutter video player, flutter video tutorial, flutter video stream, flutter play mp4, flutter play video, flutter mp4, flutter video player tutorial, tutorial, flutter tutorials, video player in flutter, video player, android, ios, flutter videos, flutter youtube, flutter video_player, flutter video streaming, flutter beginner app

Id: x0ZNQ0YXyfE

Length: 21min 51sec (1311 seconds)

Published: Wed Feb 10 2021