Setting Up Android App widget in Flutter.
In this blog post, I will guide you through the steps to set up home_widget in your Flutter application, enabling you to create interactive home screen widgets for Android.
In this post, I’ll share how to set up home_widget in your Flutter application to create interactive home screen widgets for Android .
What is Widget?
Widgets are small app views that can be added to the home screen of a device. They provide quick access to information and functionality without needing to open the full app. In Flutter, the home_widget package allows developers to create and manage these widgets for Android devices.
Implementing the home_widget package
- To implement home_widget in your Flutter app, follow these steps:
Official home_widget package documentation:
Step 1 - Install the home_widget package
flutter pub add home_widget Add the following import statement to your Dart file where you want to use the home_widget package:
import 'package:home_widget/home_widget.dart';Step 2 - Create a app widget
- Open the Android folder of your Flutter project in Android Studio.
- Create a new App Widget by right-clicking on the
resfolder and selecting >New > Widget > App Widget. - Give a name to your widget.
Three Main Files Created
- XML Layout File: Defines the layout of the widget.
- AppWidget Provider (Kotlin class): Manages the widget's behavior.
- AppWidget Info XML: Contains metadata about the widget.
Step 3 - Store widget data in SharedPreferences
To update the widget's content, you can use SharedPreferences to store data that the widget will display.
- In XML Layout File,update the code
SharedPreferences allows you to store key-value pairs of data that can be accessed by both your Flutter app and the widget. This is essential for updating the widget's content dynamically based on user interactions within the app.
The widget does not automatically listen to SharedPreferences; it reads data from SharedPreferences only when its lifecycle method (onUpdate) is triggered.
Connect to Flutter app
- In your Flutter app, use the home_widget package to update the widget's data.
- Add a following code snippet to home Screen init state
@override void initState() { super.initState(); _updateHomeWidget(); } Future<void> _updateHomeWidget() async { await HomeWidget.saveWidgetData( 'widget_text', "Welcome to Flutter Series ", ); await HomeWidget.updateWidget( name: 'AppWidgetDemo', ); } This code snippet demonstrates how to update the home screen widget with new data when the Flutter app's home screen initializes.
- The
_updateHomeWidgetfunction saves a string "Welcome to Flutter Series " to SharedPreferences with the key 'widget_text'. - It then calls
HomeWidget.updateWidgetto refresh the widget named 'AppWidgetDemo -widget_textshould match the key used in the widget provider (Kotlin file) when reading from SharedPreferences.
Final Step - Run the app
- Run your Flutter app on an Android device.
- Add the widget to your home screen by long-pressing on the home screen, selecting Widgets, and choosing your app's widget.
- The widget should now display the data you set from your Flutter app.
Recommended for you
Jan 28, 2026
Flutter State Management using Provider (Beginner Friendly).
In this blog, we will explore how to manage state in a Flutter application using the Provider package, which is a popular and beginner-friendly approach.
Jan 24, 2026
Beginner Flutter Mistake- Fonts Worked in Debug, Broke in APK
A common pitfall when using custom fonts in Flutter apps is that they may work perfectly in debug mode but break in the release APK. This blog post explores the reasons behind this issue and how to fix it.