How to Build a Widget in Swift with WidgetKit
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- I teach you the basic concepts you'll need to know when building a Widget in Swift. We discuss the Widget timeline, snapshot and how they work. As well as design principles of a great widget. This video will get you up and running into the world of building awesome Widgets.
This is a free preview of my WidgetKit course. This is only the first section that covers a basic widget. We get much more advanced in the full course with network calls, core data, configurations, lock screen widgets, live activities and dynamic island.
Use code PREVIEW to get 15% off the complete course at
seanallen.teachable.com/p/wid...
.swift file to copy and paste MonthConfig from (as seen in video):
www.dropbox.com/s/soafm5suahn...
WWDC 2020 - Design Great Widgets:
developer.apple.com/videos/pl...
Human Interface Guidelines - Widget Section:
developer.apple.com/design/hu...
Twitter:
/ seanallen_dev
Hired.com:
hired.com/x/1n01g
Book and learning recommendations that help out the channel if you decide to purchase (Affiliate Links):
Paul Hudson's Hacking With Swift:
gumroad.com/a/762098803
Donny Wals - Combine:
gumroad.com/a/909014131
Mark Moeyken’s SwiftUI Books:
www.bigmountainstudio.com/swiftui-views-book/fzc51
Objc.io Books (Thinking in SwiftUI & Advanced Swift):
gumroad.com/a/656585843
Ray Wenderlich Books:
store.raywenderlich.com/a/208...
Links to my iOS Dev Setup & iOS Dev Book Recommendations
www.amazon.com/shop/seanallen
Timestamps:
0:00 - What you will learn
2:15 - What you need to know about Widgets
5:11 - How to design great Widgets
9:30 - Setting up our Xcode project
12:12 - WidgetKit code explanation
20:23 - Monthly Widget UI design & basic functionality
36:00 - Dynamically change UI for each month
49:07 - How to build on this
#swift #softwaredeveloper #iosdeveloper - วิทยาศาสตร์และเทคโนโลยี
Use code PREVIEW to get 15% off the WidgetKit Course at seanallen.teachable.com
Hi Sean, I notice in your link you mention that updated courses for iOS 16 will be out soon. For someone who just started learning, would you suggest waiting until those updates are live before investing the time to take your course? Or are there just minor changes from iOS15 -> 16 that the courses will be pretty much the same?
Thank you Sean Allen for this easy and clear and simple view for Widget
Thank you, very educational!
Great overview, Sean! I find your MonthConfig approach very interesting, personally I think I would have tried to solve that with an enum.
Great tutorial! Thank you very much, especially for copying and pasting it🔥
Glad you liked it and happy to help :)
Great tutorial, thanks a lot!
Glad you liked it, Erop!
Oh man! This preview is enticing me to get the course! I'm trying to hold off until I finish a project, But wanted you to know that this preview was a great idea!
Thanks for giving us this handy knowledge Sean! So glad you're back at it with the videos!
Thanks! Hope you enjoy this course. It was a lot of fun to make!
Thank You!
Great vid! although dates are tricky and probably overcomplicates things while learning Widgets. Simply Data, that's all we want for now 😅
Really great stuff 🎉
Glad you enjoyed it, Kalin!
@seanallen . Please make one video about the interactive widget
I made a counter app where the user can track anything they want to quit, such as smoking. What I want is, when the user starts the tracking process, they can see the progress on the home screen with a home widget. I can calculate the date difference, and there is no problem with that. However, I want to calculate the date difference every hour and refresh the home widget every hour. How can I do that?
The best video !!
Thanks Arjun!
If i have an api in my app folder.. how i can call the data? Is there any video to learn? Thank you, u are the best!
Thanks!
I appreciate the support, Jake! Hope you enjoy 😀
Your reaction about how -3 works on code made me laugh, but it's still a good video about WidgetKit, thanks.
Glad you enjoyed it, Ammar!
haha I got you typing capitals, just type vstack and it will complete to VStack, great tutorial by the way, I've build many widgets already, but still struggle to get a perfect adaptive design, the widgets differ so much in size over iPhone/iPad models, even using geometry reader...
Amazing! I was having a hard time getting the initial colors you paste. the ones that were blocks in 'Color(*)'. Is there an easy way to get the desired colors other than the Xcode color library?
Thanks again!!
I love the video but I met a problem where your code Text(entry.date.formatted(.dateTime.weekday())) does not exist. I am using Xcode 12.4 so please help me
do you know how to prevent opening app from widget ? I just wanna use backgorund callback, pls tell me if you have any idea
How can i add custom button "action" on Widget ? 🧐
Please help!
How to add gif on a widget?
Hey can please HELP MEE!!!!!
I want to create a lock screen widget and i create it. But i just need one additional thing i want that when clicked on widget the widget should not open the app (Which it is opening). It should run certain that like making a call to the api.
Can please any one help me how i can achieve this task i have searched all over the internet but didn't found any solution.
PLEASE HELP MEE!!!!!
Hi, do you think iOS development is good path for full time freelancing? Lot of ppl saying best choice is web dev but I'm really enjoying swift. How is the job market?
There are way more web dev jobs in the world than iOS dev. But... there are still plenty of iOS dev jobs and if that's what you enjoy, that's what I'd do.
0:47:52 You went to September because -3 means to go back 3 months from December, as 0 represents December last year. Since 12 - 3 = 9, the calculation gave you a date in September last year
Good to know. Thanks for pointing that out!
Are you working on a video for dynamic Island and live activities?
Yes. That will release when they are officially launched in a later update to iOS 16 (likely in October). They are still in beta at the moment.
I just tried to follow your example but right in the beginning with the gradient, it doesn't fill the entire widget but just a square. How do I get this to fill the whole widget in iOS 17.2? I just signed up for the course, perhaps it covers that part. I definitely want to learn how to get dynamic data from a JSON endpoint.
Hey Mike, yes, this is covered in the course. iOS 17 introduced something called "contentMargins" that is causing that. We address this in the iOS 17 update section of each widget. (It's a pretty simple fix).
Faced the same issue.
In the MonthlyWidget section add `contentMarginsDisabled` at the end. That should fix it.
.configurationDisplayName("My Widget")
.description("This is an example widget.")
.contentMarginsDisabled()
Hi Sean, can we make the Widget translucent. I saw this implementated for whatspp medium size widgets
I've never done it, but I know it's possible. It has to do with pulling a screenshot of their wallpaper and matching the pixel area to be the background of the widget giving the illusion of transparency. I'm pretty sure that's how it's done, but like I said I've never done it.
I have Xcode 12.5. Do I need Xcode 13+ for this course?
I believe Xcode 12.5 will be enough. Widgets were introduced in Xcode 12.
first tutorial which I saw a long intro 0_o
Can you create a widget carrying data from an app or site that is not yours?
Yes. If that app/site has an API you can make a network call to fetch the data and show it in your widget.
I didn’t remember it was that easy
Keep in mind, that was the most basic example. They can get quite complex.
Do you have IOS courses for beginners ?
Yup, you can find it at seanallen.teachable.com. I have one called iOS Dev Launchpad and another called SwiftUI Fundamentals.
@@seanallen awesome I’m looking to start my journey for iOS dev ! Appreciate it !
No problem. Happy to answer any questions you have about the courses!
You know its an INTRO when its 50 min long, thnks
And this is only the small first section of a MUCH more in depth course 😀
@@seanallen thanks for putting some of it for free
No problem 😀
0:42:25 There are two possibilities to change the file name.
First and fastest, slow double click the file name and change it.
Second option, look at the right, Inspectors view -> Identity and Type -> Name.
Great tutorial and nice explanations.
Thanks!
Thanks for the support, Alphonso! I appreciate it 😀