Flutter Demo by KBTG: How to Add App Clips into Flutter

This article is also useful for Swift users. Just ignore the MethodChannel part since you don’t have to send any information back to Flutter.

App Clips is a new feature in iOS 14 that allows users to install your app more easily by partially activating your app. When you scan the QR code (a specific one from Apple) or tap the NFC or open via website, a popup will display at the bottom of the screen with a nice image and a button to open the App Clips.

Currently, the Flutter team is faced with a limitation when using App Clips, particularly how the size of the app needs to be 10 MB or smaller. They haven’t found a way to make it work yet.

Adding an iOS App Clip target

Therefore in this tutorial, we will be using the App Clips in Native to connect with Flutter as a workaround instead. 😄 I’m definitely not saying that my way is better. For this method, you still need to write both Flutter and Native to make it work. Flutter’s way of getting your Flutter layout and function into App Clips would have been better. But if your project needs it now and cannot wait for Flutter any longer, you can follow my direction. First, let’s start with…

flutterd doctor

This will check the status of my device. Here, I’m using Flutter 2.2.2 . Why flutterd? Here’s how to implement two different versions of Flutter in your app.

รู้จัก Flutter 2.0 กันรึยัง แล้วทำยังไงให้เครื่องเรามีทั้ง 2 เวอร์ชัน?

Here’s my status.

Now time to create a new project with Flutter 2.2.2

flutterd create appclip

After creating your project, go to the project > iOS > open Runner.xcworkspace You will get a project similar to this one.

Let’s start adding App Clips!! Go to Xcode > File > New > Target

Choose iOS > App Clip

Add your product name and choose “UIKit App Delegate” for Life Cycle

You will now have a folder named “appclip” in your project.

Add this code into your ContentView.swift

And add just a blank AppClipViewModel into your project, which we will work on later.

Let’s try running it with the simulator first to check if everything works fine. You should see something like this.

ID From App Clips is not available yet since we haven’t done anything here, so the next step is to get the data from App Clips to display here.

App Clips has a special format from Apple. You can’t just use any QR code to trigger your App Clips. In order to generate App Clips, you have to download and install AppClipGenerator From Apple. Follow this link to download it.

Sign in with your Apple ID

Once installed, you can generate it with this command line.

AppClipCodeGenerator generate --url https://clip.amorn.com/p?id=4141z2k --index 9 --output /Users/amornapichattanakul/Desktop/temp/clip-amorn.svg

Or run this command AppClipCodeGenerator to check what options you have. Here’s the result after I run it.

Basically, it generates https://clip.amorn.com/p?id=4141z2k with the index 9, color template from App Clips, then saves it to my temp folder named clip-amorn.svg. You can change the parameter to your preference.

One thing to keep in mind is that the URL that you generate can’t be too long. The maximum number that I can get is about 10 characters in the parameter. You can try mixing and matching to get the result.

Here’s what I get from App Clips. Hooray! Now let’s scan it with your camera app from iOS 14 .

Oh, an error seems to occur “no usable data found”.

Well, at least it recognizes the App Clip and is trying to do something but won’t work yet because it’s in testing, not production. That’s why they can’t show what you want yet.

To test it out, we have to set it up in a physical device to make it work. Before building your app, you need to add App Clips and your app in the developer certificate first. Also, don’t forget to check App Groups. We will use it later.

You need to create both the app and App Clip, then install the certificate to test on your device. After you have both of them run on your device, you can start setting up Local Experience to test your App Clip.

Don’t forget to register App Groups as well. I will explain what it is later. For mine, I’m using group.com.amorn

Setting in the Physical Device

Go to Settings > Developer > APP CLIPS TESTING > Register Local Experience

• URL PREFIX: https://clip.amorn.com (same URL as the parameter in App Clips Generator)
• BUNDLE ID: com.theamorn.appclip.Clip (has to be exactly the same as below, which you can check in your Xcode)

• Title: Flutter
• Subtitle: App Clip
• Action: Open (Apple has 3 options, which are all just names of the buttons, so don’t worry about it. Here, I change to View to show changes in the real use)
• Choose Photo any photos that you want

Scan it again, and it might just work. Why might? App Clips need some time to cache in your device. I can’t really predict how long it will take. In fact, all developers have this problem. Some people even say it takes a couple hours to work.

REALLY APPLE??

Or another way to make the process faster is by going to Settings > Developer > Clear Experience Cache

For my case, it didn’t show immediately. After trying a few times, however, it finally worked. Therefore, if you follow this tutorial, I guarantee it’ll work but it takes some time. The final result will be as below.

Sadly, Apple doesn’t support App Clips testing in the simulator.

Next, we would like to pass the data from QR code to App Clips to replace N/A. From the URL https://clip.amorn.com/p?id=4141z2k that we generate from AppGenerator, we will pass the ID parameter with the value 4141z2k to your App Clips.

To extract the information from App Clips, Go to SceneDelegate in your appclip folder and add this function.

Once extracting the value from id parameter and set it in your viewModel, rerun your App Clip and scan it again. You will get this result.

Now you can add this parameter in your App Clips to fetch data or anything that you want but this is just a small part of your app. If your users are happy with your demo and want to download the full app, you can use SKOverlay that comes with iOS 14 to show users where to download it.

Users can trigger a popup to download the full app when some conditions are met. The next one is how to save data from your demo and send it to the full app.

Why do we need this? We want to make a smooth transition from the demo to the full app. Whatever the user has done with your demo, you can save and transition it to your full app, so the user won’t have to do it again e.g. register/login. We’ll be using AppGroup for this.

Apple Developer Documentation

Basically, you can use AppGroup to transfer data between your app groups. To add group into your project, go to Targets > Signing & Capabilities > + Capability > App Groups

Remember how I mentioned about checking App Group in your AppID when you register your app? It’s that part. I added group.com.amorn in the App Group Section. If you set it up correctly, it should display as below. There shouldn’t be any warning or errors.

Once we get the data from App Clips, we will save it into AppGroup to share the data between the main app and App Clip.

We’ll save it to UserDefault and use the suiteName that we register. I’m using group.com.amorn, which is the one I register in the capability and set the id into key id in ViewModel.

After saving it, we can access this data from AppGroup from another app by using get UserDefaults with suiteName like below. Highlighted in my Xcode console is the part where it prints as 4141z2k.

Now that App Clips can send data to the full app, the next step will involve Flutter (finally!!) We have to send this information to Flutter by using Flutter Method Channel.

Here’s the sample code of the Method Channel from Dart. We’re using MethodChannel named com.amorn.appclip. This is not related to anything that we set before, so you can set it to whatever you want. It just needs to be exactly the same as in AppDelegate.swift with the method name getDataFromAppDelegate.

Then we add the Method Channel in Native.

As you can see, we use com.amorn.appclip in Native as well as the function getDataFromAppDelegate in Dart, This has to be the same. Otherwise, we can’t connect them to each other.

The final retouch after that is to go back to SceneDelegate and add a function inside this one…

func scene(_ scene: UIScene, continue userActivity: NSUserActivity)

into this one as well.

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions)

The reason is if you have App Clips installed, the first function is not guaranteed to get called every time, while the next one always does. If App Clips is not installed, the first function will be called.

Here’s the link to my demo.

theamorn/flutter-app-clip

And here’s the demo video.

That’s all for the App Clips tutorial with Flutter!!

For Flutter developers, I still feel that this demo is not fully functional yet since we can’t really share code between App Clips and Flutter. If you want your App Clips to fetch data from the network, process it and show the result to App Clips, there’s still a lot of work to be done. My idea is that I want to send data to Flutter and process it inside, then return the result to App Clips without needing to open the main app. I haven’t found a way to do so yet. If anyone has any idea, please share it with me and I would love to update this article.

Meanwhile, Native users can use all functions in Swift to share the code in the App Clips. Simply make them work independently without connecting it back to the full app.

Want to read more stories like this? Or catch up with the latest trends in the technology world? Be sure to check out our website for more at www.kbtg.tech