Adapt SwiftUI app for iPad, Landscape, and Dark Mode | Todo List #6

[Music] what's up everyone i'm nick this is swiffle thinking and so far in this course we have only run our app on an iphone in portrait mode in light mode and in this video we're going to make our app adaptable for all the different ways we might deploy it and that means we're going to make sure that our app looks good and runs well in portrait as well as landscape mode it runs well on the iphone as well as the ipad and it looks good in light mode as well as dark mode welcome back guys uh in this quick video we're just gonna do a little bit of cleanup we're just gonna run through our app and make sure it looks good in dark mode as well as on the ipad and in landscape mode now this is a very simple app so i don't think we're gonna have much to actually do but i wanted to just run through this process for those of you who have maybe never dealt with any of this before and this is one of your first apps so let's start by just running our app as is on the iphone use the iphone 12 and open it up on a simulator of course not in the preview and we're going to look at the colors first so the phone probably is going to be in light mode to begin with and we have our normal colors we have the purple going to maroon we have white backgrounds black text this all looks good if i go to the add screen again white backgrounds black text we have a gray text field which looks pretty good and a purple save button i don't think we have any issues here with the light mode but let's change our app here to go into dark mode so on the simulator i'm going to go to open these settings and in and in your settings on the simulator if you scroll down there should be a developer tab here so click open on the developer and then you can change the appearance there to dark mode so now the simulator should be in dark mode and let's open back up our app again and see what it looks like well immediately we can see that the background is now black which is good the text is white and that's because all of these texts are using the dot primary color and if you followed my swift ui boot camp you're well aware that the primary and the secondary colors are naturally dynamic so that they change between light and dark mode and this is good i do notice here that our colors the purple i can still see it but it is a little harder to read now that we are in dark mode because this is a dark purple on a black background so i think we should change that quickly so let's go into the assets.xc assets folder in the last video we set up our accent color and if i open up the inspector on the right side uh and i click on this color right now the appearances is none and that means we have a universal color so this accent color is universal gonna be dark purple so on light mode in dark mode no matter what mode it is it's going to be this dark purple but if we change the appearances we can add an any and dark and then we have a different appearance between any which is going to be our light mode and the dark mode so in the dark mode instead of having this dark purple i'm going to make it a little bit more of a lighter purple so that it's a little bit easier to read on this dark background so i'm going to click on the dark one i'm going to click on the show color panel and we're using this dark purple but i'm going to use maybe this lighter grape so i think that will be a little easier to read on the dark background i'm going to close that i'm going to do the same thing for the secondary accent color so click that i'm going to click on the color click on the appearances go to any and dark and in the dark mode let's click on show color panel and instead of this dark maroon i'm going to use this strawberry which is a little brighter a little easier to see in dark mode i'm going to just stop the preview press play on the simulator again and when it builds it should be in dark mode already but but the color should be our new dark mode colors so in dark mode i have this brighter purple which i think looks a little bit better and the secondary accent color is this brighter pink which actually looks awesome and now our colors are dynamic so if we switch back to light mode we're going to use that those starting colors and if we go back to dark mode we're going to use these new colors so this this is looking pretty cool let's go to the add tab to make sure that it looks good as well and there's only one issue i see here and it's that the placeholder in the dark mode has changed colors so we can't see the text right here that normally says uh add something here or whatever we put as the placeholder so let's just customize the background color on this really quickly so i'm going to jump into the add view so the background right now is this color literal that we added but let's use a dynamic color that will change and if you follow my swifty by boot camp you are also aware of some of the ui colors that we can import into swift ui and there are some ui colors that are dynamic like the primary and secondary colors like this text up here so we're going to use one of those instead of using this color literal so let's just delete this color literal delete this on the background and i'm going to call color open the parentheses and i'm going to type a ui color dot and then there's a bunch of ui colors that we can use here we have our regular colors as well as if we start typing in a system we'll see there's a bunch of system colors as well and we're going to look for the secondary system background and all these system colors are automatically dynamic so they will change between light and dark mode and now if we use the secondary system background i think it's going to look a little better let's press uh play on the simulator one more time see what it looks like and i'm gonna go to the ad this looks good i like this nice kind of grayish background we can see type something here still if we type it should say hello it's white text that looks good uh let's switch back to light mode just to make sure this new color still looks good in light mode and it does we have black text we have our gray background and it's looking great we're running this on a simulator i enjoy doing it on a simulator once we're like kind of finished with our app but just so you guys do know we can always open up the canvas and click resume on the canvas and the canvas right now is in light mode but we can change it by clicking this little computer thing here and changing the color scheme to dark mode so automatically change our canvas to dark mode if we scroll down on this project to the preview section we can see that the preferred color scheme is now dark and if we really wanted to we could add two different simulators here we could add a group open the brackets and i'm going to cut this navigation view and just paste it twice inside this group and this and the first one i'll make a light and second one i'll make dark and now we can see back to back we have our light mode on the right and if i scroll down we have our dark mode so if we didn't want to run the simulator and we had a lot of things to edit i would do it like this in our preview where we can check light and dark mode really quickly just for this screen but of course we didn't have much to do so using the simulator was fine it was easier and i think we're done with light and dark mode all right so this all looks great let's put it back in a dark mode just because we spent the entire video in light mode and dark mode looks really cool i think i think this looks awesome while we're here let's check this out by running it on landscape so we can just click this little button here to rotate the device and automatically we are rotated there wasn't much we had to do here um because when we formatted our screens we used things like max with we didn't set specific widths and our device automatically adjusted to be horizontal one thing i do want to change is that this whole no items area looks like it's maybe a little bit too wide for my liking so let's just limit the width on this no items area so i'm going to open up the no items view and maybe on the v stack yeah on the v stack right before the multi-line text alignment let's just do dot frame and let's give it a max width of maybe uh 400 i think would be good so when the device is in a portrait mode the width is about 350 or something like that and when it's in landscape obviously this is much wider but by setting a max width we can always just limit it when it is landscape or when it is on a larger device as well so if i press play one more time run it on this horizontal it should be a little bit in now and this looks a little bit better let's add an item make sure it looks good we'll say new item save and our new item shows up let's do one more another one save this is looking good it's all working we can go into edit mode and i don't see any other issues here so this is looking good on landscape let's put it back to portrait i'm going to close this simulator because it looks good on the iphone and the last thing i want to do in this video is check it on the ipad let's open up the ipad so i'm going to change so i'm going to change the simulator up here from iphone 12 and i'm going to pick the iphone ipad pro 12.9 inch because it is the biggest so it will probably better test on that one and let's run the simulator one more time i'm going to pause the video quick because uh the fan is going crazy so i'll be right back so with the ipad pro selected let's press run on the simulator i don't think there's going to be much that we have to do here it should open up a new simulator let's do it in portrait mode first and when it loads uh we do have one little issue here because it did finish loading and we can't see anything and if i click on the back button it looks like the navigation view is adding our navigation on the left side and this is because on ipads and larger devices the navigation view has a different style by default and that style has this sidebar so we could have kind of tabs here and when we click these tabs it can open up other screens and we could still have that tab bar on the left side so this is a really cool ipad feature but it does not look good for what we're doing here of course so this is really easy to fix we're gonna jump into our to-do list app.swift file which is where we have our navigation view and on the navigation view we're just gonna very simply add dot navigation view style and then we're gonna start typing in navigation view style and here you can see a couple of the different styles and you can play around with these on your own time but stack navigation view style is the standard style where it's just one screen in front of the other so that's what we want we're gonna do stack navigation view style open and close the parentheses and let's run it one more time on the ipad and you will now see our app the way we wanted to see it and we have our first screen and we click add something we go to our second screen this all looks good i can type in hello let's add something this looks good to me and one thing you'll probably notice is that our no items view is still limited with that max width so instead of going to the full screen of the app because we added that that max width a couple minutes ago this now also is max width on our ipad as well which looks great let's lastly just rotate it horizontally make sure it still looks good and it does look good to me and that's pretty much it for this video we didn't do too much obviously because our app is so simple but we made sure it looks good in light and dark mode we adjusted some of the colors for dark mode we checked out our app in landscape as well as portrait in case the user wants to turn their device and then we checked it on ipad just to make sure it still looks good we updated the navigation view so that it's the correct style and now our app is pretty much ready to go so thank you guys for watching we have one more quick video before we finish this app but it's looking great you guys are doing awesome thank you for watching as always i'm nick this is swiffle thinking and i'll see you in the next video you

Channel: Swiftful Thinking

Views: 2,743

Keywords: Learn SwiftUI, SwiftUI todo list, SwiftUI to do list, SwiftUI app, SwiftUI build an app, SwiftUI MVVM, SwiftUI app tutorial, SwiftUI iPad, SwiftUI landscape, SwiftUI landscape mode, SwiftUI dark mode, SwiftUI darkmode, SwiftUI app with DarkMode, swiftUI app with Dark Model, SwiftUI how to use MVVM, SwiftUI what is MVVM, SwiftUI update for iPad, SwiftUI update for Dark Mode, SwiftUI update for Landscape, SwiftUI build todo list, SwiftUI build app with MVVM, SwiftUI MVVM app

Id: D3T2PQALJOs

Length: 13min 35sec (815 seconds)

Published: Fri Mar 19 2021