Create a List of Todo items in SwiftUI | Todo List #1

[Music] welcome back everyone i'm nick this is swiffle thinking and as i mentioned we're going to build this to-do list app with mvvm architecture and that stands for model view view model now it's okay if you don't know what any of that means yet but the first v in mvvm stands for views and that's what we're going to build in this video so in the views should be all of the ui logic in your app so anything relating to a screen or a component that a user is actually touching that goes into the view and in this video we're going to build the two main views in our app which the first few is going to hold a list of to do items because this is a to-do list app and the second view is going to have a little area where we can actually type something in and add a new item to our to-do list so this is going to be one of the easier videos in the course because it is so straightforward we're just adding swift ui components to the screen and by the end of this video you'll have a good idea of what our app is going to look like so that's enough of me talking let's get coding all right so i am on my computer here and i'm gonna open up xcode if you don't have xcode on your computer and you don't know what xcode is i highly recommend going to check out the swift ui bootcamp which is another series i have on my youtube channel and in the first couple of videos of that series we downloaded xcode installed it and then went through some of the basics and how to use it so if you're taking this course i'm going to assume you already have the basics of xcode down because i did provide that in the swift ui bootcamp and with that said i'm going to be using version 12.3 for this course now it's not crucial that you have the most updated version of xcode but i would recommend using version 12.0 or higher and let's get started by creating a new xcode project it's going to ask us what type of project we want to create and this is going to be a fairly simple app so we're just going to use a regular app and we're going to make sure that it's on the ios tab because we're going to build our app just for the iphone and ipad which is ios we're not going to do mac watch or tv in this video so regular ios regular app double click it or click next then it's going to ask you for a product name and this is just the name of your app i'm going to call it to do list in camel case and i find it best practice to not include spaces in the product name so i'm doing to-do list but i'm making it one word with no spaces your team if you have a apple developer account or a professional developer account that will be up in the team here it's not crucial that you have one so it's okay if it says none and then the organization identifier again not super important because we're not putting this into the app store but it is best practice to use com dot and then either your name or the name of your company or your organization whatever you want to call it and then it will create a bundle identifier for this project was just a unique key for this project and so it's going to be your organization identifier dot your product name the important thing on this screen is that we are using a swift ui interface we are using a swift ui app life cycle and the language of course is swift in this project we are not going to use core data and we are not going to use tests so you can uncheck these if they are checked and let's go ahead and click next go ahead and find the folder where you want to save it on your computer and go ahead and click create and now that we're in our project i'm going to make it full screen so you guys could see it a little bit better and let's click resume on the canvas so we know we're all connected i'm going to hide the inspector on the right side because we're not going to use it and this should be nothing new to you guys xcode starts us with a project a very simple project where we have our our app.swift file and a content view now as i mentioned we're going to use mvvm architecture in this app so before we do any coding i want to just quickly run through what that means if you are unfamiliar so i'm going to jump into the app to to-do list app.swift file and we're going to leave some quick comments so i'm going to do a multi-line comment with the backslash and asterix and we're just going to write mvvm architecture and the first m stands for model and model is a data point basically the v is a view and this is the ui of our app and then the vm is view model and this is the observable object or the class that manages the models or the data for the view so manages models for view and there are a ton of resources online if you just google mvvm architecture or what is mvvm that will go into detail about what this is so i'm not going to dive into detail because there is stuff out there but on a very basic level the model are the data points the view is the actual ui components the swift ui code the view model ties it all together this is where all of our data is managed so with that said we're going to start building this out and the first thing we're going to tackle is the view so right now on the left side in the project navigator let's right click it let's create a new group and we're going to call this views so just like we have model view and view model we're going to have model view view model folders and in this first views i'm going to right click on the folder create a new file it's going to be a swift ui view and we're going to start building out our first view this is going to be called list view go ahead and click create it's going to create a new file we've done this many times if you follow the swift ui bootcamp click resume on the canvas just so you know we're all connected and because we're going to be using this list view we actually don't need this content view so i'm going to right click on the content view and just delete it from our app that's the default view that just came with our blank project i'm going to move it to the trash because we are not going to need it and then i'm going to jump into to-do list app.swift file and in this file the first view that our app is looking for is that content view which we just deleted so we can actually change this out for a list view which will be the first screen in our app now i want our entire app to be wrapped in a navigation view so we could add that navigation view directly in the list view code but because i want to make sure that the entire app is always in a navigation view i'm going to actually add it to this file so before we add the list view let's just add a navigation view open the brackets and then we're just going to put the list view inside so now we know that all the views in our app are automatically always going to be within a navigation view let's jump into the list view and start doing some coding here and when we're back in this file we might have to click resume to reconnect it and we know that when we get to this list view we are going to already be inside a navigation view so to make the preview look the same as it would in our app let's put the preview inside a navigation view as well so down here i'm going to add navigation view open the brackets and put our list view inside just so that we have the same environment as in real time when we're running our app we click resume on the canvas one more time so the main object on this list view is of course going to be a list and let's add a list by typing list open the brackets and for now let's just add some text in here and we'll just say hi just so we can get a list going you'll notice that the list starts a little lower on our screen and that's because we have room for the navigation bar because we're in a navigation view so let's set that up quick let's add a navigation title so underneath the list dot navigation title and i'm going to call this to do list and i'm going to use the i'm going to press ctrl command space bar to open up the emojis and i'm going to type in a memo and then there's a cool little emoji icon that i'm going to use that looks like we're writing something so just a nice little ui there and then all of the items in our list are not of course going to say hi but they're going to have a little check mark whether or not they are completed and then a title for what the actual list item was so let's start building that out i'm going to create an h stack here instead of this text h stack open the brackets the first thing we're going to add is an image and we're going to use a system icon so we'll do system name and let's do check mark dot circle go ahead and click resume on the canvas just to make sure we are all connected still we have a nice check mark there we're going to customize it a little bit later and next to the image i want to add some text so let's do text and we're going to say this is the first item i'm going to change this later of course and just to make sure this is all pushed to the left side although it already is because we're in the list but let's just double check by adding a spacer on the right side to push everything to the left now we're going to have a whole bunch of rows in our app and each of the rows are going to have maybe a different image whether or not it is checked or not and they're all going to have different titles of course so because we're going to reuse this a bunch of times with different information i'm going to make this its own component this h stack so i'm going to hold the command button click on the h stack and i'm going to extract sub view and while this is highlighted i'm going to call it list row view so now we have a list row view in our list and the list row view which is created down here is just that row so before we move on i'm going to actually take this list row view and make it its own file just to keep the code kind of clean and separate between our files so i'm going to right click on the navigator create a new file i'm going to make a swift ui view i'm just going to call it list row view which we just called it click create and i'm going to go back into where we were with this list row view i'm going to cut the extracted sub view i'm going to jump into our new file and just paste it over the template hello world so now we have our list row view here and if i click resume on the canvas of the list row view we should see just one list row view so let's customize this a little bit by making the text the title here dynamic so we'll create a variable at the top we'll say let title of type string and then we're going to put that title into the text here so we'll just put title now every time we call list review the initializer is going to ask us for a title so down here let's just put this is the first title and back on the list view we're also going to get an error because the list row view is looking for that title so now i can change this and i can put this is the first title here if i click try again we should now see it on our preview and because we're going to have a whole bunch of items in this list i'm going to reference a data array instead of just typing these in directly so above the list let's create an at state var items of type and let's just make it an array of string for now because we don't have the models completed and we'll set this equal to and the first item will be this is the first title comma this is the second comma third and in our list we can now loop on this items array so i'm going to delete this we'll type 4 each open the parentheses we're going to go down to the id and content completion because we don't have ids on this array of strings so we'll hit enter there the data will be our items array the id we're going to do backslash dot self to give each of these just a unique id the content we're going to hit enter get rid of this ugliness and just say item and then for the code we'll just add a list row view open the parentheses and the title of course will be the item if i click resume on the canvas we should now see three different items on our list so this is looking better and before we get into the actual data here let's go ahead and create the navigation bar items as well as the next view so underneath the navigation title i'm going to call dot navigation bar items and we're going to use a leading and a trailing so we have one on the top left and one on the top right i'm going to put these on separate lines just to keep this organized and the leading is going to be an edit button which is a default button that comes in xcode we're not going to actually do anything with this button yet but we're just going to leave it there for now and this is going to be a navigation link so if we click it we can navigate in our navigation view so i'm going to put this on its own line i'm going to add navigation link open the parentheses we're going to use the title and destination completion here so the title is just going to say add and the destination we haven't made yet so let's just add a text saying destination if we click resume on the canvas we should now see these buttons at least on our screen so we have our edit button on the top left which is this edit button and our add button on the top right now when we add these navigation bar items you can see that the list kind of restyled by itself and it will do that based on the environment so based on what buttons you have but i don't like the way this list looks so let's reformat that so on the list i'm just going to add dot list style and we're going to start typing list style to see all the completions that we have i'm just going to use a plain list style for now open and close the parentheses and our list should default back to how it looked at the beginning which i think looks a little bit better when we click this add button right now if we click play on the live preview it's just gonna segue with a navigation link to a destination screen that's because we put destination as the destination so let's now build out quickly what this screen is going to look like and that's going to be a new view so i'm going to right click on the navigator in our views folder create a new file this will be a swift ui view and i'm going to call this add view click create once you're inside click resume on the canvas of course and this is going to be a very simple view but we do know that we're going to be in a navigation view when we get here so let's embed our preview in a navigation view open the brackets add the ad view inside and now the content of this ad view let's make it a scroll view open the brackets and just to get rid of the errors let's just add a text saying hi for now and on the bottom of the scroll view let's add dot navigation title and let's make the title add an item then i'm going to do the control command space bar to pull up our emoji keyboard and i'm going to type in maybe pen and use one of these pens this ballpoint pen because i think the emojis look really cool and in our scroll view we're gonna have two very simple components we have a text field so they can type in what the item title is and then a button to save or submit the the item so let's start with the text field we're going to add a text field open the parentheses we're going to use the title and text completion here the title which is the placeholder let's put type something here dot dot and for the text we need to bind it to a string so let's add a variable to top here at state var let's call it text field text of type string and we'll set it equal to a blank string for now we're going to bind it with the money sign text field text and if we click try again or resume on the canvas it should now show us a text field it's not going to look very good by default so we're going to have to do a little bit of formatting so here it is type something here and let's format it quickly let's start by giving it a background i'm gonna use a color open the parentheses and type in color literal i'm going to double click on the color literal and go click on the other and i'm going to go to the crayon box here and maybe use one of these this mercury color is probably pretty nice and close that out uh before we add the background let's make it a little taller so let's do dot frame with a height of 55 after the background let's give it a corner radius of 10 and i want to embed it a little bit from the left side so the text is a little indented so before we add the background on the frame let's just add dot padding dot horizontal that should push it in a little bit let's hold the command button click on the text field and let's embed it in a v stack quickly and then let's give the entire v stack some padding so we'll do dot padding and then maybe 16 maybe a little less 14 so it looks like it kind of lines up with the navigation title that looks good and underneath the text field let's add a save button so this will be a button open the parentheses we're going to use the action and label for the action i'm going to hit enter make this two lines but i'm going to leave it blank for now for the label the text is just going to say save let's make it dot uppercased after the quote here so that it's all uppercased i'm going to give it a foreground color of white so that it has white text let's give it a dot background color of color dot we're going to use the accent color which is default in xcode should be that blue that we keep seeing let's set the frame on this we'll do dot frame with a height of 55 so that it matches the height of our text field let's give it a frame with a max width of infinity so it's as big as possible after the background let's give it a corner radius of 10 so that also matches our text field and let's change the font so right after we call foreground color i'll call dot font and maybe dot headline that looks pretty good to me the button looks good if we click resume we can click on the button obviously nothing is going to happen yet we haven't added an action but this screen is looking pretty good so the final thing in this video to wrap up let's jump back into the list view and where we have our destination and we click that add button let's change out this text for add view open and close the parentheses and if i click resume on our canvas here we now have our list set up where we have all of our list items and we can click the add button and very nicely we go to our add item view we have our back button because it because it comes by default in our navigation view and we can go back to our list so this looks really cool that's it for this video guys we set up most of the views in our app and in the next video we're going to start looking at the models so that we can use more than just these plain text we can actually use to do list items hope you guys enjoyed this video as always i'm nick this is swiftly thinking and i will see you in the next video [Music] you

Channel: Swiftful Thinking

Views: 8,013

Keywords: SwiftUI Todo List, SwiftUI todo list, SwiftUI to do list, SwiftUI MVVM, MVVM, SwiftUI what is the View, SwiftUI MVVM View layer, SwiftUI creating a view, SwiftUI beginner app, SwiftUI app for beginners, SwiftUI learn swiftui app, SwiftUI beginner tutorial, SwiftUI app tutorial, SwiftUI create MVVM, What is MVVM in SwiftUI, How to use MVVM, How to use MVVM in SwiftUI, What is MVVM, SwiftUI create a view, SwiftUI view layer, SwiftUI view, MVVM SwiftUI

Id: EPdivac0kwE

Length: 20min 53sec (1253 seconds)

Published: Sun Mar 14 2021