SwiftUI List with Custom Cell & Passing Data

[@seanallen]

If you enjoy my teaching/presentation style, I've started creating my own iOS developer courses at seanallen.teachable.com. You can watch the first ~10% of each one for free to get a feel for them.

[@noamif]

These swiftUI tutorials are FIRE ☄️

[@seanallen]

Glad you enjoy them, Noam!

[@tibettenballs4962]

@@seanallen i enjoy them more tho..

[@RevanthMatha]

Another commenter posted "Don't know if this is only my problem, but I needed to add the line .listStyle(.plain) after the List and embed the Image and VStack in a HStack. Otherwise, it looks a bit messy." I had the same issue and the above fixed it for me. So verified :)

[@bi0hazardd144]

had exact same issues, really helped thanks

[@karljay7473]

@9:40 if your version doesn't have the Text views to the right of the Image view, then wrap the Image view and VStack in an HStack. Seems Sean is using a different version, I'm on Xcode 13 Beta 5 and the Text views were below the Image view. Wrapping them in an HStack, solved the problem. Seems the older version had an implied HStack.

[@aa.fordays]

I came looking for this exact comment! You're a legend!

[@whoshothamilton]

I notice that this version of Xcode/iOS 15 aren't pushing the lists to the edge of the screen anymore. Is there any way to correct this and make it full width?

[@tmaharisoa]

You are so gifted Sean! what a blessing to watch your content!

[@seanallen]

Wow, thank you!

[@clayfulgham21]

This is easily the best video I've found discussing SwiftUI data passing...THANK YOU

[@seanallen]

Wow, thank you. Glad you enjoyed it.

[@janszalasny4830]

Sean, I spent like a whole Saturday trying to achieve exactly such an effect, last 6 minutes of your video helped with that, thank you so much!!!

[@seanallen]

Glad it helped!

[@karhoshe]

WoW, can't believe SwiftUI can build this so easily. Thanks for the tutorial, learn so much from it.👍🏻

[@seanallen]

Happy to hep, Karho 👍

[@rahmansajid4280]

This is the first time watching your tutorials - after watching few minutes and how you explain everything - subscribed your channel immediately.

[@seanallen]

Glad you enjoy my teaching style, Rahman!

[@TheSpiralnotizblock]

Don't know if this is only my problem, but I needed to add the line .listStyle(.plain) after the List and embed the Image and VStack in a HStack. Otherwise, it looks a bit messy.

[@artak9439]

In 32:50 he puts all in HStack

[@TheAlpha6echo]

This helped me. thank you

[@KrastyoKrastev]

I like your style of teaching! It is great!

[@seanallen]

Happy to hear that, Krastyo!

[@souldock]

You've got me. Now I have to watch all of your vids :)

[@seanallen]

Enjoy 😀

[@GeeElle]

Great clean presentation again, Sean! Good stuff!

[@seanallen]

Glad you liked it, Gee!

[@AZMerf]

You are just so good. I was just wondering at 21:00 how you remember all these different modifiers and you literally just answered the question. Good to hear there isn’t any real magic to it other than experience.

[@KimbrellBrad]

As always, great content Sean! You have definitely been one of about 5-6 KZbinrs that have helped me become a "real developer" in Swift. Still lots to learn, but starting to realize that I know so much more than I did when I started last July. But I love your teaching style so much that I will definitely be a customer for your new course coming out next week! One tip..when you are extracting that Subview you can rename it right there rather than going back and doing so. It's easy to forget...I do it all the time...but easy to see someone else doing it LOL! (I know you are focused on delivering the best explanation while recording! I don't have that excuse...)

[@AbbeyOnAtkins]

“That can lead to clever & confusing code. You still want it to be readable” yes. Thank you!

[@martinmaulhardt9852]

Already said this in other video but again, you are the master of iOS programming Sean. Thanks for the tutorial!

[@seanallen]

Thanks for the kind words, Martin.

[@umerfarooq3121]

Seriously bro your tutorial force me to subscribe. You explained every single line step by step. Love you content. Want to see more. Thank you ;)

[@seanallen]

Happy to hear you appreciate my teaching style and I appreciate the subscribe 👍

[@krishk550]

You made it so easy sean! Thank you so much for your content. 🎉

[@mountainsmusicandcode]

As always, so good Sean. I often come back to your videos and rewatch them before building out a particular feature. Super clear and concise with some great tips. Much better than wading through my own ill written notes on the subject ;-) Thank you!

[@seanallen]

Thanks for the kind words, Robin. I always recommend repeat viewing of content. At least in my experience, going through a tutorial, blog post, or video only once isn't quite enough for the concepts to sink in. I usually have to go through the content, try to implement it myself, then rewatch the content for it to really sink in.

[@Darknessfell92]

in 9:51 when I clicked on embed in list, the text moved under the thumbnail, I did everything step by step with but got this result, can you please tell me what have I missed?

[@abdoulayefall9278]

add the line .listStyle(.plain) after the List and embed the Image and VStack in a HStack. (taken from another comment)

[@FlyingBanana43]

This is just what I’ve been looking for, code worked great, however I needed to add in a HStack below the list otherwise it would just create two list entries per item

[@jamesvanderbilt201]

thanks for posting this..i was wondering why mine looked different.

[@renatomauro6300]

Without doubt, the best Swift tutorial!! Congrats!

[@johnzender533]

your videos are amazing! I'm a beginner and learning quickly thanks to your content! Thank you!

[@seanallen]

Happy to hear that!

[@christoskatsenos13]

Great video! Thank you for this detailed explanation. I am always looking forward for your videos.

[@seanallen]

Glad you enjoy them, Christos!

[@Mikey19846]

I really like the way you refactor your code. It looks really tidy. thank you for the tutorial.

[@seanallen]

Thanks for the compliment Michael. Code readability and organization is a big deal to me. Happy you noticed!

[@johannespettersen]

I finally learned coding because of you, THANK YOU!!🎉

[@seanallen]

That's awesome! Happy to hear that and best of luck on your coding journey, Johannes 🚀

[@johannespettersen]

Thank you!!😁

[@Omeir34]

Always excited to see your videos, Sean!

[@seanallen]

Glad you like them!

[@iBroi]

Very informative, educational, learning by your learning skills, way is outstanding, explaination is nowhere to find, thanks, please keep it up with progress, all best!

[@seanallen]

Thanks for the kind words, Ibrahim. Glad you enjoyed it!

[@kavinda_dilshan_paramsoodi]

Bro, When I'm watching your videos, it makes me feel you're like a neighbor next door where I want to go and spend time and start my first startup with...

[@GidzPaul]

Coming from an Android world, I loved this tutorial!

[@applefarm3740]

Thanks for making these AMAZING SwiftUI tutorials. It's really easy to understand and just open Xcode and follow you and increase my skills.

[@seanallen]

Happy to hear you enjoy them, Ernest. More on the way!

[@judy8821]

Wonderful clear explanation. Never knew about Link. Very easy to follow your videos.

[@seanallen]

Glad you enjoy them, Judy 😀. Link was just added in iOS 14.

[@andrevdw747]

Thanks Sean, very helpful. By the way moving a block or line, you can also use cmd-option [ or ] for up and down.

[@Vlad-fv6yq]

Thank you so much. You explain perfectly. Definitely love your manner 😊

[@seanallen]

Glad you appreciate my teaching style!

[@razrbhr8888]

Really enjoyed it followed the entire tutorial and worked awesome thank you again for your great content

[@seanallen]

Glad to hear you enjoyed it, Kemley.

[@Lowlightapp]

Definitely earned my sub. Awesome video man.

[@seanallen]

Happy to help, Nate.

[@odduser1634]

Amazing content, learned multiple concepts all in one video.

[@Dygear]

This convinced me. I'm going to get your teachable courses.

[@seanallen]

Happy to answer any questions about the courses if you have any. Hope you enjoy 🚀

[@Dygear]

@@seanallen None right now but I appreciate it. Wanted to let you know the skills I learn in that will immediately go into an app that will be dispatching emergency service vehicles to assignments (Ambulances & Helicopters). I run a company that builds dispatching software (mostly written in rust) and this is intended to be the Mobile Data Terminal front end for that.

[@seanallen]

Awesome. Would love to check out the finished product when the time comes.

[@osmanresatdogrul1244]

Besides being a tutorial it is really helpful to choose topics that can adapt to your own application, thank you very much.

[@joeallen6x]

Does this work the same with Navigation Stack???

[@evennorthug2585]

Highly relevant. Well paced. Keep I up!

[@chandlerzuck6396]

This is one of the best SwiftUI walk-throughs I’ve ever seen. This was so so so helpful. If possible, could you do a follow up video discussing an API data binding?? Like through Airtable?

[@seungwanwee2107]

Thanks a lot, was able to modify this project and use it for my school project :)

[@seanallen]

happy to help, Seungwan!

[@Wiintb]

You are a good instructor.

[@seanallen]

Thanks for the kind words :)

[@Wiintb]

I wanted to get your bundle. 26 years, CTO. Started as a assembler OS programmer. Want to learn iOS for fun. Do you do any QnA for the purchases? DM or mails? Thank you

[@seanallen]

Happy to answer any questions you have about the courses! You can DM me on twitter @seanallen_dev or you can find my email in the About section of my KZbin channel.

[@enot5575]

Wow! This tutorial is super easy! Thanx a lot!

[@daftstuff6406]

Thank you , Sean. Really nice presentation for a beginner SwiftUI coder. Great help.

[@gamebazar6453]

Omg this is the best tutorial rly, thanks!

[@seanallen]

Glad it helped!

[@sureshkutagulla4526]

Nice Explanation, Clear understand Thanks Sean Allen

[@edgargranados-perez9889]

Who else gets excited for the refactoring bc I sure as hell do! Also the swift are the shit!!!!

[@zb1123]

Great video - thanks a lot Sean! Perfect timing, just been tasked with creating a Widget for our app w/ WidgetKit and that's all in SwiftUI, shall include a little List in it too! Cheers:D

[@seanallen]

Nice. I have some widget videos on my to-do list. I'm waiting till after WWDC to see if they introduce anything new to widgets.

[@zb1123]

@@seanallen Awesome - shall keep a close eye out for those then!

[@ajmalrasheed9113]

Thankyou Sean, It was very detailed explanation.

[@birdman4274]

Brilliant video Sean. SwiftUI is much easier than Storyboard and UIKit. Big thumbs up 👍

[@Hamza_Boukhatem]

from Algeria. bro you are just awesome great Jobe

[@aliDevJourney]

What a beneficial video, thanks Sean!

[@seanallen]

Glad you enjoyed it!

[@GrizzoWalsh]

Man, this was a GREAT tutorial and I appreciate it. Would love to see one to create an sign-able invoice.

[@tylerstevensx]

Appreciate your videos brotha 🤙

[@bitsurfer0101]

If you wanted the text in the VideoListView to line with the top and bottom of the image, would you just add a spacer in between the two in the VStack?

[@humancyyborg]

Thanks for the tutorial. This was super helpful

[@Hush4Me1]

Is there a way to remove the cell indicator and separator lines?

[@vamsi3877]

Great explanation 👏

[@seanallen]

Thanks Vamsi!

[@ekkogaming5461]

Thanks for the tutorial, really useful.

[@seanallen]

Happy to help!

[@AndyJMacLeod]

Very helpful video, thanks!

[@chrispy104k]

Nice and neat Sean. Thanks man.

[@BlackThreadDev]

Great job. Thanks!

[@melvenko]

Thanks for this Sean

[@seanallen]

No problem, Melven. More to come!

[@TheSukhreetSingh]

At around 17 min, there's no HStack in the List. The List have "Image + VStack (Text + Text)"; How is the Cell UI aligned properly. I have the same code but its showing my Image is on top and both the Texts below the image.

[@RevanthMatha]

same, not sure how to fix it.

[@RevanthMatha]

another comment was left here that said "Don't know if this is only my problem, but I needed to add the line .listStyle(.plain) after the List and embed the Image and VStack in a HStack. Otherwise, it looks a bit messy." I verified it works.

[@tiojoe_]

Awesome tutorial! Well done

[@seanallen]

Thanks, Pose!

[@MegaSalv0]

Great video as always! SwiftUI works like magic until it doesn't... As soon as one wants to do some customization, it seems it lacks the necessary tools... SwiftUI is for sure the future of iOS development, but it is not the present. Compared to UIKit, it looks a bit more than a toy. Easy and fun to use, but for serious stuff, the good old UIKit is still on top. Regardless, keep up with the great work!

[@seanallen]

Agreed... it's still early. Hopefully we get a nice upgrade in a couple weeks at WWDC. But it's clearly the future and I'm excited for it.

[@abdouett3676]

Thank you for this awesome work!

[@seanallen]

Glad you enjoyed it 👍

[@bhavithagottimukkula2859]

How to change the list row background color when selected and persist the state of the list row when user logout and login

[@christiansimbarashe]

always so helpful. Thank you

[@rianskischipanski3951]

whats the difference between scaledToFit and aspectRatio(contentMode: .fit)?

[@Adventurevictoria]

just wondering are there any performance issues for the Navigation link under the List? you know that all the resources under the navigation link will be initiated right away .

[@jimfinlaw2519]

Hi Sean, This works great, Just want to adapt this app so constraints look full on ipad version. Can you route me to tutorial on how to do that?

[@GoeHybrid]

Now how do you pull to refresh that list?

[@hiroshihorie392]

love this content! thanks!

[@nileshjdarji]

Is there a modifier to NOT have large navigation title?

[@seanallen]

You can add a parameter to that modifier called .displayMode = .inline to go back to the old, non-large style.

[@nileshjdarji]

@@seanallen Oh ya. I remember. You did mentioned this in one of your SwiftUI navigation videos. Thank you Sean.

[@bronwynpotgieter7405]

When you place the link in, should it be in a sting? If I'm not passing it in through data that I already have? In my case, I just want a button that goes to a gitHub repo

[@bitsurfer0101]

How could you make the image that you're showing a placeholder image until the user selects an image from the Photo Library?

[@10-minutemathtutor37]

Thanks a lot for the great tutorial. I made a list like this and am struggling to add a search function to it. I have been trying to use “searchable”. Any tips?

[@zhenniu2451]

mismatch between the code and ui? how is it's laying out the hstack when you have no container for hstack?

[@georgehabib4333]

Excellent tutorial - Thanks Sean. Quick newbie question - is there a way to switch to another view (say "VideoDetailView") through the action of a button press?

[@VRVitaly]

Great video. very helpful!

[@seanallen]

Glad it was helpful!

[@samha1513]

Love your vids

[@seanallen]

Thanks Sam 😀

[@mavinsao9919]

I really really like your video.

[@Denzilkwabi]

Amazing video! I was wondering in your video list.. is it possible to have Videos with different "let"'s? Ie one video will not have a title and another will.. hope I am making sense?

[@elmcapp6032]

Great video. Could you do an update video showing how to do this from an api call instead of json file

[@DavidNitzscheBell]

This is such a great video! Thank you so much!!! One little comment....24:15 you could just put the font and foregroundColor on the HStack, right? instead of repeating?

[@seanallen]

Yup. This would be an optimization.

[@nigelgee3576]

Nice one. Just a couple In the VideoDetailView I would of put the two modifiers on the HStack. And in the VideoCell do not need the HStack as the View is in the list (unless you put in its own file with a Preview which you could put An HStack in that)

[@TygruletZ]

Amazing tutorial ! So less code compared with UIKit ! The only problem is when I rotate the device and I try to click on another cell...will stop working. Do you guys know what can be the fix for this issue ? Because will be very helpful for everybody.

[@dumbobg]

Hi Sean, just starting out with SwiftUI and I find your videos EXTREMELY helpful! Thanks very much for this! One question: How do I add a color to my data? I'd like to include a custom color to each item on my list. Edit: Nevermind, figured it out :)

[@jamesvanderbilt201]

Please do a tutorial on how to import an existing project, because nothing I do is working. I receive the error “failed to build the scheme …”

[@gabrielrml]

Sean, this is clear, uncomplicated and great, thank you. Can I ask? Is there any chance you could amend this lesson by showing how you would put a searchbar in the solution too?

[@chezchezchezchez]

Hello! Did you happen to find out? I’d like to know also, thank you!

[@crafter89]

Can the emulator run a whole iOS Operating system? I'm asking because you werde able to switch to safari.

[@w0mblemania]

Sean, I'm sure it's been asked before, but how are you doing those super-classy iPhone mockup animations/videos? Are you using rotato.app?

[@seanallen]

Yup. That’s exactly it.

[@w0mblemania]

@@seanallen Cheers.

[@TarunReddy_RM]

Great video as always. I was wondering how you would structure the data in firebase if you want to be able to send users friend requests and only if they accept, they are then added to the follower list? Thank you!

[@StuartZiane]

Hi Sean, thanks very much for this great tutorial. In my app as I'm following along, the background is grey, with the list having cells with white backgrounds. How can I make the entire screen have a white background (in light mode)? I seem to be having a lot of trouble finding a way to do this. Thanks very much!

[@seanallen]

You can add a the .listStyle modifier onto the List and give it a style of .plain (in iOS 15).

[@StuartZiane]

@@seanallen Excellent! Thank you!

[@nileshjdarji]

Is List in SwiftUI same as TableView in UIKit? Sorry I have bought your SwiftUI course but haven't started yet due to illness.

[@seanallen]

Yes, List in SwiftUI is a TableView

[@Prabhashana]

my simulator show backbutton when I add navigation view