Tech

How to create a home screen widget with Flutter

Creating Home Screen Widget with Flutter

İbrahim Yavuz

Flutter Developer

With Flutter, creating home screen widgets is a bit complicated. You can’t make a home screen widget using Dart language. To maintain this, you must use Kotlin for Android or Swift for IOS. In this tutorial, I will explain how to create a home screen widget using Flutter on Android.

The first problem we might face is sending data from the Flutter application to the widget. To overcome this problem we can use a package named home_widget. To install the package open the terminal on your Flutter project folder and type this command:

flutter pub add home_widget

Or you can manually add to pubspec.yaml:

home_widget: ^0.1.6

After the installation, we have to add WidgetReceiver to our AndroidManifest file:

<receiver android:name="HomeWidgetExampleProvider" >
    <intent-filter>
        <action android:name="android.appwidget.action.APPWIDGET_UPDATE" />
    </intent-filter>
    <meta-data android:name="android.appwidget.provider"
        android:resource="@xml/home_widget_example" />
</receiver>

Then, we must create our widget configuration into android/app/src/main/res/xml folder:

<?xml version="1.0" encoding="utf-8"?>
<appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android"
    android:minWidth="40dp"
    android:minHeight="40dp"
    android:updatePeriodMillis="86400000"
    android:initialLayout="@layout/example_layout"
    android:resizeMode="horizontal|vertical"
    android:widgetCategory="home_screen">
</appwidget-provider>

To create a layout for the widget we must create an XML file inside of the android/app/src/main/res/layout folder. You can create your layouts like an Android app. Here is a simple example of a layout:

<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/data"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textSize="14dp"
                android:textFontWeight="500"
                android:textColor="@color/white"
                android:text=""/>
                
</LinearLayout>

This example shows two texts one on top of another.

The next step is creating a provider. Go to android/app/src/main/kotlin/{your package name}/
Create a kotlin file and name it HomeWidgetExampleProvider.kt (You can name it whatever you want).

Before writing code in kotlin we must initialize the home widget in the Flutter project’s main.dart file. In the main function of main.dart file put this line of code:

HomeWidget.setAppGroupId('group.com.widgetexample');

To send data from the Flutter app to the widget, we should call

HomeWidget.saveWidgetData<String>(“<id>”, data)

function. Here is an example of usage:

HomeWidget.saveWidgetData(‘data’, person.age.toString());

Then we should get that data from our home widget with the HomeWidgetExampleProvider.kt file we created.
Example usage of getting data is shown below:

Imagen1.png

We are the partners you’ve been searching for.

Tell us about your project.