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

We will kick-off the app by creating the main screens! In this video we will focus on SwiftUI logic to build out the views where users can manage the Todo List and add new items. In MVVM (Model-View-ViewModel architecture), the View layer is strictly responsible for the UI (user interface) of the application. Therefore, the view has all of the UI components but none of the logic for downloading/uploading/saving data.
Next video: • Create a custom data m...
Last video: • Build Todo List in Swi...
🤙 WELCOME BACK 🤙
WEBSITE: www.swiftful-t...
DISCORD: / discord
GITHUB: github.com/Swi...
SAY THANKS: www.buymeacoff...

[@dugrut1325]

Back in the day, when people / offices first got computers at their desks I taught the elementary of howto use and what you could do on a computer to make their life/work productive. From how to use a mouse, email, word processing, etc. Teaching is an art form, you may have all the knowledge stored in your own tiny little brain and your are so excited to tell others but to convey that information so that light bulb goes off in their brain is a whole other world. It took me months to figure out what worked and what didn't work. Nick you have discovered it, you are an amazing teacher.

[@SwiftfulThinking]

Wow! Thanks Douglas. I learned to code online too and now I'm just trying to make it as easy as possible for others :)

[@dugrut1325]

I watched you whole Bootcamp series, took notes. I was excited to get started. Well brain fog set in. I couldn't even get a ZStack to work, let alone to get backGroundColor to work. Back to Video #1, I'll set in front of Xcode while I'm watching, fingers posed over the keyboard. It's not fun getting old.

[@luberalexanderechavarriabe4156]

Man, you have the skill to teach, sometimes there are a lot of people with so much knowledge bud they are not good to pass it to others.

[@SwiftfulThinking]

Haha thanks for the comment! 👍

[@luberalexanderechavarriabe4156]

@@SwiftfulThinking Not worries. I just wanted to ask you if you have any video that shows you how to click the ticks and unclick them. Thanks a lot for any information

[@doraemon7092]

when you find you tyoe ".background Color(colorLiteral()) " not work in xcode14 . You can define " @State var someColor = #colorLiteral()" ,then in " .background(Color(someColor))" to use it..

[@eulicewinston]

Very useful, thank you!!

[@cameronbrown32]

You're a hero. This has been driving me crazy for weeks in Xcode 15.1 and now 15.2. So just a heads up to anyone that shows up in one of those versions, it still works. Doesn't show all the choice types he uses in the video, but at least you get the picker.

[@thecodingdevRahul]

Helpfull

[@yuchen3587]

I went through a Stanford Swift course and learned nothing. Your tutorial is much much better than that!

[@bbulliard]

Really like the way you code segregating everything so very neatly.. you are a very good and skilled teacher. Thank you for the video

[@SwiftfulThinking]

Writing clean code is half the battle! 😇

[@LucianoClassicalGuitar]

Awesome intro music 😂 Makes the SwiftUI a little more fun

[@muhammadusman-vc5re]

May GOD bless on you for this comprehensive effort.

[@dorzlatan]

Great job, mate! Continue!!!

[@SwiftfulThinking]

Hey Dorian! Thanks for watching :)

[@warrenscorner]

Wow! You really zip through this stuff. I'm gonna have to watch a few times.

[@BombobongTV]

the best make todolist video ever. thank you so much from south korea :)

[@relaxingvibes5560]

Thank you for explaining MVVM!! Even google results too complicated for me lol

[@SwiftfulThinking]

Glad this helped!!

[@ДмитрийКоновалов-я3у]

you a great human! Thanks! if you press option+command + P = resume canvas , it will get a little easier

[@SwiftfulThinking]

Thanks for the tip :)

[@sema_f]

I'm glad I found this channel! …after all the playground stuff this is my first dare to try it in Xcode 🥳

[@SwiftfulThinking]

You can do it!

[@vedangm3428]

Were color literals phased out of the newer xcode? I don't see that in my completions menu at all.

[@maguirer]

Whoa... Multiple files! We're not in Kansas anymore! 😁

[@SwiftfulThinking]

🤣🤣🤣 We started off easy but it does have to get a little more complex now haha

[@nevemra5]

Thank you very much for this video!

[@bbulliard]

Very nice video. Well explained and world class! Thank you for putting this together....Bob

[@SwiftfulThinking]

Thank you Bob! 😄

[@sdlaker8397]

Thanks for this series! Is there a way to do this but with multiple columns? Say you wanted a list of items and their quantities that you then wanted to add up at the bottom?

[@AndyJMacLeod]

Yes… I need to do something like this too in my app. My thoughts are: render each row of the table as an HStack.

[@Stevesvideoshelf]

Great start to an exciting project! I'm looking forward to taking all your courses. I really want to upgrade to Xcode 13. do you know if that would introduce problems while following your lessons?

[@SwiftfulThinking]

There are a few small api changes, but nothing should really be blocking. Xcode 13 should be fine - I'm going to use it in my next course!

[@Xruba1981]

The only issue you might notice while following this course with XCode 13 is the colorLiteral (and imageLiteral) auto-completions are gone :( I use #colorLiteral( on a new line and then copy to Color() and it works, but it's not that convenient any more.

[@thomasipad7719]

Is the source code available somewhere? I tried to rewrite that and am stuck: The line with ".navigationBarItems" produces the error: Value of type 'some View 'has no member 'navigationBarItems' :-O No idea why ...

[@irfanrizvi161]

Great one Nick. Always noticed using Text("Save".uppercased()) instead of typing Text("SAVE"), any particular reason for this? :-)

[@SwiftfulThinking]

Hahaha no, just a habit. In production apps, a lot of the time you don't actually have "Save" but instead you're referencing the String from a variable somewhere else in the code. So in that case, I like to just make sure it's all capitalized :)

[@franjoeric4017]

Sometimes you'll have some translation file where will you have key save: "Save" , and that key translations.save will be used on more places, and you'll probably sometimes need Save, sometimes SAVE and sometime save as end result...

[@TarunReddy_RM]

because navigation bar items have been deprecated im trying to use .toolbar. My problem is that i cant get the buttons to be aligned properly as it doesnt take an alignment parameter.. any tips?

[@TarunReddy_RM]

.toolbar { ToolbarItemGroup(placement: ToolbarItemPlacement.navigationBarLeading) { Button { //code here } label: { Text("Edit") } } ToolbarItemGroup(placement: ToolbarItemPlacement.navigationBarTrailing) { Button { //code here } label: { Text("Add") } } }

[@TarunReddy_RM]

This is how I was able to fix it if anyone's interested

[@SwiftfulThinking]

Agreed. Toolbar is the way to go now. I believe they're shifting away from the original nav bar items because the toolbar is more dynamic across different devices.

[@manfredkernMK]

@@SwiftfulThinking This worked for me: .toolbar { ToolbarItem(placement: .navigationBarLeading) { EditButton() } ToolbarItem(placement: .navigationBarTrailing) { NavigationLink("Add", destination: AddView()) } }

[@nevemra5]

​@@TarunReddy_RM You really saved me! Thank you so much!

[@Alla-e9f]

Thanks a lot! But in my Xcode 14.3.1 colorLiteral does not work at all, also the set of icons for pen or pencil has no search and very poor looking. Any ideas what can de done?

[@maguirer]

FYI, I don't know if it's your capture software or KZbin's compression, but at around 17:37 when you pick Mercury for the TextField background colour, I see no actual change in the preview-it still looks plain white to me. So when you start adding padding at 18:18, and adjust it so it "lines up", I can't see what you're talking about.

[@SwiftfulThinking]

Hey Bob! The Mercury color is the "gray" color that's on the background of the TextField. When we add the padding, it's just to add some separation between the left edge of the background and where the text starts. I hope this helps?

[@maguirer]

​@@SwiftfulThinking Oh, I totally understand what you were doing and why, but visually it doesn't come through on the video. Maybe it's my monitor settings...

[@warrenscorner]

I could not get ColorLiteral to work for me. I'm using Xcode 14.3. Did they remove it?

[@JonathanLetchford]

Minute 10:12. When I select ExtractedView it doesn't stay highlighted and won't let me rename it to ListViewRow. Xcode version 13.3. Just wondering if there is something new given this video is 2 years old. Or, if that naming even matters

[@joovawoo6301]

love you

[@yuchen3587]

When you use .padding(14) or .cornerRadius(10), what is the unit of these numbers?

[@grigordoubleg]

How can I change the hole backgroundcolor of ListRowView? If i try to change the background, only the backgroundcolor of the items is change and the rest of the view is light/dark.

[@SwiftfulThinking]

Hi Grigor! Great question. In a List, you can use a modifier .listRowBackground() to change the background color of a row. I covered this in the Bootcamp video: kzbin.info/www/bejne/qpyyn4t9YtiBodU

[@grigordoubleg]

@@SwiftfulThinking Okay, thank you for the answer Nick!

[@kal5211]

My man.

[@dr.craigcurphey4829]

Nick in the Components section - how can I change the content of the "Sign In" button to "Continue"? I used an @State variable for the buttonContent and it displays correctly but when I change the value in the switch statement, it gives an error Type '()' cannot conform to View ... etc. Tried a few other places, no luck!

[@SwiftfulThinking]

Hi Craig! I'm not sure what button you're referring to. I don't think there's a "sign in" button in this Todo app. You should be able to update a button's title with a simple ternary operator: kzbin.info/www/bejne/rquphIKapd2sY9E

[@최승기-g8f]

thank you!!!

[@陈坚涛]

Can you make a macos version tutorial? I like it very much.

[@knowledgeispower4953]

Cool ..😎

[@kavinda_dilshan_paramsoodi]

Just started watching this MVVM Architecture video series of yours for the second time to get a better idea, and to put a note on my iPad so i could refer it later. Nick My SwiftUI Angel, I need a favor brother. I'll tell you that, once you leave a reply to this comment. Thanks.

[@SwiftfulThinking]

Haha what’s up KD? The source code is on my GitHub if that’s what you’re asking 😂

[@kavinda_dilshan_paramsoodi]

No, I don't want the source code because I don't like copy and pasting.It's better to do it my own along with your video. Anyways, that's not the favor i need. This is a request actually. Can you do a whole series of UIKIT Bootcamp and stuff later? I mean after 4 months from now on? Because I need to learn UIKIT in order to get a job. Hope you understand what I'm talking about.

[@SwiftfulThinking]

@@kavinda_dilshan_paramsoodi Haha, sorry to say this, but I won't be covering UIKit on this channel. UIKit is still popular in production right now, but SwiftUI rapidly taking over. SwiftUI is the future of iOS and that's where I think new developers should focus most of their time 🚀

[@kavinda_dilshan_paramsoodi]

@@SwiftfulThinking Okay Brother. I will learn SwiftUI from your courses because they're perfect.❤️👌

[@kenturnbull9679]

On Addview, I am not seeing the text "Type something here..." (your line 17). Everything else works . Is there a way to change the foreground color or the fontWeight so it stands out more?

[@SwiftfulThinking]

The Placeholder text is not very customizable at this time (maybe Apple will update it in the future) so right now, the best bet is changing the background color. If you full want to customize it, you could convert a UITextField from UIKit into SwiftUI, which is fully customzeable.

[@kenturnbull9679]

@@SwiftfulThinking Turns out that I had added a blank space bewteen the quotes... @State var textFieldText: String = "". It looks like this stopped the textFieldText from accepting the new value. Take out the space; problem solved.

[@burakcakir06]

thanks so much.

[@SwiftfulThinking]

Thanks Burak!

[@bulgakov1991]

👍👍👍👍👍👍👍👍👍👍👍👍👍👍👍

[@jayantkumar1954]

😍

[@israelhernandez8910]

when implementing the addView I received an error within @main :/ when trying to execute the simulation

[@brandonr.8784]

I was also facing this issue. I tried a couple of thing such as using a toolbar instead of navigationbBarItems and completely quitting xcode before I got it to work.

[@TarunReddy_RM]

They took out Color Literal too?!

[@SwiftfulThinking]

lol well sort of. It's supposedly a bug in Xcode 13 but they haven't officially said anything. You can actually still access it if you type -> #colorLiteral(

[@TarunReddy_RM]

@@SwiftfulThinking ahh I see thank you

[@profgallaugher]

@@SwiftfulThinking Thx - your videos have been GREAT in helping me get up to speed quickly w/SwiftUI. I also don't see the Color Literal. I'm using Xcode 13.4.1. I've tried just #colorLiteral( and enclosing it in a Color like: Color(#colorLiteral(). Neither seems to be working. I've noticed I can force a color to show up in the background modifier if I enter something like: .background(.red), and can then use the Navigator pane to pull down & select "Custom" under "Background" (replacing Red), but this doesn't bring up the standard iOS color picker box with the color pencils. Is there a work around? Thanks! For now I've just used: .background(Color(uiColor: .systemGray6))

[@WilfClegg]

@@profgallaugher Thanks for this. I hate it when Apple takes out these simple conveniences...and for what reason?!

[@bbulliard]

.navigationTitle doesn’t show title. Any clues as to why? I’m Running latest Xcode

[@SwiftfulThinking]

Is your Preview inside a NavigationView? You need to be in a NavigationView to use the Navigation bar

[@bbulliard]

@@SwiftfulThinking that is precisely the problem. I was using your sample video above and it didn't have the navigation view, which is why the title wasn't showing. I can't figure out how you got the title to work when it doesn't have a navigation view. I did add the navigation view and it works beautifully now. thank you for your very prompt response to my question.. your the best!!

[@SwiftfulThinking]

@@bbulliard You should be able to add a NavigationView to the Preview section of the file to mimic the actual app environment

[@thematturlookingfor]

Hey man you don't have a git repository for this do you?

[@SwiftfulThinking]

@SwiftfulThinking 🤙

[@thematturlookingfor]

@@SwiftfulThinking I might need to change the wording. Do you have a git repository for this?

[@SwiftfulThinking]

@@thematturlookingfor lol yea on GitHub @SwiftfulThinking github.com/SwiftfulThinking/SwiftUI-Todo-List-MVVM-UserDefaults

[@namormia5233]

By default I didn’t get the "back" button ☹️. But in your case it's happening.

[@SwiftfulThinking]

I think they may have made some updates in iOS 15. You should at least have some sort of back button showing though, otherwise you may not be in a NavigationView or your NavBar is hidden?

[@namormia5233]

@@SwiftfulThinking There’s surely a button by which I can go back to the previous view. But the button's name didn't appear as "Back", instead it is showing "TodoList" .

[@billsouthwick8123]

@@namormia5233 I think it's because your "navigationTitle("TodoList") is in the view and not in the main project. Check your code and don't have the NavigationView in the view itself. I'm running Xcode 13 and iOS 15 in the simulator.

[@xgqfrms]

Color Literal not working

[@richardcoterie8091]

Finish

[@earthvitalutube]

Oof.. I can't get preview to work with the project. The failed to build scheme error. I've tried keeping the project out of iCloud folders, I've tried lowering the required iOS version, and I tried rebuilding the project again. The error happens as soon after creating the ListView.swift file

[@SwiftfulThinking]

What does the error say?

[@earthvitalutube]

@@SwiftfulThinking Thanks for your attention. The main error is "Argument passed to call that takes no arguments" which highlights "ListRowView(title: item)" from the ListView.swift file. I'm unable to replicate the scheme error again at this second but have usually seen it every time I try to preview or build.

[@earthvitalutube]

@@SwiftfulThinking Ok here's all the errors: argument passed to call that takes no arguments ---------------------------------------- SchemeBuildError: Failed to build the scheme "TodoList" argument passed to call that takes no arguments Compile ListView.swift (arm64): /Users/max_miles/local xcode projects/TodoList/TodoList/Views/ListView.swift:21:36: error: argument passed to call that takes no arguments ListRowView(title: item) ~~~~~~~~^~~~~

[@earthvitalutube]

@@SwiftfulThinking I'm going to try to temporarily remove the following and List it differently to see if this error goes away it fixes the scheme issue and be able to preview: ForEach(items, id: \.self) { item in ListRowView(title: item)

[@SwiftfulThinking]

@@earthvitalutube looks like there’s a problem with the init of your ListView on line ~21