1. Home
  2. Training Library
  3. Programming
  4. Programming Courses
  5. Using WidgetKit to Create and Manage Widgets in iOS

Widget Theory


What is WidgetKit?
Creating a Model
Hero View
9m 25s
10m 45s

The course is part of this learning path

Start course
1h 8m

In this course, we explore what widgets are and how to work with them. You'll learn what a widget is and how you can leverage them in order to provide an optimum user experience in your apps.


Hi, within this lecture, we're going to create our first widget. So, in order to do that, we're going to open the left hand pane, and we're going to click over here. Not the project folder, but the project itself. And I'm going to say 'File', 'New', 'Target'. So, in the target, you can see some of the features that we have looked before. But if you scroll down a little bit, you can see the widget residing at the.. and I believe we have worked with a couple of those custom keyboard extension, imessage extension, but we have never worked with the widget extension before. So, we're going to do that. We're going to go over the widget extension and hit the 'Next' button. And for a widget, name doesn't matter, but I'm going to call this HeroWidget. But if we call this HeroWidget, I believe we're going to get an error. But let's see if we can make it, you're going to see why we have this error in a minute. So, let me call this HeroWidget. So, I'm not going to change the team. I'm not going to change anything in here. So, project embedded application, everything stays the same. If I say finish, it will say HeroWidget already exists because that's our app name and we already have a folder named like that.

So, I'm going to call this WidgetHero. So, the widget name doesn't matter at this point. If you call this something else, it will ask you to activate it. I'm going to show you what an activation is. So, I'm going to say activate. So, what activate does is that it changes the target. So, right now our widget here extension is going to run on the iPhone. I'm going to change it back, because we don't want that. I'm going to make our app run on the iPhone 11 simulator over here. So, once you do that, you can come back to your folders on the left hand side, and you're going to see the WidgetHero is created over here. The reason why we got this error because HeroWidget folder already exists in here, so we have to pick another name. So, WidgetHero, here you go. Now, if you go to WidgetHero.swift file, you can see the structure of the widgets. Now, what I'm going to do, I'm going to open the properties window because we need to add this, like add our views as a member of the WidgetHero extension as well. So, make sure you choose the HeroView.swift. And make sure you come over here to Identity Inspector and choose the extension as a target membership here as well. And we're not only going to do that for HeroView, we're going to do that for whatever swift file that we want to reach from WidgetHero. So, I'm going to do this for CircularImageView as well, I'm going to do this for a superhero model as well because we're going to use all of those things in the WidgetHero.swift. So, make sure you actually have implemented the target memberships. So, that's it right now, I believe we are ready to go and analyze the code inside of the WidgetHero.swift. So, in WidgetHero, I believe we can close this thing down, so that we can have a better way of seeing everything in here. And also we can close this down as well. We're only going to focus on the code and try to understand what this code does. So, as you can see, it comes with precoded things in here and it gives an idea to us about what's going to be implemented, what's going to be executed. It starts with the provider as you can see. And by the way, this code can change a little bit in time. For example, you can maybe see something else inside of provider at the beginning of this file, but provider will be there maybe at the end of the file. So, ordering of these trucks and functions doesn't matter, you have to understand each of the components and what they do in order to work with the widgets. So, we're going to start with the provider, and as you can see, it's a timelineProvider IntentTimeline provider. So, what does timelineProvider means? So, this is a provider, and provides us the data and the timeline of that data. Then it's going to be shown when it's going to be updated. It starts with a placeholder. This is a function as you can see it goes on and we have a lot of things here to cover. We're going to cover everything in here in this lecture that we're going to write the codes. Let's start with the placeholder. So, we're going to get the data from our model or from somewhere else inside of our project, but it may take some time to get this. So, we need a placeholder to show in the widget before we get the data. So, we need to be quick in here. We don't need anything like a 2-CPU intensive processes or something like that. We only need to display a placeholder data, so that our users won't see some progress bar or something refreshing when they go to their home main screen. Right now, we're going to go into the homepage, the main page of the iPhones. So, it's a big responsibility for us. So, if a user doesn't get satisfied with what they see on their home screen, they will immediately delete that widget. So, that we have to be pretty actually conscious over here in order to provide a good user experience. So, you need to give a placeholder. And then you need two more functions to implement.

One is getSnapshot and the other one is getTimeline. So, this used to have name like snapshot and timeline. Now, it's named like getSnapshot, getTimeline. It really doesn't matter what name it has, maybe they will change it in the future. Like willgetSnapshot willgetTimeline, I don't know. But the main thing is that we have the snapshot and we have the timeline. In the snapshot thingy, we have a snapshot of the current timeline because we have a timeline provider over here and we can change the data in time. If the data that we are showing in the widget for example, we can display a certain amount of the data or certain period of the timeline data in the snapshot and it will be displayed when a user tries to add our widget to their home screen. We're going to see how it works. And in the timeline, we can actually change the data that we are showing in the widget within a given period of time. For example, we can say that change the data every one hour. We can say that change data every three hours or something like that depending on the time, depending of the hour of the date, you can make it change. In our example, we don't want to do that by the way. In our example, we want to change the data when the user changes the user defaults data. We're going to see how it works, but in here, if you want to work with timeline, if you want to change the data according to time, you can see how it works in the exemplary codes.

So, what snapshot and getTimeline functions do is that they provide a time period, and they provide some way to change the data within a given period of time. So, in the getSnapshot method, you don't need to go crazy. You should do some basic things because it's going to be shown in the library, so it needs to be very easy to get the data to show the user. But in the getTimeline, you can just go whatever you want. So, in the timeline entry, we have the data itself. So, as you can see it's an entry, it's a data. And this timeline entry will be passed to the provider timelineProvider. We see the timeline entry over here in the getSnapshot and getTimeline functions. So, you don't need to create a data. You don't need to create some crazy configuration here. All you need to do just past the thing that you want to show inside of the widget in the simple entry, properties, attributes and after that, after we're done with the data, it will be automatically passed to the providers so that we can get it and use it in the WidgetHeroEntryView. So, WidgetHeroEntryView is the view that we're going to be displaying inside of the actual widget. So, this is where we create our view. And finally, in the widget itself, we're going to define the widget and show it to the user. So, as you can see, there are a lot of things to cover here. And we're going to write the code for each one of them, starting in the next lecture.

About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics