SwiftUI Photo Widget Tutorial for iOS 14

iOS 14 widgets are the most recent mobile trend available only for SwiftUI projects. Although there are many widget tutorials, I want to show you here step by step how you can create a photo widget template. Let me guide you through and shed light on the widgets’ logic.

For the full project git files check here: https://github.com/muhammedtanriverdi/Photo-Widget-Sample

Firstly, let’s create the main app in SwiftUI. We need a project that can handle pick photo from Photo Gallery, save selected photos and list them on the screen.

To achieve this, let’s create a SwiftUI project.

Choose the newest lifecycle: SwiftUI App. You are not obliged to choose SwiftUI App lifecycle, you can also choose the UIKit App Delegate lifecycle if you prefer to continue with UIKit lifecycle. One of the significant changes is that you will not have a LaunchScreen.storyboard. Anyway, this is not the topic of this article. Let’s continue with the widget creation.

By now we have created a SwiftUI project. Let’s implement codes to choose a photo from photo gallery and save it into UserDefaults.

We also need to keep the list of all saved photos in UserDefaults. To achieve this, we can create a unique id for each photo and save these ids array into UserDefaults.

Why do we save photos in UserDefaults? Because we want to access them from the Widget extension. So we will use “App Group” capabilities.

Let’s create an app group. Click the “+Capability” button and search for “App Groups”.

Then click + button in the App Groups section and write your app group name. It should be unique and it will be signed for your developer account.

Later, we will also do the same process for the Widget target when we create it.

Let’s add the photo gallery usage permission in plist file before we forget.

Let’s dive into codes. To achieve first create a Helper class which we need both in App and the Widget extension. Helper class has two static functions to get the list of all saved photos id and get photos from UserDefaults.

We can keep the global parameters in this file. Note that appGroupName must be the same as you have registered it in the target.

let appGroupName = "group.com.s3soft.Photo-Widget"

We need a ‘struct’ that conforms UIViewControllerRepresentable to open image picker for SwiftUI.

Then let’s create the button to open image picker.

You see there is an ImageManager observable object. It manages the saving process and keeps photo ids.

Don’t forget to create environmental object and pass to ContentView.

@main
struct Photo_WidgetApp: App {
 var body: some Scene {
  WindowGroup {
   ContentView().environmentObject(ImageManager())
  }
 }
}

We have codes to save the selected photo into UserDefaults. Now it’s time to display saved photos on the screen. We just need a scroll view to show the photos in ContentView file.

ScrollView {    
 LazyVGrid(columns: twoColumnsGrid) {           
  ForEach(imageManager.photos, id: \.self) { photo in                  
   Image(uiImage: Helper.getImgFromUserDefaults(key: photo))              
    .resizable()                
    .scaledToFill()                
    .frame(width: 100, height:100)                
    .cornerRadius(10)        
  }    
 }
}

Now we have an app that selects a photo from the gallery, saves it in UserDefault and displays it in the app.

It’s time to start for the Widget extension. Let’s add a new target in Xcode to our project (File->New->Target). Search for ‘widget’.

Choose “Activete” option and the scheme will be activated automatically.

Activate the App Group for the new target and add the same app group name. Remember that we did it also for the main project target. It’s the same processes. Please keep in mind that you must use the same app group name for communication between targets.

Let’s dive into codes. Actually, we have almost everything now. We will just get the list of photo ids from UserDefaults and display them on a timeline. To test it, let’s put 5 seconds time interval.

Note that you need to set the targets for the “Helper” class. We also want to use the Helper class in the Widget target, because we will use the same Helper class functions to get photo id list and photo from UserDefaults.

You can put a preview photo in Assets in the Widget project.

That’s it! You can go further for features like removing, ordering, time interval settings and etc.

Thank you!