iOS 13 Swift Tutorial: Build a Complex UI with SwiftUI from Start to Finish

Learn how to build more complex user interfaces with SwiftUI.
🛒 GAME DEVELOPMENT COURSE - JUST $20 🛒
www.udemy.com/...
👏 Support me on Patreon: / brianadvent
➡️ Tutorial Files: / xcode-project-ui-28688327
➡️ Web: www.brianadvent...
✉️ COMMENTS ✉️
If you have questions about the video or Cocoa programming, please comment below.

[@ScubaSteve-te8lv]

Awesome video. There are way too many people posting "tutorials" that only show you how to display simple text on screen. This definitely takes it a step further. Thanks!

[@sharukmsd]

OMG!!! OMG!!! My brain is gonna explode. That's too complex....

[@bahdmansaul]

As an Intermediate/Senior Level Backend dev, this was a very straight forward and palatable introduction to SwiftUI. Thanks for your contribution!

[@kareemjeiroudi1964]

Best part about this tutorial is the sound of birds in the background. Do you always have birds in your backyard whenever you're working?

[@siddredkar8185]

Thanks Brian for such wonderful tutorial ,this is my first swift UI tutorial .early i have the basic and basic idea about swiftUI but this gives a preety good idea to overall understand what swiftUI actually it is and how it will works ,pretty interesting to learn from ur tutorial.

[@johnysnowy35]

Thanks for the quick intro to SwiftUI. It would be really helpful if you provide a starter project for your tutorials that includes the assets (images/json/helper function).

[@DannyBoy443]

I'm learning Swift now, from Python and some other languages. And I love the way this looks in XCODE. It's how code should look. C# looks like this.

[@andrejkling3886]

Thank you very much for your lesson.... All the Best for you

[@forrestanderson2885]

Note to anyone that is taking this tutorial. Xcode has changed quite a bit since Brian posted this and there are some things that will throw errors. I am currently running Xcode GM_2 and one of the issues I am having is with 'identified'. That should be changed to: List(categories.keys.sorted(), id: \String.self) { key in ... also there is a problem with the navigation. If you click on one of the images it will not take you to the detail view, but if you click on or below the Category name it will trigger all of the associated images. This is a bug and I am still trying to figure out how to resolve it - I posted here on StackOverflow: stackoverflow.com/questions/57981167/swiftui-navigationlink-not-triggered-in-correct-location - check there to see if a solution has been posted.

[@TriMontana]

Good comments.

[@azizawada5303]

I'm getting the following error: Static member 'leading' cannot be used on instance of type 'HorizontalAlignment', do you have any idea how to solve it?

[@mayrasmora9220]

@@azizawada5303 In the DrinkRow.swift I was able to fix that error by fixing the "ForEach" from ForEach(self.drinks.identified(by: \.name)) to ForEach(self.drinks, id: \.name)

[@azizawada5303]

@@mayrasmora9220 I made this change, but I'm still getting the same error in the DrinkRow.swift and DrinkItem.swift.

[@azizawada5303]

@@mayrasmora9220 Code in DrinkItem.swift: import SwiftUI struct DrinkItem : View { var drink:Drink var body: some View { VStack(alignment: .leading, spacing: 16.0) { Image(drink.imageName) .resizable() .renderingMode(.original) .aspectRatio(contentMode: .fill) .frame(width: 300, height: 170) .cornerRadius(10) .shadow(radius: 10) VStack(alignment: .leading, spacing: 5.0) { Text(drink.name) .foregroundColor(.primary) .font(.headline) Text(drink.description) .font(.subheadline) .color(.secondary) .multilineTextAlignment(.leading) .lineLimit(2) .frame(height: 40) } } } } #if DEBUG struct DrinkItem_Previews : PreviewProvider { static var previews: some View { DrinkItem(drink: drinkData[0]) } } #endif Code in DrinkRow.swift: import SwiftUI struct DrinkRow : View { var categoryName:String var drinks:[Drink] var body: some View { VStack(alignment: .leading) { Text(self.categoryName) .font(.title) ScrollView(showsHorizontalIndicator: false) { HStack(alignment: .top) { ForEach(self.drinks, id: \.name) { drink in NavigationLink(destination: DrinkDetail(drink: drink)) { DrinkItem(drink: drink) .frame(width: 300) .padding(.trailing, 30) } } } } } } } #if DEBUG struct DrinkRow_Previews : PreviewProvider { static var previews: some View { DrinkRow(categoryName: "HOT DRINKS", drinks: drinkData) } } #endif

[@nikbelikov]

Very cool! Thank you! This video gives a basic idea. And if SwiftUI is changed - it's not a problem :)

[@tityseptiani8584]

This is my first time seeing how the SwiftUI works as I haven't touched swift again after I found Flutter. But, this thing got me really excited. It seems like things will be easier with SwiftUI. I really like building my UI by codes so SwiftUI looks a lot sexier to me.

[@HisMajesty99]

Hey Brian, I loved the tutorial, but could you please post a link to the assets and json used please. It would make following along with the video much better. Thanks!

[@Nik6644]

His Majesty just do apples own tutorials. He basically just copied it

[@MohammedAraby]

Nice tutorial and excellent explain for every step

[@Decatilinae]

Thanks Brian... can you go further....Like how to build this app with a DB on Firebase with SwiftUI?

[@TrillionWatts]

I to would like to see this. I'd gladly donate or become a Patreon for this tutorial @Brian

[@iambenmitchell]

For the new beta change "ScrollView(showsHorizontalIndicator: false)" to "ScrollView(.horizontal, showsIndicators: false)"

[@OrAssraf]

It's still in the center and not at the top

[@AvenCode]

the good hint is .horizontal - it doesn't scroll without it!

[@azizawada5303]

A A 2 minutes ago I'm getting the following error: Static member 'leading' cannot be used on instance of type 'HorizontalAlignment', do you have any idea how to solve it?

[@suryachappidi3337]

@@azizawada5303 did you get any solution for it?

[@abcd123906]

Thank you!

[@Danyil-ip3ll]

Thank you Brian.Keep up doing this!Hello from Ukraine 🇺🇦!

[@handmade83]

Great video. How did you learn all of this?

[@sokn1fe]

Some things at around 18:30 have changed I used this to get the same output: ScrollView(.horizontal, showsIndicators: false){ HStack(alignment: .top) { ForEach(self.drinks,id: \.name){ drink in DrinkItem(drink: drink) .frame(width:300) .padding(.trailing, 30) } } }

[@suryachappidi3337]

what about the identified in list at 23:16

[@TheRuthlessEAZY]

thanks for sharing man

[@sokn1fe]

@@suryachappidi3337 List(categories.keys.sorted(),id: \String.self){key in DrinkRow(categoryName: "\(key) Drinks".uppercased(), drinks: self.categories[key]!)

[@sokn1fe]

​@@TheRuthlessEAZY happy to help :)

[@mgambusch]

dude you just saved my day:D

[@badakml7366]

ohh man, cant wait for the catalina release, i want to use that preview heheh

[@lakshgupta687]

Your luck. Catalina just hit the market.

[@amit1922003]

Thank you so much🙏 I will definitely have a look when I wake up!

[@xushnudkeldiboyev5393]

so you woke up!? or still sleeping bob

[@amit1922003]

Xushnud Keldiboyev hahaha I guess it’s a type but I can’t remember😅

[@omgawdhax]

Thanks Brian, I'm loving these SwiftUI courses all over KZbin. Quick question: At 24:10 should we use [unowned self] for the closure to prevent memory leaks like we do in closures with Swift, or is that handled somehow in SwiftUI? Any ideas? Cheers!

[@OurPastSecrets]

So dark mode automatically switches apps with no coding to black with white text?

[@waveboardstyler]

If you use .primary and .secondary it does, I don’t think it does when you specify .white for example

[@marlokessler]

Awesome how you handle Swift and SwiftUI!!!

[@nadiasiraniadev9452]

Thank you for this very useful tutorial

[@w0mblemania]

This was very good. Thank you Brian. A query: it seems that the detail view doesn't need to be in a list. (That would also remove the redundant separator line). Also, the load method could be an extension on Bundle, instead of being a free-floating function. Also, the data model should probably refactored out in to its own type, and would provide the dictionary, so that Views don't have to do any thinking. Cheers.

[@TheoInvest]

hello can you put the link to download the Asset and Json files? Thank you 🙏

[@FaiDaTe..]

Hello can you make an example with swifh ui similar to this with the difference of viewing a video inherent in the context? Thanks you are a great teacher !! Excellent

[@rabihelias7848]

Great tutorial man !!!

[@derekxiao8265]

thank your wonderful job

[@appleblog3776]

Great Tutorial! Thanks!

[@alperenakyuz6158]

Excellent tutorial. Thank you :)

[@aliyukamilu1501]

Thank you for the tutorial

[@lowskill4866]

Pretty cool video, thank's

[@jadsonmedeiros6815]

Hello, could you make a video explaining how to use size classes with swiftui? will it be that to create a universal app with different layouts for iPhone and iPad have to use multiple if to detect the device?

[@rgenericson5361]

Starting on it now! thx!

[@codejunkie6300]

Still no link to the files posted yet?

[@vatsalkulshreshtha6048]

NavigationButton is depracated in beta 5, instead I use NavigationLink... the DrinkRow is not clickable in my case whole scrollview is clickable and then due to forEach loop the detailView opens three times What to do?

[@mrcattaable]

have you managed to solve this?

[@vatsalkulshreshtha6048]

Haiducu' no

[@vatsalkulshreshtha6048]

@@mrcattaable no! \

[@ravingrabidsq]

@@vatsalkulshreshtha6048 On my way to find solution, got anything?

[@heestand_xyz]

Epic tutorial!

[@ridewithsingh385]

Testing your app on the actual device doesn't apply the Color Assets for light and dark appearance. Do you know why? light and dark appearance works great in the simulator but not on the actual device.

[@moridinbg]

Great tutorial, but that was a ridiculous number of ads!

[@jrgibson]

How else do you think he's supposed to pay for the work he does....?

[@aisanaK]

Ivan Dilchovski this is the stupidest co,,eat i have ever seen. a free 40 min tutorial with a few ads to be able to get some money this ads literally take 5 seconds to watch

[@DC4TH]

I got a question... is optimal to use the "ForEach" SwiftUI method in order to render all the elements, it has the optimization of the, for example, reuseds cells of UITableViews?

[@HisMajesty99]

Any idea what this error is: '(Edge.Set) -> _ModifiedContent' is not convertible to '(Edge.Set, Length?) -> _ModifiedContent' (aka '(Edge.Set, Optional) -> _ModifiedContent')

[@kvaliantis]

Can we have the link of the assets please?

[@stressfree9780]

If you pay me! Or else no

[@kvaliantis]

@@stressfree9780 ok no

[@stressfree9780]

@@kvaliantis Ok fine- be that way

[@aliyukamilu1501]

please how did you create the .json file.

[@iKh4ever]

That is great tutorials. I love your tutorials.

[@alswynnjovepascual8229]

Say , i want to use this UI, is there anyway to add a create/plus button to generate a “new card”

[@christophschmitt114]

Hi Brian, what about a design pattern like MVC. Is it still usefull with SwiftUI? In your example the view knows the model.

[@seantan4702]

is this consider complex Ui already?

[@techdistribution168]

Hi brother. How to start build successful KZbin channel like you? Could you show me some tips? Thanks.

[@boy4ksa1]

Bad, you don’t start from “zero” and in your project there is some files we don’t know how you do it, i am interested about this video but when I started everything is error in my project

[@mmcanhaoable]

why dont you provide the files you use on the tutorial?

[@jrgibson]

Why don't you pay for the files used on the tutorial?

[@dipakmakwana5606]

@@jrgibson In Market, there are so many videos are available, those provide even source code also. And You are asking for payment that is very ridiculous.

[@jrgibson]

​@@dipakmakwana5606 Do you want to try constructing a sentence in English that is correct? If you don't like the videos, you don't have to watch. Putting the files behind a paywall allows Brian to make money from the work he has put into these videos that he is giving away for free -- Don't you think he should be paid for the work he does, or do you expect everyone to work for free?

[@Awesome奥深]

looks good

[@911SuperGT]

hey guys, i need some help here. i just ordered a mac so that i could start learning to code for iOS. a long time ago, i learned objective-c to get to know a bit about iOS dev. so in my case here, if i want to get into iOS again with the latest technologies, should i be starting by this tutorial and ignore all the old resources used on Swift before SwiftUI ?

[@BrianAdvent]

Hi Ramy, SwiftUI is cool and already quite powerful. However, at the moment you still need to have basics knowledge about UIKit.

[@mrcattaable]

since beta 5, I can not navigate to the DrinkDetail, any suggestion?

[@crapio99]

Hi! I was trying to configure the DrinkITem view but it is giving me an error cannot preview in this file. What do I do????

[@feededandrea]

same here

[@whitecrow5886]

beautiful

[@jesusfortuna6850]

Eres el mejor, I love u

[@pickemparty]

Whats the point of the default ContentView.swift file when the project is created?

[@mustafaihab9389]

Amazing 🙏

[@anonymouswhite5845]

Guys how did you made in DrinkItem.swift : static var previews: some View { DrinkItem(drink: drinkData[0]) } I am getting an error that says: Cannot convert value of type 'Data' to expected argument type 'Drink'

[@codedaily8861]

Seems that the identified(by:) is depracated in beta 5, how can I write the List function for the Home view?

[@danielillana7638]

here it is List (categories.keys.sorted (), id: \ String.self) {keys in

[@toanuk]

Hi Brian, It is a great video, but It is hard to follow, Can you help to set up data with out Jason file. Can you please set up core data model for next video. look forward for next video as CoreData model.

[@Alyasi1985]

When a notification was clicked , it must be redirected to desired page in IOS

[@nitramluap]

This is all lovely... but I'm having a hard time finding a way to link a UI designed in SwiftUI with a CoreData data model. Swift UI seems to be good for simple data structures but that's about it. I hope this changes.

[@jeanpaulhernandez1363]

Hello sr, i am getting a crash error when i try to load my canvas preview for the drinkItem.swift file. I am using your content as a template for my own app but for some reason i am getting and error in the last line of the data file, how can i fix it

[@sanampreetsingh4463]

why there is no storyboard and viewcontroller by default. when i try to make it like this it doesnt run and shows lot of errors

[@matthewross611]

How would something like this work with Core Data? and how would it work to edit the JSON file if you were looking at a local database kind of approach?

[@TheRedEagle-0]

Quick Question, how would I go about making it print out the row in a specific row. For example, make the Hot Section first and the Cold second.

[@ashleyvaz3577]

Great video but ridiculous number of ads

[@danielillana7638]

Hello, when I want to go to the DrinkDetail, with NavigationLink, when I touch the image it does not change my view, but if I touch in the cell it changes me but it happens to me through all the values ​​of the ForEach loop, what solution can I do

[@ravingrabidsq]

Did you find any solution?

[@andronickmartusheff4036]

updated format if you're running into issues with the "identified by" lines try this format ---> List(categories.keys.sorted(), id: \.self) {key in.....

[@rajashekargangarapu4221]

I have error : Value of type '[String]' has no member 'identified'

[@forrestanderson2885]

You need to change it to: List(categories.keys.sorted(), id: \String.self) { key in

[@PoopStyleGaming]

How (not) to ask a technical question - kzbin.info/www/bejne/a2TdnHWsgZmNeJY

[@Nirvananashreal]

.identified(by: \String.self) part seems to be deprecated. Idk but my Xcode won’t use it for some reason

[@StewartLynch]

Good stuff as usual Brian. The one issue I see is that you set the frame width of the DrinkItem to a fixed width and that might not display consistently on all devices as they have different widths. Or what if you enable landscape mode. One way to handle this would be wrap your scrollview in GeometryReader. I demonstrate this in this tweet twitter.com/StewartLynch/status/1142473049779818498

[@danielwatson6529]

I actually Really love this Tut, it has helped me loads., i didn't actually follow directly tho, as I used an array rather than loading from a Json. Can anyone point me in the right direction for my next challenge, using core data, rather than json or an array, that a user can add ingredients etc.

[@chakrichakram1546]

Will you be teaching SwiftUI basics?

[@BrianAdvent]

I just released a course on Swift UI: www.udemy.com/course/build-apps-with-swiftui/?couponCode=KZbinAPRIL

[@Killdead14]

I'm having a problem, video time -> 19:50. In the line "ForEach (self.museums.identified (by: \ .name))" I changed to use in my case. This error appears: Type of expression is ambiguous without more context

[@iambenmitchell]

Yes, this tutorial is broken now. Use beta 2

[@Killdead14]

Ben, thank you and i have beta 2

[@kareemjeiroudi1964]

So no assets unless you donate?

[@MohammedAraby]

but I have issue when I insert the data in drinkItem swiftui no review are coming and saying crushed

[@iambenmitchell]

NavigationButton was renamed to NavigationLink

[@iambenmitchell]

NavigationLink(destination: DrinkDetail(drink: drink)) {

[@DimNovo]

@@iambenmitchell Actually "it's work" has renamed to "doesn't work"...))

[@iambenmitchell]

@@DimNovo Yeah, there's a lot of bugs. Use Xcode Beta 2. I have uploaded the project here: github.com/MrBenFTW/CoffeeDBApp

[@t3ix89]

@@iambenmitchell Thanks, but have this error "Static member 'leading' cannot be used on instance of type 'HorizontalAlignment'", an idea ?

[@iambenmitchell]

@@t3ix89 Did you ever fix it?

[@javakian1]

Hello, I have one error, just opening your code in HomeView.swift.

[@javakian1]

See my errors, please download them, www.OpticalAutomation.com/CoffeeDBApp.zip

[@series25a]

Guys i cant even try to test the sample of the completed app? Can't import app and has errors about some id or permissions...

[@pierre1360]

I'm not getting the autocompletes that he's getting and my previewer fails when I try to add the drink param to the drinkItem struct

[@reddytocode]

16:50 change the Foreach to: Foreach(self.drinks, id: \.name){

[@ZhouHaibo]

Why not just the Foreach(self.drinks), what is the different?

[@mounirasalhi6829]

it's working now .. thnk U

[@kuzaxe]

Thanks for this! Fixed the error.

[@mariaangelxoxo7579]

How do I fix this error. value of type ' string ' has no member 'identified'

[@bahdmansaul]

Foreach(self.drinks, id: \.name)

[@-_--px7em]

new xcode 12 beta showsHorizontalIndicator replace it with -> .horizontal, showsIndicators: fals

[@artemstrekalov6333]

help me pls on 8:17 DrinkItem(drink:drinkData) I have an error Cannot convert value of type 'Data' to expected argument type 'Drink', I did everything same, but on this step just error

[@TArsVEVO]

Can I have your json and assets please ?

[@iambenmitchell]

pastebin.com/ajYzHwne

[@mickaellutin2591]

someone can explain me the deference between using VStack and the Main.storyboard?

[@zoolander2105]

In the released version of swift, the identified block is not working :(

[@Shqtucke]

I have the new xcode beta and it's not responding. It won't open at all. It was fine yesterday. Any suggestions???

[@iambenmitchell]

stackoverflow.com/questions/56926884/swiftui-navigationlink-not-behaving-the-same-way-as-the-old-navigationbutton

[@gangalo68]

7 minutes in and I have to make a cappuccino, brb

[@danielillana7638]

Hey Brian, I loved the tutorial, but could you please post a link to the assets and json

[@wanmeixx]

真棒，非常感谢

[@iOS_Developer_Swift]

youryr code is not working on latest verison

[@anonymouswhite5845]

If someone did finish the latest version of this project can you share it please?

[@shayaknandi3838]

Hey, are you able to use this video to create the app? Will the tutorial work for today's swift?

[@yolo333kadepandxmand]

github.com/davidkubik98/CoffeeDB updated version thanks to David Kubik

[@taoapps5637]

@@yolo333kadepandxmand Thank you

[@fieb3051]

I created a JSON-File which fits the conditions: www.dropbox.com/s/sc1v9h064bsm1de/drinks.json.zip?dl=0

[@anlumithe4616]

The Scroll View is not working can somebody pls explain ??

[@Evolinox]

24:11 I keep getting the Error that "Value of type '[String]' has no member 'identified' "! How can I fix this??

[@waterfall9931]

List(categories.keys.sorted(), id: \.self)

[@andrm88]

36:23 NavigationButton has changed to NavigationLink