Widget Settings
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.

Learning Objectives

  • Learn what a widget is
  • Create an app that includes widgets

Intended Audience

This course is intended for anyone who wants to learn how to develop apps on iOS.


To get the most out of this course, some basic knowledge of iOS development would be beneficial. We recommend that you take this course as part of the Developing Mobile Apps for iOS learning path.


Hi, within this lecture, we're going to actually write the code for our widget. So far, we have understood what each function, or what each struct does in this widget kit structure like a provider and entry and views. Now, we're going to fill them up. So, I'm going start with the simple entry, or entry because it will, it has to contain our superhero object because that's what we want to display in the widget itself. So, let me close this down because we don't need it and I'm going to come up over here because I will have some kind of  error messages. Since I added hero, it has to ask them as a parameter over here and over here as well. Right now, I have added the superhero as a property in my entry. Now, I have to specify the heroes in the provider. For the placeholder, we can just create a regular superhero, like we can show the It will be aesthetic. We don't actually want to show some kind of, I don't know, a data coming from the internet, or coming from some service. We just want to display a placeholder here. So, I'm going to go with the Batman. But in the get snapshot, we want to show the real deal. So, for example, we want to get the data from the user defaults. So, let me open the left pane because we need to do some stuff. For example, we need to make sure that this communicates with the assets folder. So, we haven't actually specified assets to be a member of our target extension like widget hero extension. So, make sure you do that. And after that, actually we've going to have to come over here and make sure our widget also is a part of the app group itself. So, we have added the hero widget here to the app group. Now we want to do the same here. Now, I'm going to go to the capability and app groups and make sure you choose the exact same app group that you have chosen over here. So, In my case this is So, I'm going to come over here and choose the exact same thing and make sure we don't have a red line or like a warning or air message over here and that we are okay. Now, we can actually reach this app storage thing  from the widgethero.swift as well. So, I'm going to copy all of these things and I'm going to paste it in here because I don't want to make mistakes because there are a lot of static texts or strings over there. So, once we copy that, we can reach the hero data. So, I'm going to close this down and come back to snapshot function. So, in the snapshot, if you look at the snapshot, by the way, it's creating an entry and we're giving that entry in a completion block. So, we have to do the same thing. We got to create an entry and in this entry it asks for some parameters and then we pass it to a completion function. So, this is a completion function. In case, we are doing some things that need to be; like needs to be done with a synchronous way. However, we don't really need that, we're just going to decode some real simple stuff, but in a case where it's CPU intensive or in a case where it will take time, we can actually leverage that completion block and maybe even do that in a synchronous way using some stuff that we have learned before. However, in this case, I don't need that, I'm just going to delete all of these things. I'm going to decode the JSON data. So, I'm going to say, if flat hero try question mark and we're going to use the JSONDecoder this time, not the encoder. JSONDecoder because we're going to decode the thing that we have encoded before. So, in order to do that, you're going to have to write JSONDecoder().decode. It will ask for a protocol. So, what structure it will follow when its decoding? Is going to decode it according to this Superhero.self. This is the structure and from the heroData. So far so good. If this succeeds then we have our heroData, our hero structure. So, there is a warning in here for some reason. We're going to see why is that. So, I'm going to create our entry. So, entry will ask for the date. So, I'm going to give the current date here. The reason why it's asking for a date because we are in a timeline provider, remember? And in for the configuration, we can just pass the configuration that we get in the snapshot and for the hero, we already have the hero. So, let's right hero over here. And after that, of course, we're going to have to give it to the completion block and then it will be passed to the widget view. If we do command B, here we go. We have the error, at the getTimeline function because we haven't even written it yet. If you come over here, if we look at the things that it's doing, it's creating an entries array, and it's passing that to the timeline and then it's passing the timeline to the completion block. Now, in this case, we're going to have to create a timeline. And in the timeline as you can see, it's asking for an array of entries and it has a policy. If you look at the policies, we can say never. It means that just don't refresh the widget according to time. So, if we say after, we can specify a date and we can say just refresh this widget after this time. We can just say it and it will eventually put the thing that we have specified in the widget. We can just say never in this case. So, that we won't be doing anything like a refreshing the widget according to time, but we're going to do it in a different way. So, we're going to get our data from the user defaults. Anyway, I'm going to delete everything because we want to write it from scratch. Because we're going to get our data from the user defaults, and in fact there is nothing different from this. You can just copy it and paste it over here. You're going to create the heroData, you're going to create the entry. But you shouldn't actually give entry to the completion block, but you should create the timeline this time. And in order to do that, you can just write timeline and open the parentheses. It will ask you for an entries array. Actually, an array of entries. And since we have only one entry, we can just put it in the array. And for the policy, I'm going to go with never. So, I can just pass this to the completion block this time. So, here you go. We have already completed the most important part which is the provider and the entry itself. So, now it's time to fill up the hero entry view and the widget itself. Let's do those 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