Flutter YouTube Clone UI Tutorial | Apps From Scratch

[Music] hey everyone welcome back to apps from scratch today i'm going to teach you how to build youtube's dark mode user interface you'll learn how to use slivers display the selected video above our bottom navigation bar with the miniplayer package and even some basic river pod to manage the state of our app throughout the video i'll hit upon some easy ui tricks to help you develop a clean and beautiful user experience [Music] make sure to smash the like button and subscribe as it really helps out the channel if you want to learn how to build real world apps with flutter check out my courses at launch club.io and with that let's get into it i've linked the starter project below containing all the mock data you need to follow along make sure that you're on the starter branch and download the zip file [Music] once you open up the starter project you'll see two files main.dart and data.dart inside main.dart the first thing we do in our build method is set the preferred orientation to portraitup so users won't accidentally change their orientation to landscape next we return a material app and set the title to flutter youtube ui we hide our debug banner by setting debug show checked mode banner to false and then we specify our theme data where we set our brightness to brightness.dark so this app is going to be in dark mode and then we also set our bottom navigation bar theme to have a selected item color of colors.white [Music] and here we set home to scaffold inside data.org i've defined a user class at the top of the file and this is so i can create the current user and the user has a username profile image and a subscriber account this is all information we're going to be displaying in the app next i've created a video class and a video has all these different properties that we need to be aware of if we look at the simulator you can see we have three videos here and these videos are defined inside of our videos list right here first we have the clubhouse clone then build flutter apps fast and then instagram stories on the bottom when a user taps on one of these videos we see the video information and then underneath the author's information we can see a list of suggested videos and these suggested videos are defined in this list down here let's go to our pub spec and i've set the environment to 2.12.0 so this project supports no safety and the three dependencies we have are flutter riverpod miniplayer and time ago we're using riverpod for some basic state management because when you select a video you can see it changes at the top here when you turn the video screen into a mini player you can see we have the video at the bottom and whenever the user selects a new video it changes the player using riverpod is great for this app because we need to know which video is selected at all times if you've never used riverpod before don't worry because it's really easy to use next we have miniplayer and miniplayer allows us to have this container down here and when we drag it up or click on it it expands into our video screen when the user taps on the button in the top left to minimize the video screen it animates back into the mini player and this is a great package because it does exactly what we need and we don't need to waste any time reinventing the wheel finally we have the time and go package and this just allows us to change the date times that each video has so for example we have daytime 8 7 2020 on the facebook clone responsive ui tutorial and if i actually go to that video we can see it says eight months ago and so the time ago package is converting this date time into a time ago string the last thing i added to our pub spec is an asset and this asset is the youtube logo dark inside of our assets folder [Music] and that's just the youtube logo for dark mode we use this logo in our app bar the first thing we're going to work on is our bottom navigation bar inside of our navigation screen let's make a folder called screens and the first file here will be nav screen dot dart this is going to be a stateful widget called nav screen and we need to import material let's return a scaffold and now go back to main.dart and we can switch out the home widget here for nav screen and import that [Music] to create a bottom navigation bar we can add bottom navigation bar to our scaffold widget bottom navigation bar [Music] and we need to define some items the first item is going to be bottom navigation bar item [Music] and then we'll set the icon to icon icons.home outlined and the label will be home we also want to set an active icon for when the bottom navigation bar item is selected and this will just be icon icons.home so when the item is not selected we'll see the outlined icon and then when the item is selected we'll see the filled in home icon let's duplicate this four times [Music] and when we hit save we can see our selected home item on the bottom nothing happens when we tap the other icons and that's because we didn't set up the ontap method yet before we do that we should set up the correct icons so explore add subscriptions and library we'll have icons.explore outlined and then explore then we have add circle outlined add circle subscriptions outlined and subscriptions and finally library and this is going to be video underscore library outlined and video library in order to allow the user to tap on the different icons and change the selected icon we need to add a selected index variable so i've int selected index and set that to zero [Music] then our bottom navigation bar will have current index set to the selected index when the user taps on any one of these bottom navigation bar items we'll call set state and set the selected index to the selected index [Music] and now if we click we can see the icons update accordingly to turn off the shifting effect all i have to do is set the type to bottom navigation bar type dot fixed and that also fixed our icon colors we can see the selected item has larger text than the other items so let's set the selected font size to 10.0 and then also set the unselected font size to 10.0 and that will just make it uniform and i just noticed that our add circle is filled in right now and i believe that's because i added an extra d here so this should be add circle outline instead of outlined and now that looks correct when we compare to this bottom navigation bar it looks spot-on now let's work on displaying the correct screen when the user taps on any of the bottom navigation bar items the way we're going to do this is by using a stack widget and then combining that with an offstage widget the stack widget will allow us to stack all five screens on top of one another and then the off stage widget will hide all the screens except the screen that is currently selected this is really useful for when you're building apps that need to have multiple navigation stacks so if you were to navigate inside the home screen and then switch to the library screen and navigate in that screen your app is going to be able to remember the navigation stack for each one of these screens let's scroll up and we need to make our items constant so they don't re-render whenever we reload this build method and then we'll define some screens so we'll have final screens and then we'll have our home screen which we'll create in a second and then we'll have const scaffold body center child text explore let's copy this three more times and next we'll have add then subscriptions and then library our home screen will be created inside of our screens folder home screen.dart this will be a stateless widget called home screen import material and return a scaffold for now [Music] we can now import this screen into our nav screen so now for our body of our scaffold [Music] we could just do screens selected index [Music] but again as i talked about before if we were to navigate inside of our home screen and then switch to the explore add subscriptions or library screen and switch back to our home screen we're actually only rendering the screen that we just clicked on and so we're going to lose our entire navigation stack for each screen whenever we switch screens so the way around this is to create a stack widget and then map our screens as a map map and because we turn the list of screens into a map we know the index now so that's the key here and then each screen we'll put screen we'll turn it into a map entry where the key is the index and then we'll make an offstage widget and the child here will just be the screen we can then convert the map into the values and then turn into a list if i hover over off stage you can see it creates a widget that visually hides the child and we only want to show the screen that's currently selected so we can set off stage to selected index [Music] is not equal to i and now this will hide all the screens that aren't selected we're able to preserve our navigation stacks for each screen because every single screen is going to be rendered but only the selected one will be visible and so if i switch between these we can see it's working perfectly next we're going to work on our app bar when the user scrolls up we want the app bar to disappear but when they scroll back down we want the app bar to appear to achieve this effect we're going to be using a sliver app bar inside of our home screen let's create the body and this is going to be a custom scroll view a custom scroll view takes in slivers which allows us to have a sliver app bar [Music] let's first add the youtube logo and then we'll add the icon buttons leading will be image.asset assets youtube logo dark dot png and this is the route to the youtube logo inside of our project let's increase the size by setting the leading width to 100.0 and then we can add some padding to this and set edge insets dot only left 12.0 let's handle these actions next so we'll set the actions to icon button icon const icon icons.cast and on pressed we'll leave empty let's duplicate this three more times next we have notifications outlined search and then for the last one we're going to be using a circle avatar instead of an icon because this is the user profile image so circle avatar foreground image and then we can access network image current user and this current user is from the data.dart file dot profile image url let's increase the icon size to 40.0 [Music] and that looks just like the ui because the youtube app uses the sliver app bar across multiple screens we should extract it out into its own widget so i cut that out and now i'm going to make a widgets folder [Music] with custom sliver app bar dot door this is stateless custom server app bar import material and then paste what you just cut [Music] and import data.dart [Music] now if i go back to home screen and we can type in custom sliver app bar and before we import this let's make a barrel file called widgets.dart so we can clean up our imports because we're going to be creating a bunch of widgets so export custom silver app bar and then import widgets.dart [Music] now when the user scrolls up we can see the app bar disappears but when they scroll back down we need the app bar to come back no matter where they are in the list so we need to set the floating property to true and if we hover over that you can see it just makes the app bar visible as soon as the user starts scrolling up towards the app bar now let's work on adding a list of video cards because we're in a custom scroll view we're going to need to use a server list inside of home screen after our custom silver app bar we can create our sliver list and this will have a delegate called sliver child builder delegate this gives us back context and index and we can use this to actually build each video card similar to a list view builder we'll get the video with final videos equal to videos index and videos is from data.dart then we can return our video card where we pass in the video remember to set the child count to videos.length video card is going to be defined inside of our widgets folder [Music] stateless video card import material and now in widgets we can export it [Music] and then have it taken the video import data.dart and generate the constructor [Music] each video card is going to be a column widget where we first have a stack widget to display the image and then the timestamp in the bottom right and then we have a row widget with the circle avatar and then a column widget with the title and the author of the video and extra information like views and the time ago and then all the way on the right here we have an icon let's start by creating the entire column widget and focus on creating the thumbnail with the timestamp change this to column children and then we can add image dot network where the source will just be the past in video thumbnail.url height will set to 220.0 the width will be on infinity so it stretches to the entire width of the column and fit will be box fit dot cover and now we have our three thumbnails in order to add the timestamp in the bottom right let's wrap our image.network in another column and then change this column to a stack from here we can add a positioned with bottom 8.0 and write 8.0 the child will be a container widget [Music] with color colors.black and the child is going to be text video doctoration [Music] with style theme dot of context dot text theme and we're going to be using the caption for this copy with color colors.white and if you've never used text themes before i'll leave a link in the description below to the material docs about text themes we can add some padding to our container const edge insets dot all 4.0 and now we've completed the thumbnail with the timestamp next let's focus on this row which down here where we have the circle avatar the title and the video information and then the icon underneath our stack we're going to make a row widget and we'll have our circle avatar where the foreground image is a network image with [Music] image video.author.profileimageurl we can wrap the circle avatar in a gesture detector with on top and this will just be print navigate to profile [Music] to the right of the circle avatar we're going to have another column which will contain the two text widgets text video title and text video.author.username and then i'm going to add a bullet point with option 8 on mac view.view count or video.view count rather views another bullet and then video dot timestamp let's save that you can see we're getting an overflow error right now but before we deal with that let's actually figure out how to use the time go package so if you remember in the beginning i told you guys that i imported time ago and to use this package we need to go to the top of this file and import the time ago package and we'll aliase this as time ago [Music] now we can just type time ago dot format and pass in the video timestamp [Music] let's set the cross axis alignment to cross axis alignment.start so that way both text widgets will be aligned to the left and then to fix the overflow errors we want both these text widgets to overflow to up to two lines and then truncate with ellipsis we need to wrap each one of these text widgets inside of flexible and then set max lines equal to two overflow will be text overflow.ellipsis and do this for both of these we then need to set the column's main axis size to main axis size dot min and that's going to make sure the vertical height of the column is as small as possible then we can just wrap our column inside an expanded widget and that fixes it let's style both these text widgets by setting style theme.of context text theme bodytext1 dot copy with font size 15.0 and then the username view count and the timestamp will be text theme.caption [Music] with font size 14.0 [Music] we can add some spacing between the expanded column and the circle avatar with const sized box with 8.0 and let's wrap our row widget in padding to give it some more space edge insets.all 12.0 lastly we need to add an icon and this icon is the more vertical icon icon icons dot more vert size 20.0 [Music] and we should wrap this in a gesture detector in case you want to implement the ability to tap on it the reason we're not using an icon button here is because an icon button has padding by default and we don't want to add extra padding if it's not necessary to match with the ui we need to align each item in the row widget to the top and so we can set the row widget's cross axis alignment to cross axis alignment dot start [Music] and then we'll also set the main axis alignment to main axis alignment dot space between to make sure the icon on the right will be pushed all the way to the right edge and that's everything we have to do for our video card for now before we work on adding this mini player we need to know which video is selected as i mentioned earlier we're going to be using riverpod to manage our state whenever the user taps on one of these videos we want our selected video state to update with the selected video if the user taps on this x button here then we want the selected video state to be null and in that case we wouldn't show the miniplayer at all let's go into our nav screen and at the top here i'm going to define final selected video provider and set this equal to a state provider of type video and because video can be null i'm adding a question mark here ref no because when the app is first launched no video is selected import data.dart and this is the key to managing our state in order to access a state provider we need to go back to main.dart and then wrap our my app inside of a provider scope provider scope lets us access our providers anywhere in the app so now if i go to the video card i can wrap the entire video card widget so the column here in a gesture detector with ontap and then i can use context.read to access the selected video provider and in order to use context.read we need to make sure riverpod is imported so import flutter riverpod [Music] and then we can just set the state which is a video to the video that was tapped to make sure this is working properly let's go back into our nav screen and we're going to wrap our stack inside of a widget called consumer and this consumer has a builder which gives us back a build context something called watch and then the last callback parameter is a widget but we're not going to be using that so that can just be an underscore [Music] let's move our stack into this and then return our stack [Music] we're also going to need to hot restart the app because we added a provider scope to get the selected video i can just do final selected video and set that equal to watch which takes in the provider so select a video provider dot state which is the video and i'll print out the selected video right here now if i go to the debug console and clear that whenever i click on one of these videos we can see it's updating the console and so what this line means is whenever our selected video provider is updated with a new video selected we rebuild this section of our ui this is going to be an integral part of how we display our mini player right here because our mini player is actually going to be part of our stack widget and rest right above the bottom navigation bar let's start working on adding this mini player we can remove the print statement right here [Music] and then after we create our stack of screens we're going to add our miniplayer by doing dot dot add mini player and we need to import the miniplayer package max height is required and that's because when the user drags up on the miniplayer or taps it we need to expand to the full height of our screen so max height will be media query dot of context dot size dot height [Music] and then we also need min height which will be underscore player min height and we're going to define this up here static const double player min height and let's set this to 60.0 the miniplayer also needs a builder parameter and this gives us back height and percentage so height is the current height of our miniplayer and the percentage is the percentage of the max height for now let's just return a container widget with a centered text widget and we can have it print out the height and the percentage [Music] right now we're getting the error that the miniplayer can't be assigned to the parameter type off stage and that's because if we hover over to list we can see it's a list of offstage and so we need to wrap our miniplayer inside of an offstage widget [Music] and we only want the miniplayer to be shown if they selected video is not equal to null so if the selected video is null then off stage would be true which means that this widget is hidden let's set the color of the container to color theme dot of context dot scaffold background color [Music] and now we can see the height and the percentage so when i slide this panel up we can see the height and the percentage are changing accordingly and when i reach max height it actually snaps into place and then i can either tap or drag down to make the mini player the min height [Music] the first thing we have to check in our builder is make sure that selective video is not equal to null because if it is equal to null we're not going to be able to load the data so here we can return a constant size box dot shrink [Music] if we hot restart the app you can see that the mini player is gone and that's because selected video is null if i tap on one of these videos here we can see the mini player appeared because we've selected a video now we're ready to start working on this the miniplayer has a height of 60 and it's a column widget because we show a linear progress indicator underneath this row widget the child of the container is going to be column children and let's first add the linear progress indicator linear progress indicator value is 0.4 and then to set the color that's just value color always stopped animation color colors.red and now we can see the indicator appeared let's add in our row widget row children we have our image network selected video dot thumbnail url to show the thumbnail the height will be the player min height minus 4.0 and the reason we subtract 4.0 here is because if we don't and we just allow the image to appear we get an overflow error of 4 pixels and that's because the linear products indicator is 4 pixels by default so we need to minus 4.0 to make sure it fits the width will be 120.0 and fit is boxfit.cover [Music] next we're going to have some text here so the title text and then the author of the video because we need to truncate the text again this is going to be very similar to what we did for the title text and the video information text in the video cards so let's go there and then copy the expanded code [Music] go back to nav screen and we'll paste it right after this [Music] replace the video with selected video and again selected video is just from our selected video right here which we got from our consumer widget and then used watch to get the selected video provider state [Music] we can remove the rest of this here and we only want a max line of 1 for each of these so we don't actually need to define it because by default each text has a max line of one let's edit the style with text theme dot caption copy with font weight and this is going to be font weight 500 and the color will be colors dot white and then we can copy the font weight here and make sure the username matches [Music] let's wrap the column in a padding widget [Music] and that looks much better all we have left is to add our two icon buttons so the play and then the close icon icon button const icon icons dot play arrow and the onpress will be empty let's copy this and this one will be icons.close now for this on pressed when we click the x here we want our miniplayer to be dismissed so that means context.read selected video provider needs to have a state equal to null because we don't want any video to be selected and so if i save and click this we can see it disappears okay so now whenever the user taps on any one of these thumbnails we can see that the mini player gets updated accordingly ideally when the user taps on any one of these video cards it would expand into the video screen so that screen would look like this where the thumbnail would become full size with the video information and then the suggested videos down here to make the mini player expand a full height on tap we need to add a mini player controller and because we need to access this miniplayer controller on our video screen and our home screen we should access this mini player controller through a provider so at the top here we can make final mini player controller provider set this equal to state provider i've typed mini player controller mini player controller and this should be a lowercase p and we can tack on auto dispose here so it disposes of our miniplayer controller when it's no longer needed let's go down to our miniplayer and add the controller parameter and set that equal to mini player controller we'll define this variable right underneath selected video so a final mini player controller is equal to watch mini player controller provider dot state which is the miniplayer controller [Music] now what this means is we can go into our video card and whenever a user taps on a video we can do context.read mini player controller provider dot state and then call the method animate to height animate to height takes in a height a panel state and a duration we care about panel state let's define state and pass in panel state dot max which will make our miniplayer expand to the full height of our screen [Music] now if i hot restart the app and click on one of these thumbnails we can see the mini player expands to the entire height and it works for every single one one more thing we should add is some padding to the bottom of our list view because right now the mini player is actually blocking the text so inside our home screen let's wrap our sliver list in sliver padding with padding const edge insets dot only bottom and we'll set this to 60.0 and change child to sliver and now if we select one of these it looks a lot better when our miniplayer is fully expanded we want to show the video screen [Music] so let's make a new file called video screen dot dart and this will be a stateless widget for now called video screen the way we're going to be able to display the video screen when the mini player is expanding is by checking the current height of our video player here i'm going to check the height is less than or equal to our player min height which is 60 plus 50.0 and if it is then we'll show the miniplayer right here otherwise we actually want to show the video screen so if i save that and drag up we can see when i pass the point we just defined it turns into the video screen and then when i drag down it turns back into the miniplayer and this is all thanks to the builder because as we saw before whenever our mini player is being rebuilt our builder here is being triggered let's start working our way down our video screen first we're going to have our thumbnail and then we're also going to have an icon here that the user can tap to dismiss the video screen and down here we'll have the linear progress indicator [Music] let's go to our video screen [Music] and this will be a scaffold widget with body container color will be theme dot of context dot scaffold background color and the child of this will be a custom scroll view because in addition to all this information we also have a sliver list down here so the user can continuously scroll the entire screen let's set the shrink wrap to true and then start defining our servers we have a sliver to box adapter with the child and in order to get the information about the video we need to use a consumer widget so we can watch the selected video provider consumer builder and remember to import flutter river pod context watch and then we don't use the last widget here so that's an underscore [Music] we get the selected video watch selected video provider dot state then we can return a column widget where the first item in the column is going to be a stack widget image.network selected video thumbnail url height is 220.0 width is double dot infinity and the fit is box fit dot cover just like before to make sure our thumbnail doesn't collide with the status bar we can wrap our column in a safe area [Music] let's add the icon button in the top left icon button icon const icon icons dot keyboard arrow down we'll set the icon size to 30.0 then the onpressed is going to call context.read miniplayercontrollerprovider dot state so we get access to the miniplayer controller and then we can call animate to height but this time we set the panel state to min so now if i tap the icon we can see the panel shrinks down underneath our stack widget let's add the linear products indicator and because we wrote this before we can just go back to our nav screen and delete this block of code right here and paste it right underneath the stack [Music] now let's work on adding all this video information we're going to make a widget called videoinfo and we'll break it up into three parts so we'll have the text information up here then the row of actions and then the information about the author of the video let's make a new widget inside of the widgets folder called videoinfo.dart this is a stateless widget import material and this will take in a video generate the constructor and now if we go back to widgets.dart and we can export video info let's go to our video screen and right after our linear products indicator we can have video info and pass in the selected video let's start off with a column widget where we have text video title and the style is theme.ofcontext.texttheme [Music] bodytext1 copy with font size 15.0 after that we add some padding so content size box with a height of 8.0 and this will be text the view count so video dot view count views and then a bullet point so on mac that's option 8 and i'm not sure what that is on windows time ago dot format video dot timestamp and if you remember from before to get time ago we need to import the time go package as time ago the style will be theme.ofcontext.texttheme dot caption with copy with font size 14.0 and then to left align it we need to set the column's cross axis alignment to cross axis alignment dot start let's wrap the column in padding [Music] and we'll make this 16.0 next we're going to have a divider here and then our action row and then another divider underneath text we'll have const divider and we'll duplicate that and then we'll make a private widget called actions row that takes in the current video so underneath our video info let's make stateless actions row and again the underscore here makes it private so we can only access our actions row inside of this file this will take in a video so we can copy the code up here paste it down here actions row and if we take a closer look at our ui we can see each one of these icons and label are very similar so it makes sense to make a function that creates an action where we can just specify the icon and the label [Music] so this is going to be a row widget with children and we're going to make a function called build action this will take a context and then the icon so the first one is thumb up outlined and then the label so in this case it's the video likes let's make that four more times next we have video dislikes thumb down outlined then reply outlined the text here will be share this will be download with the download outlined icon and the last icon will be library add outlined save build action returns a widget takes in build context context icon data icon and string label [Music] we can return a gesture detector because we're not using an icon button for this and that's because we're not able to add a label to the icon button so child column children we have icon and we pass in the icon we're going to have a size box for some padding height 6.0 and then the text label so label with style theme dot of context dot text theme dot caption dot copy with colors dot white [Music] and let's set the column to have main access size main axis size min and in addition to that we can set the row to have main axis alignment main axis alignment space around and so that way they spread out and that looks perfect to wrap up our video info we can just work on adding the author information to the bottom of our video info let's make another private widget called author info this will take in a user and this is going to be a row widget so row children [Music] we first have our circle avatar with the foreground image network image user dot profile image url and if we go back up here we can add in the author info and pass in the video.author [Music] and let's add the other const divider after this we're going to show two text widgets and we want both these lines to have a max line of two and then truncate just like our video cards so let's go into our video card and take the expanded right here go back to video info and paste it right after circle avatar we'll change out the first one to user dot username and this one down here will be user dot subscribers subscribers we can add some padding between these two with const sized box with 8.0 and lastly we need to add our text button to the right side so text button on pressed child is a text widget with subscribe and then we'll style the text so theme dot of context dot text theme body text 1 copy with and we'll set the color to colors.red [Music] and i put the text button in the column when it should actually be inside the row so we can move that right after expanded and save that and now it's all the way on the right side the last thing we should do is wrap the row widget inside of a gesture detector because if a user was to tap this then we would want to navigate to the profile of the user and now we're all done with our video info to finish up the ui in our video screen we just need to add our server list and show the suggested options let's go into our video screen and we can close out a lot of these files here [Music] after our silver to box adapter and inside the custom scroll view we can add sliver list delegate sliver child builder delegate gives us back contacts in index we get the video from suggested videos index and then we can return a video card [Music] and pass in the video remember to set the child count to suggested videos dot length and now if we scroll here we can see each one of the cards it's important to note that each thumbnail has padding on the side if we compare it to the home screen we see that there's no padding on the side so in order to add padding here our video card needs to take in a has padding boolean so for this we'll set has padding and pass in true [Music] in the video card we'll take in final bool has padding and this will not be required so we'll set a default value of false to add padding to the image we can wrap our image here in padding and we'll do const edge insets.symmetric horizontal if has padding is true then we'll return 12.0 otherwise we'll turn zero because we don't want any padding on the home screen here remove const and then once we save this and then click into any one of these we can see we have padding now and that's great we should also fix the timestamp here so the position from the right should be has padding 20.0 otherwise 8. and that just moves the timestamp over a bit and now our ui looks spot on there's one more thing we have to fix though and that's when we select one of these video cards inside of our video screen when i try to select one of these cards and just tap the screen we can see the facebook clone is selected but we probably want the user to know that they selected it and scroll them back to the top to do this we need to add another variable on our video card and this will be avoid callback the idea here is that we're going to have an ontap which is actually nullable so this can be null and inside the gesture detector here we'll say if the ontap is defined by checking if it's not null then we'll call on tap and in order to call this we need to put an exclamation point to scroll to the top of the screen when the user taps on one of these cards we need to go back to the video screen and add a scroll controller this scroll controller is going to be attached to our custom scroll view and then when the user taps on the video card then we're going to have a function that gets triggered which accesses our scroll controller and calls the method animate2 and i'll leave this empty for now and we'll define this in a second so at the top here we need to convert this to a stateful widget create a scroll controller inside a net state let's make scroll controller equal to scroll controller and then don't forget the dispose method to dispose of it so if scroll controller is defined then we can just call scrollcontroller.dispose and then we need to attach the scrollcontroller to our custom scrollview by setting controller equal to scroll controller now down here we can call scrollcontroller.animate2 passing in the offset which will be 0 because we want to scroll to the top of the screen the duration is going to be concentration and we'll set this to 200 milliseconds and finally the curve is going to be curves dot ease in let's save and hot restart and now if i click on one of these and i scroll down when i tap on chat ui we can see the video screen scrolls to the top if i click any one of these it scrolls me back to the top and this allows the user to know which video selected instead of just selecting the video and then not letting them know that they selected a new video when the user taps on any part of the video info the miniplayer automatically shrinks down to the minimum size to prevent this from happening we can wrap our scaffold widget inside of the gesture detector and so this is going to override all taps on the video screen and we can just call context dot read access the miniplayer controller and call animate to height with state panel state dot max and so that way if i click into one of these and click around now the screen does not minimize we can only get out of the screen now by tapping the top left button and that's all for this video you just learned how to build youtube's user interface you learned how to create a sliver app bar a bottom navigation bar video cards and then we use the awesome miniplayer package to get this great animation when selecting a video you learned how to use riverpod to manage the state of our application and show the selected video if you're interested in expanding on this project and implementing the video player you should check out my netflix ui tutorial or my youtube api and video player tutorial which i'll link in the description or you can tap the cards in the top right i show you how to play youtube videos in both those videos if you enjoyed remember to leave a like comment and subscribe for full stack flutter firebase courses check out my courses on launchclub.io thanks for watching and i'll see you in the next one you

Channel: Marcus Ng

Views: 25,552

Keywords: youtube ui clone, flutter youtube video, youtube clone tutorial, flutter youtube ui tutorial, flutter youtube tutorial, flutter youtube app, flutter youtube guide, build youtube with flutter, flutter youtube ui, flutter build youtube, flutter 2 youtube, youtube clone using flutter, flutter build youtube tutorial, flutter youtube clone, youtube clone with flutter, flutter youtube app tutorial, flutter youtube channel, youtube flutter tutorial, flutter youtube api, youtube ui

Id: umhl2hakkcY

Length: 58min 11sec (3491 seconds)

Published: Fri Mar 26 2021

Reddit Comments

[u/MustafaAdam]

I cloned the repo and was actually surprised how the code doesn't look complicated. I'm terrible with ui design, so I was happy to learn that a ui like YouTube's is easy to write.

Good work man.