Create native home screen widgets for your Flutter app

In this article we will discuss about how to create native home screen widgets for your Flutter app in just 3 simple steps.

🎥 Video Tutorial

🛠️ Dependencies

home_widget | Flutter Package

🔭 Implementation

Creating home screen widgets for our flutter apps in now easier than ever before. With just 3 simple steps we will be able to complete creating home widgets that can be directly embedded into the device home screen. This feature is available for both android and iOS devices. In this article we will discuss about the iOS setup. You can follow me on my YouTube channel to stay updated with android setup.

We basically go for creating home screen widgets for our app in order to help user, where he/she won’t need to reopen the app every time in order to see the status or changes within the app. These home screen widgets are basic read only components that shows meta data about the app (static data)

This is all about the basics of what home screen widget actually is, Now let’s get started with the coding part to see how we can develop this home screen widget for our flutter app.

The entire process of creating a home screen widget can be broadly classified into 3 main steps.

#1 → iOS Setup

#2 → Sending Data to widget

#3 → Updating native code

With this 3 simple steps, we will be able to complete creating home screen widget for iOS device.

#1 — iOS Setup

In order to create home screen widget for iOS devices, we need an active apple developer account. You can use your own existing appleID for signin to Xcode or you can create one for free by heading over to apple developer console.

After creating an appleID, let’s start by creating a flutter project and add the above mentioned dependency [home_widget].

Now we need to right click on the iOS folder of our flutter project and try opening it in Xcode.

Inside the Xcode we need to create a new target, Select File → New → Target from the menu. This adds a new target to the project.

Inside that menu, let’s search for Widget Extension, select it and and click next.

Where we need to provide name for our target, you can name your widget, and then click finish.

After it is done, we need to run our project from VsCode. Once our flutter app is up and ready we can click anywhere in the device home screen to create a widget for our app. By default the widget shows system time as shown below.

With this we complete step#1, now let’s turn our focus to step#2

#2 — Sending Data to widget

In step#1 we were able to create a home screen widget for our flutter app, but it only shows the system time. Here in step#2 we will focus on modifying it, wherein we will try to send some data from our flutter app to the home screen widget. And try to display them up in the home screen component.

Basically how this home screen widget is going to work is, It makes use of the device storage. It can be userdefaults in case of iOS or sharedPreferences in android. Therefore whenever any change or updation is happening in our flutter app, the changes are stored locally inside the device storage and the home screen widget on the other hand is capable enough to pull that data out from the local storage and show them up here in the UI component.

Now let’s try sending our own custom data to the home screen widget from our flutter app.

In order to do that, we need to move our to Xcode and click on signing and capabilities inside our target menu.

Here, click capabilities and search for app groups.

Double click on it to select an app group for our flutter app. After which we need to click the ‘+’ icon to create an app group.

Once it is done, repeat the same process for the parent runner target as well. With this we have almost completed setting up things on Xcode side. Now Let’s turn our attention to our Flutter Code and add the following code to send data to our home screen widget.

First let’s specify the appGroupId and iosWidgetName inside a StatefulWidget class.

 String appGroupId = '<group.your_app_group_id>';
 String iOSWidgetName = '<your_iOSWidgetName>';

Inside the initstate() we need to call the setAppGroupId() and pass in the appGroudId as the parameter, which we have defined above.

  @override
  void initState() {
    HomeWidget.setAppGroupId(appGroupId);
    super.initState();
  }

Here inside the scaffold, let’s create an elevated button widget, where inside the onpress event we will call updateWidgetFun() that will push the data from our flutter app to home screen widget.

body: Center(
        child: ElevatedButton(
          onPressed: () => updateWidgetFun(),
          child: const Text('Update'),
        ),
      ),

  updateWidgetFun() {
    print('Updated');
    HomeWidget.saveWidgetData<String>('title', 'Flutter');
    HomeWidget.saveWidgetData<String>('description', 'App development');
    HomeWidget.updateWidget(iOSName: iOSWidgetName);
  }

From the above code, we could infer that we are trying to send two values [title and description] to the home screen widget. With this we compete step#2.

#3 → Updating native code

Now we have completed 80% of the entire process. All we need to do is rewrite few native swift code to make the title and description (which we have sent from our flutter app) to get displayed in the home screen widget.

Open Xcode and navigate to our <widget_name> swift file. Inside that file try adding title and description to all func including placeholder, getsnapshot and TimeLineEntry

You can get to see the complete process from my YouTube video: 👇https://www.youtube.com/watch?v=rqo1w0d5i7w&t=639s

Once all the changes are done, re-run your flutter project to see the changes.

Well that’s it. 🎉 Run the code to see it in action.🥳

Refer my video tutorial for complete guide:👉 https://www.youtube.com/watch?v=rqo1w0d5i7w

Check out all my Flutter related blogs here.,👇

vijaycreations

Other articles you may like.,

🔵Setting up your Flutter app for publishing in Play Store.

🟤Async Programming in Dart

🟡Scratch Card in Flutter

🔴Confetti Animation in Flutter

🟢 Google Fonts in Flutter app

🔴 Image Picker in Flutter

🟡 Change App Launcher Icon in Flutter

🟤 Neon Lighting in Flutter

🔵 Image Filter in Flutter

🟣 Enabling Flutter Web

🟠 Animated Icons in Flutter

🟢 Best VSCode Extensions

🔴 AnimatedContainer Widget in Flutter

🟡 GradientText in Flutter

🟤 Custom Clipper in Flutter

🔵 Carousel Slider in Flutter

🟣 Flutter BLoC Pattern

Most popular

Encrypted QR Code generation using Flutter — AES Encryption

Shared Preferences in Flutter

Setting up your Flutter app for publishing in Play Store.

Creating Desktop Apps using Flutter

Flutter Tutorials

If you found this article useful and wish to support my work, you can consider buying me a ☕️ coffee.👇

Pay Vijay R using PayPal.Me

If you want to know more about Flutter and various Widgets in Flutter…?🤓 Then visit my channel 👉🏻 vijaycreations🚩

Thanks.,