Flutter Spotify Clone Desktop/Web UI | Apps From Scratch

hey everyone welcome back to apps from scratch today i'm going to teach you how to build spotify's user interface for desktop and web with flutter it's super easy to develop responsive apps that work across different platforms users will be able to select tracks and our ui updates accordingly we'll use provider to share state throughout our application and keep track of the currently selected song 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 launchclub.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 once you open up the project you'll see i made some modifications to main.dart inside my app i've set the title to flutter spotify ui i've hidden the debug banner by setting it to false and then i've also defined a dark theme brightness is set to brightness.dark i've defined an app bar theme scaffold background color background color primary color and accent color and you can see what all these colors are by looking to the left of each line number and seeing the color there the icon theme is set to white and i've also defined the font family as montserrat inside the fonts folder i've added the bold medium regular and semi-bold versions of the font next i've defined some text themes headline two headline four body text one and body text two and using these throughout the app will allow us to keep a consistent styling finally the home is set to scaffold for now let's go into data.dart and here you can see we have all of our mock data that we're going to be using to populate our app first we have your library and playlists which are both lists of strings if we take a look at the ui you can see that our your library populates the text here and the playlists populate the text down here underneath this i defined a song class and each song has an id title artist album and duration we have a private list of lo-fi hip-hop music because that's the playlist we're going to be showing and this is a list of songs and if we scroll down here we can see there's a playlist class that has a bunch of different attributes and a list of songs we're using the list of songs here which is set to the private list of lofi hip-hop music in order to populate the music in this playlist let's move on to our pub spec i've set the environment to at least 2.12.0 so no safety is enabled in this project we're only going to be using two packages desktop window and provider desktop window allows us to set a minimum and maximum size for our desktop application and so that way we can avoid overflow errors by setting a minimum size to our desktop window and we're using provider in this app so we're able to know what the current song is here you can see the current song is healthy distraction and it actually shows up down here too and so whenever the user clicks on a different song we're able to display that in the widget down here in the assets section i'm importing the entire assets folder and this just has the lo-fi girl jpeg and the spotify logo and then for fonts we define monsterat and then for each font weight regular medium semi-bold and bold i've defined the weight for each one the first thing we're going to do is create the shell of our application this shell is going to contain all the widgets in our app it's going to be a column widget with a row widget and the first child in the row widgets will be the side menu and the second child will be an expanded playlist screen down here is going to be the current song widget and this will have a fixed height let's go into main.dart and at the bottom here let's replace home with shell and we can define this underneath we'll use a stateless widget called shell and this will be a scaffold with a body of column and here we're going to have an expanded row where the first child is going to be a container and the width will be 280.0 we'll set the color to colors.green and the height will be double dot infinity [Music] to the right of the container we want to have a playlist screen and we'll add this later on and at the bottom of our column we want to have a container here with a height of 84.0 the width set to double dot infinity so it directs us to the entire width of the screen and the color will set this to blue for now let's take a look at our ui and you can clearly see on the left side we have the side menu on the right we're going to have our playlist and then underneath we're going to be showing what the current song is next let's deal with setting a minimum size for our desktop app because right now you're able to make this as small as you want and you can see already we get an overflow error at the top of our main function we first want to make sure widget's flutter binding is initialized and so that way we're able to access our packages here we can just write desktop window dot set minimum window size and the size here is going to be a minimum of 600 for the width and the height will be a maximum of 800. if we hover over set min window size we can see it's a future which means that we need to await this and main needs to be asynchronous and so now if we save that terminate the debugging session and then relaunch the app you can see when we try to make this smaller it gets stuck right here and we're no longer able to make this as small as we want one more thing we have to do here to make sure that this line does not crash our application when we run it on the web is to put an if statement and check if k is web and so if k is not web and the platform is mac os platform dot is linux or platform dot is windows then we want to call this and so if there's an error here saying that you can't call is mac os as linux or is windows make sure that you're not importing dart html and instead you're importing dart i o the reason we just can't check if the platform is mac os linux or windows is because if we run this on web and the application tries to access platform it ends up crashing and so that's why it's important to put this first where we first check if the platform is not web and so far on desktop we're able to run this without any problems let's work on our side menu this is going to be a container that has a color of black we're going to have the spotify logo up here and then some list tiles for the home search and radio buttons and then down here we're going to have a scroll controller so we can get the scroll bar on the right side and the user can scroll up and down to see all the playlists inside the shell i'm going to cut out this container and i'm just going to write side menu this widget will be created inside of a new folder called widgets side menu dot dart let's make a barrel file called widgets.dart and this will export the side menu and this will allow us to clean up our import statements because it lets us import only the widgets.dart file whenever we are using multiple widgets from this folder side menu is a stateless widget called side menu import material and we can paste in what we just cut back in main.dart let's import this and now we can see that there is no change to our ui instead of setting the color to green let's use our primary color by accessing our theme and setting it to primary color the tile is going to be a column widget where the first child is an image asset and we want this to access the spotify logo and so that's in the assets folder spotify logo.png and that's looking really big so we can make it smaller by setting the height to 55.0 and that's better but it is a bit blurry and to fix the blurriness on desktop all we have to do is set the filter quality to filter quality high and now that looks a lot sharper we can add padding to our image and set this to 16.0 and then to align the image to the left side i'm going to wrap this in a row widget and so now spotify is in the position it should be in next up let's add the list tiles for our home search and radio underneath the row widget here we can create a list tile and this will have a set to text and we'll put home here for now [Music] the style will be theme dot of context dot text theme dot body text one and we'll also set overflow to text overflow ellipsis so in the event the side menu becomes too small the text will overflow and we'll see the dot dot leading is going to be the icon so icon icons.home color is theme.ofcontext.icontheme.color which is the white color and then size will be 28.0 and now let's look at that and we can see that looks good since we're going to have to do this two more times for our search and radio we can extract this widget out into its own widget write in command period and clicking extract widget and we'll name this widget side menu icon tab and now this is going to take in a final icon data icon data final string title and then a void callback on tap let's make all these required and don't forget this dot and now down here we can change the icon out for icon data the home text will be title and then on tap will just be on tap back in the side menu we can add the title here home the leading icon which is from the icon data will be icons.home and on top we'll leave it empty let's copy this two more times and the next one will be a search icon with the title search and this next tab is radio so icons.audio track radio and let's look at that we now have our home search and radio list tiles this next widget is going to be called library playlists and we'll create it as a private widget inside of our side menu file underneath the side menu icon tab let's add a size box for some spacing height of 12.0 and then we'll create our library playlists [Music] this is going to be a stateful widget called library playlists and instead of returning a container we want to return a list view padding will be set to edge insets dot symmetric vertical 12.0 physics will be set to const clamping scroll physics and so that way when the user scrolls it'll stop immediately when it hits the top or bottom of the list we don't want the bouncing effect children we have another column and this will be the your library text and then underneath that will be the list of your library options text your library style will be theme.ofcontext.txtheme headline4 overflow remember to set that to text overflow.ellipsis and we can wrap this in some padding set to symmetric horizontal 16.0 and vertical 8.0 [Music] underneath this we can make the list right here and so that's going to be using the spreader operator and we're going to map the your library which is imported from data.dart your library is just the strings we need and we can map this into the list tiles we need so list tile we'll make it dense set to true the title will be text e style will be theme dot of context dot text theme dot body text two and overflow will be set to text overflow.ellipsis and ontap we'll set them all to an empty anonymous function for now and we need to remember to call dot to list so this is going to be a list of list tiles and when we save that and look at our ui we can see we're getting an error because our side menu disappeared and that's because right now we didn't define a maximum height for the list view and so we need to wrap this and expanded and let's hop restart and now we see we have your library and all the different options we can make your library left aligned by setting the column's cross axis alignment to cross axisalignment.start and that looks good now let's do the same thing for our playlists so here i'm going to copy the column we'll add a size box for padding again 24.0 and then paste this underneath instead of your library we wanted to say playlists and then instead of accessing your library we can just put playlists and let's save that and take a look and now i'm able to scroll down and see our playlists one more thing we have to add is our scroll bar on the right side and to do that we need to wrap our list view inside of a scroll bar we'll make it always shown and then we need to set a controller so this controller is going to be a scroll controller scroll controller we need to initialize it scroll controller is equal to scroll controller and remember to put a question mark here so we let flutter know that this is knowable and then don't forget to dispose it scroll controller dispose by setting a controller for the scroll bar and the list view the scroll bar will know how far it has to scroll down so scroll controller and the list view needs a scroll controller we can save that hot restart the app and now we have our scroll bar and we can hold down on it and drag or just scroll normally and now our side menu is all done for our playlist screen this is going to be a stateful widget because we need to keep track of the scroll position so we can show the scroll bar on the right side it's going to have an app bar at the top and then a playlist header showing the information about the playlist some buttons and some more information about the playlist and below this we're going to have a table that displays all the different tracks let's start by making the state widget and dealing with the app bar inside main.dart let's uncomment the playlist screen [Music] and we're going to make a new file inside of a folder called screens playlist screen.dart this is stateful and import material back in main.dart we can import the screen now this playlist screen needs to take in a widget for the selected playlist and to make this simple let's just pass it in playlist playlist import data.dart and we can generate the constructor instead of returning a container we can return a scaffold widget that has an app bar [Music] and in main.dart we can pass in the playlist that we created inside data.org and so that's the lo-fi hip-hop playlist you can see right now we're getting an overflow error on the right side and to fix that we need to wrap our playlist screen inside of an expanded widget and now that looks a lot better i just realized before we make the app bar we probably should add the gradient background first so we're able to see the items in our app are easier inside the playlist screen let's add a body and this is going to be a container with with double dot infinity it has a decoration box decoration with a gradient linear gradient it begins at the top center so alignment.top center and it ends at alignment dot bottom center [Music] for the colors the first color is going to be the red color which will be color 0xff af1018 and the theme will be them.of context dot background color and now we have our nice gradient the app bar needs to have a background color of colors.transparent so the red's able to go underneath the app bar elevation will be set to zero to get rid of the drop shadow and if we save that and look at our app again we see that we just have a black bar at the top and that's because right now our body is not going beneath our app bar it shows the app bar on top and then the body is right underneath the app bar widget so we need to set a property on the scaffold called extend body behind appbar to true and now that fixes the issue you can also see here that the gradient only goes for the first third of the screen and so we can set the stops property on our gradient to 0 to 0.3 and now that matches the ui a lot more from here we should add the forward and back buttons and this is going to be the leading widget of the app bar so here we can set leading to a row widget and each button is going to be an equal widget with a custom border of const circle border and that's built into flutter on top we'll set to an empty function and then the child will be a container with padding const edge insets dot all 6.0 decoration will be box decoration with color colors.block 26 and the shape will be box shape dot circle this can also be constant and finally the child is going to be icon icons.chevron left size 28.0 and the icon is also constant and this is our first button let's wrap the row in a padding widget to add some spacing and we can set this to symmetric horizontal 16.0 and we see in the bottom right here that we have an overflow error and that's because the app bar has a default leading width we need to modify that leading width and add enough space for our buttons so we'll set the leading width to 140.0 and that fixes the issue from here we need to add the other button so content size box with 16.0 for more spacing and then we can copy the equal widget and change this to chevron right and save that and lastly we should set the main axis alignment of our row to main axis alignment dot center and that looks perfect the right side here is going to be a text button with an icon and then an icon button with a keyboard down arrow for this we need to set the actions of the app bar text button dot icon on pressed will be empty icon will be icon dot account circle outlined and we should set the size to 30.0 make this constant for the label i'm going to put my name and you can put your own name here if you want and let's see how that looks so the button is too far on the right side and right now it's tinted blue so we need to set the style of our text button by setting text button dot style from and then we set primary to theme.of context dot icon theme dot color and that fixes the color problem in order to move this over to the left a bit we can just add a size box here with a width of 8.0 and then we can add our icon button that's going to automatically have some padding so the icon will be const icon icons dot keyboard arrow down size will be 30.0 and for the unpressed this will be empty and this looks okay but we need some more spacing so after this we can add another size box with 20.0 and now when i click on this icon button we can see it's a little off centered and that's because of the padding it has already so to remove the padding on the icon button we can set it to const edge insets dot only because they all default to zero and so now if we look again we can see the icon is centered now let's add a list view with a scroll bar on the right side the child of our container is going to be a scroll bar and we always want to show so is always shown will be set to true and the controller will be set to scroll controller and we'll define this in a second child will be a list view with controller padding will be const edge insets dot symmetric horizontal 20.0 and vertical 60.0 [Music] and then we'll have children we can define the scroll controller on top scroll a controller make it nullable and then inside a net state we can set the scroll controller equal to a new scroll controller and in dispose we can make sure we dispose the scroll controller when the widget is disposed of remember to hot restart the app because we added a new state variable and now inside the children we're going to make a widget called playlist header that takes in a playlist and this playlist is from our widget.playlist because we passed it into our playlist screen let's create the playlist header inside of the widgets folder playlist header.dart this is stateless playlist header and import material it takes in a playlist import data.dart so we have access to the class and generate the constructor now in widgets.dart we can export the playlist header which means in the playlist screen we can now import widgets.dart the playlist header is going to be a column widget where the first child in the column is the row widget that contains an image and then information about the playlist underneath it we have some buttons and some more information about the playlist let's deal with this row widget first let's change the container to a row widget [Music] where we have image.asset playlist dot image url and if we go into image url we can see down here i've defined it as assets lofi girl.jpg and that's where the file is located height will be set to 200.0 and the width will be 200.0 so this is a square and then the fit will be boxfit.cover we need to add some spacing to the right of this with a size box and then we'll have an expanded column widget so the text will be able to expand to the entire right side of the screen [Music] and to left align all the text we can set the cross axis alignment to cross axis alignment dot start the first text widget we're going to have is playlist then we'll have the title of the playlist description and then created by the creator of the playlist some information about how many songs there are and how long it is text playlist style will be theme dot of context dot text theme dot overline and then we need to call copy with on this to set the font size to a comfortable 12.0 underneath that we'll add a size box for spacing gun height 12.0 and then we need to show the playlist name so select playlist.name style theme.ofcontext.texttheme dot headline 2 another size box and this one will be 16.0 text playlist.description style theme.ofcontext.texttheme dot subtitle 1. and you can see how using these text themes really speeds up the styling of text and makes a lot easier to keep a consistent styling across our app below this we'll have another size box with a height of 16.0 and finally we have the created by text so created by playlist.creator and then i'm going to put a bullet point here and on mac i can do that with option 8 playlist dot songs dot length for the number of songs and then we want the duration which in our case is on the playlist object as a string now the style is going to be themed.ofcontext.texttheme and this will also be subtitle 1. and now this looks exactly right underneath our playlist information we want to display the buttons here and so this is going to be spaced out a bit with the size box again but this time it'll be 20.0 and then we'll make a widget called playlist buttons and then we also need to pass in the number of followers with playlist followers this will be a status widget called playlist buttons and this is private to this file final string followers let's generate the constructor and here we're going to have a row widget children text button style will be text button dot style from [Music] padding will set to const edge insets.symmetric horizontal 48.0 vertical 20.0 [Music] the shape will be a rounded rectangular border border radius border radius dot circular 20.0 and we can set the background color to the green color which is our accent color primary which is the color of our text will be theme.ofcontext.icontheme.color and i'm using the icon theme here because it's white in this case and finally the text style can be text theme.ofcontext.txtheme caption and we're going to call copy with so we can set the font size to 12.0 and letter spacing to 2.0 don't forget to add an unpressed and set the child to a text widget that says play and that was a lot of styling but now we have our play button now one thing i did wrong here was i put the play button underneath the text and we actually want to be underneath the entire row here so to do that let's cut out our size box and playlist buttons and we want to wrap the row widget inside of a column and now underneath the row widget we can paste that back hit save and that looks a lot better now we just have to add our two icon buttons and the follower text after the text button we'll add spacing with a size box icon button number one we'll have a const icon icon's favorite border on pressed and we'll set the icon size to 30.0 the next icon button is going to be icons dot more horizontal icon size is 30 and on presses empty now to add the spacing between the icon buttons here and the followers we need to add a spacer and so we can do const spacer and then we put the text here followers new line and then we use the dollar sign to interpolate followers into the text style will be theme.ofcontext.texttheme dot line copy with font size 12.0 and then we can align this to the right with text align text line dot write and this matches up with our ui you can see when we make this smaller the text just moves to the next line and that's good now we need to add our songs table or our track list to show all the different tracks in the playlist so inside the playlist screen underneath the playlist header we can make our tracks list this will take in the tracks widget dot playlist dot songs and let's make a new widget called tracks list dot dart stateless tracks list import material and now inside widgets.dart we can export our tracks list this needs to take in a list of songs we'll call this tracks import data.dart and generate the constructor and now that fixes the error in here because we're taking in a list of songs our tracks list is going to use the data table widget and our data table needs columns and rows our columns are going to be data columns and each data column will be the heading for our column so first we have text title then we have artist album and then we want an icon for the duration of the song so icon icons dot access time and remember to add some commas we can make this constant because all the data columns are constant and now if we save that and look at our ui again we can see we have title artist album and the icon to display the tracks in our rows we can do tracks dot map where e is a song and we want to make each song into a data row so let's return data row with cells and each cell is going to be a different column so the first one we need is the title of the song so data cell will be text e.title style will be theme dot of context dot icon theme dot color which is white and we need to put dot to list at the bottom here and for the style here i've wrapped up a text style color [Music] now for the next three rows we can just copy that three more times but instead of title we're going to put artist then we'll have e dot album and e dot duration and now if we save that and look at our app we now have all the different tracks in our playlist and when i hover over any of the tracks we can see we have the nice highlight our next goal is to handle tapping on the tracks list and selecting a new track and so whenever a user taps on a new track we want it to light up with the green color and be highlighted because we need to access the currently selected song throughout our entire application we can't just use set state and scope it to our track list we need to make a model called current song model that contains our current song that we selected whenever the user taps on a track here it's going to update our model and all the widgets that rely on the state of the model will update accordingly and so inside our lib directory let's make a new folder called models and we're going to call this current track dot dart this will be class current track model extends change notifier and this has a song that can be null because when the user first launches the app they're not going to have a track selected import data.dart and we're only going to have one method here which is void called select song or select track whatever you prefer song track selected is equal to track and then we call notify listeners to update the ui and i realized that i called this current track and this should probably be current track model dot dart now in order to access this data throughout our entire application we need to go to main.dart and wrap the run app my app in something called a change notifier provider and this is from the provider package it allows us to create the model here context and the instance will be current track model and so now if we go into our tracks list and look at our track stop map we're actually able to tell which track is selected by making a boolean called selected and then doing context dot read and in order to do this we need to import provider and here we can just write current track model [Music] dot and we can see here we have access to selected and so if the selected dot id is equal to the current id of the track we're looking at then that means it's selected and so the property id cannot be unconditionally accessed because the receiver can be null so we need to put a question mark before selected so in the event selected as null then this whole left side here is going to be null so let's save that and the text style will be based on this variable so if it is selected then we want to set the text style to color theme dot of context dot accent color which is green and let's actually put the selected inside here because we only want to change the color otherwise we want to be the icon theme so cut that out paste it right here let's save that and set all these styles to textile and a couple more things we have to do is set the selected property of our data row equal to selected and the on select changed will give us back a boolean but we don't actually care about the boolean what we care about is that the data row is tapped and so we know that we can then call context.read current track model and then call the select track method selecting the track we just tapped and so now if we save that hot restart the app and to remove that selected box we can set show checkbox column to false let's also set the data row height to 54.0 to add some more spacing between each track and the headings text style will be theme dot of context.text theme dot over line copy with font size 12.0 and now that's good so when the user taps on one of these we can see nothing happens but we are selecting the track down here on unselected change and the reason this happens is because when we called selected we did context.read that means this is only going to update the ui the very first time this tracks list is created we want the textile to change whenever we select a new song and so we need to change context.read here to context.watch and so that way whenever there's a new change or an update to our current track model and it calls that notify listeners it's going to rerun the code here and recreate our data row and so now if we save that and we can see when we click the song is updated accordingly and we can see which song is selected the final ps3 ui is this current track bar down here we need to display the current track that's being played information about the track such as the duration and then some more controls over here inside main.dart let's go down to our shell and underneath the expanded widget we have our container here we can cut this out and return a current track widget and this doesn't need to take in any variables because we're able to access the current track by going through the context to get our current track model inside widgets we will make a new widget called currenttrack.dart this will be stateless current track import material and we can paste this in let's go into widgets and export the current track and now the error inside main.dart disappeared let's work through this widget left to right so the first thing we need to work on is adding the image with the two text widgets and the icon button the child of the container is going to be a padding widget with padding const edge insets dot all 12.0 the child will be a row widget and this is going to be a widget called track info this is stateless track info and the first thing we need to do is get the information about the track so final selected is equal to context.watch current track model dot selected and in order to use watch we need to remember to import provider [Music] if selected is equal to null then we can return a const size to box dot shrink because we wouldn't want to show any data here if no track is selected return a row widget where the first child is an image.asset and normally you would put the album artwork here but for the sake of this tutorial i'm going to put the lo-fi girl so assets lofigirl.jpg height will be 60.0 width will be 60.0 and fit boxfit.cover to the right of this we need to add padding so const size box with 12.0 and then we'll have a column widget for the two text widgets first up we have the text of the selected title the style will be theme.ofcontext.text bodytext1 and then we need to add more padding for the vertical so height 4.0 text is the selected dot artist style theme dot of context dot text theme dot subtitle one dot copy with color colors dot gray 300 and the font size is set to 12.0 and so now if we save that and save it in main.art we can see the track now appears so we have the lo-fi girl right here and the healthy distraction less people if i click on a new track we can see it updates accordingly let's center the text and left align it so the column will have cross axe alignment start and main axe alignment center and don't forget to change the color of our current track to colors.block 87 and that looks a lot better now we just need to add the button here so that's going to be an icon button with icon const icon icons.favorite border on pressed will be an empty [Music] function [Music] let's add the player controls next and this is going to be inside of a column widget because we want to show the timestamps underneath this is going to be player controls and this is a stateless widget player controls the first thing we do is we need to get the selected track so copy that and go down here change out the container to a column widget we have a row widget and this is going to hold all of our different controls [Music] icon button padding will be const edge insets dot only icon size is 20.0 and the icon is const icon icons.shuffle and unpressed is an empty anonymous function let's copy this four more times this next one will be skip previous outlined [Music] then we have play circle outlined and then skip next outlined and then finally repeat the icon size for our play circle will be 34 because in the ui it's a little bit bigger and now underneath the row widget we can add spacing for the size box height 4.0 and then we'll have another row widget so the left side is going to be the timestamp of zero zero style theme dot of context dot text theme dot caption then we'll add another con size box but this time it's going to be width 8.0 and here we have a container with a height of 5.0 the width will be based on the current width of the screen so we need to use media query dot of context dot size dot with [Music] multiplied by 0.3 and this means that this container is always going to have a width equal to 30 percent of the screen decoration will be a box decoration color colors.gray 800 and the border radius will be border radius.circular 2.5 so we have perfectly round corners after the second size box we can show the other duration but we need to make sure that it's not null so we check select a duration if it's null then we want it to be zero zero and the style will be again theme.ofcontext.texttheme.caption for consistency and let's take a look at that right now we have arizona zero selected and so the time on the right side we can see is 231 and when i click everything updates accordingly to add spacing between them we can add a spacer between the track info and the player controls and we should add an extra one after player controls two and i saw in the track info we do need to add one more con size box for spacing right before the icon button and that's a width of 12.0 and now that's good the last widget we have is going to be more controls [Music] and these controls are the devices the volume icon with the slider and the full screen icon more controls is a stateless widget called more controls and it builds a row widget we have our icon button icon is const icon icons.devices outlined the icon size is 20.0 and onpressed is empty and we need to add another row widget so we can have the volume icon with the slider so icon button icon is const icon icons.volume up outlined on pressed and then we have our container with a height of 5.0 a width of 70.0 and the decoration will be a box decoration color colors.gray800 and the border radius is border radius.circular two 2.5 and the last icon we need we can just copy this and put it right down here this is going to be the full screen icon so full screen outlined and we don't need an icon size for this so let's save and check that out and this is looking great we have all our icons the spacing is correct and we're able to select the different tracks one more thing we need to check is what happens if we hot restart the app and no song is selected and so we just see zero zero nothing's on the left side and the right side is still here once i select a song everything updates accordingly one more thing we should double check is the responsiveness of our application when i make this smaller we can see it looks fine when it becomes too small we start getting render overflow errors at the top and the bottom and so to deal with the track list first we can see the more controls are overflowing and so what we want to do is inside the current track widget let's add an if statement here to check if context dot mediaquery.ofcontext.com dot with is greater than 800 and if it is then we will display the controls here so if i save that and we take another look we can see when this becomes smaller the more controls disappears right here and so the bottom here is not overflowing anymore now to handle the playlist screen what we want to do is hide the side menu when the width of the screen becomes too small and so let's copy this if statement go into main.dart and then right above the side menu we can paste in the if statement and so the side menu will only be visible if the current screen size is greater than 800 pixels and so now if we look and we make this big again it looks really good we make it smaller it's getting a bit more cramped but right at 800 pixels the side menu disappears and you can still read anything without any issues and now we're all done with our spotify ui if you enjoyed remember to leave a like and subscribe and check out my full flutter and firebase courses on launchclub.io thanks for watching and i'll see you in the next one [Music]

Channel: Marcus Ng

Views: 53,894

Keywords: flutter desktop spotify ui clone, flutter web spotify ui clone, flutter spotify clone, flutter apps from scratch, flutter web app tutorial, flutter web tutorial, flutter web ui, flutter desktop app tutorial, flutter music player ui, flutter desktop, spotify using flutter, flutter web, flutter desktop app, flutter spotify ui, spotify ui clone flutter, flutter spotify tutorial, spotify clone flutter, flutter spotify desktop, flutter spotify web, Flutter spotify ui tutorial

Id: HJ1AlSrgZVQ

Length: 60min 38sec (3638 seconds)

Published: Fri Apr 30 2021

Reddit Comments

[u/JARVIS_1]

i will use it for sure