This is the second part of the series recording how I managed to create a MAUI app that can interact with an iOS widget. In this post, we will explore how to create a Hello World widget in iOS and have our MAUI app bundle it. I highly recommend reading the first post, Creating iOS Widgets with MAUI - Part 1: Interoperability, if you haven’t read it yet, as the topic in this post will require knowledge from the previous one.

Disclaimer: I am just sharing my personal experience. I do not guarantee the information in this post is 100% correct or accurate. I am not, by any means, expressing that I am an expert in mobile development.

Creating the widget

In Xcode, create a new App project. Although we don’t use this App project in our MAUI app development, this App project has its value to us. We will cover this in later sections. For Team, please choose the personal team Xcode created for you. Carefully choose your Organization Identifier and remember the Bundle Identifier - we will use them soon.

Your project should looks like this:

Click File > New > Target to create a Widget extension. Note that you cannot create a Widget extension without an App project. Name your widget extension something like “HelloWidgetExtension” and leave everything as default. Make sure both Project and Embed in Application are set to your App project. When asked to activate the scheme, click Yes.

Run the App from Xcode to make sure everything works in Simulator. You should be able to create the widget under your App project.

Note:

If your App has bundle identifier “MyOrg.HelloWidget”, then your widget extension bundle identifier must be prefixed with your app’s bundle identifier, e.g. “MyOrg.HelloWidgetWidgetExtension”.

Bundle the widget in our MAUI app

Using the same MAUI project we created in the previous post, we are going to replace the identity of the Xcode App project with our MAUI app. Edit your MAUI project file and make sure the value in <ApplicationId> is exactly the same as the Xcode App project. You can view and set it under the Xcode top-level project > Build Settings.

<ApplicationId>MyOrg.HelloWidget</ApplicationId>

Create a folder PlugIns under Platforms/iOS.

Back to Xcode:

At the top, choose the scheme created when the widget extension project was created, then choose Any iOS Simulator Device (arm64, x86_64) next to the scheme. Build the widget extension.

Go to Product > Show Build Folder in Finder. From Products > Debug-iphonesimulator, you should see a file named: HelloWidgetExtension.appex . Copy this into your MAUI project’s Platforms/iOS/PlugIns folder.

Your folder structure should look like this:

Open your MAUI project file. Remember the section we created to include the static library we exported? Add the following into that same section:

<BundleResource Include="Platforms/iOS/PlugIns/**">
  <LogicalName>PlugIns/%(RecursiveDir)%(Filename)%(Extension)</LogicalName>
</BundleResource>

Delete the bin and obj folders to ensure we have a clean build.

Build the project again with this command:

dotnet build -f net10.0-ios -r iossimulator-arm64

Finally launch our MAUI app with:

dotnet run -f net10.0-ios -r iossimulator-arm64 -p:_DeviceName=:v2:udid=[your_simulator_id]]

You can also use a single command as below, it is just my personal preference:

dotnet build -t:Run -f net10.0-ios -r iossimulator-arm64

You will find that our MAUI app now replaces the Xcode app. You can now try creating the widget under our MAUI app’s name. Tapping on the widget will open our MAUI app.

Note:

1. You can configure your MAUI project .csproj file to automate the extension copying work.
2. Some suggests the use of <AdditionalAppExtensions> , but I didn’t try it yet.

🎉 Congratulations! You have bundled an iOS widget into your MAUI app. 👏 Simply bundling an iOS widget into our MAUI app is not very helpful if we are not able to interact with it. In the next (and final) post of the series, we will go over what we have learned so far to communicate between them.

The full source code of this demo project can be found at my GitHub repository

This post was originally published on Medium.