Configurable iOS 14 Widget using WidgetKit

In WWDC 2020, New enhancements are introduced in iOS 14, And we got the intro with WidgetKit also.

iOS 14 Widgets have been redesigned to be more beautiful and data-rich, so they can provide even more utility throughout your day. also Widgets brings a fresh look to the things you do most often, making them easier than ever.

WidgetKit is built purely using SwiftUI, It’s important to know that WidgetKit isn’t meant to build mini-apps. It’s a part of our application and we can only
Link widget to some part of the app.

Today’s Goal

1. Build a configurable widget in which users can select 2 currency to get the Exchange rate.
2. We will use https://api.exchangeratesapi.io/ API ad pass use currencies to get the currency data
3. We will create a responsive widget to support multiple families of Widgets (i.e systemSmall, systemMedium, systemLarge)

To create our first widget, Go to File → New → Target and select the Widget Extension template. Make sure you check “Include Configuration Intent” as we are going to make Configurable Widget

Create widget target

By performing the above action, it will create the Widget in the root folder. which contains some SwiftUI code. also, we’ll apply some folder structure to manage our View, Model & Service.

Folder Structure

Now first we will create our Custom Intent to accept the input from and make a customizable Widget. So first we create an Int Enum type of input as below.

Custom Enum intent type

Now we will create the 2 variables(from and to) of Currency Type to make it configurable, So the user can select the From and To currencies.

i.e If the User selects from currency as USD and to currency as INR. they will get a result between these currencies.

So our setup is done. Next, we will move to our coding part.

First, we will create our ExchangeRate model to hold the data between API and View. Go to Currency Widget → Model and create ExchangeRate.swift file

As we have a dynamic keys in response like INR, USD, GBP, etc. So we’ll use Dynamic Coding Keys in Codable to parse this response.

{
  "rates": {
    "INR": 73.3482523444,
    "USD": 1.0
  },
  "base": "USD",
  "date": "2020-10-02"
}

ExchangeRate model

Now we’ll create ExchangeRequestManager, which works as our Network layer. It will accept from and to currency in parameter and return the ExchangeRate model in output.

For that go to Currency Widget → Service & create ExchangeRequestManager.swift file

Our Model and Service are ready 🚀, Now we have to create Timeline entry and TimelineProvider which will hold the entries of data, and advises WidgetKit when to update a widget’s display.

Timeline Entry

Timeline Provider

In the above code, I will explain the major 3 points

1. We have created one enum which is the same replicate of a custom intent enum. We’ll use this enum for our internal purpose.
2. In the second point, we are mapping the custom intent values into our CurrencyType enum. Because it’s easy to use an enum instead of ConfigurationIntent
3. We will generate the timeline, by calling the API from ExchangeRequestManager. as you can check, first we have converted the configuration values into CurrencyType, then passed as param in function.

Now everything is on hand, We just have to display the data into view, So now we will create the View, which displays the data of the ExchangeRate model.

So we will go to Currency Widget → View & create CurrencyWidgetView.swift file

View to display Model data

In the above code, we have created a view in VStack to display the currency data, and we have created a responsive view to display only when the Widget is kind of the medium family.

Now only one thing is remaining, we have to configure the settings of our Widget, in that we will change the display title and supportedFamilies. In this widget, we only going to add support of small and medium family widgets.

Widget Configuration

Now let’s run the output and checks, how it will show in Simulator.

That’s it for today, I hope you learn something about WidgetKit from this article.

If you like this article then please make a clap 👏🏻 for the article.