{"id":10661,"date":"2024-01-23T13:09:56","date_gmt":"2024-01-23T13:09:56","guid":{"rendered":"https:\/\/www.capitalnumbers.com\/blog\/?p=10661"},"modified":"2025-10-08T10:55:00","modified_gmt":"2025-10-08T10:55:00","slug":"home-screen-widgets-for-flutter-app","status":"publish","type":"post","link":"https:\/\/www.capitalnumbers.com\/blog\/home-screen-widgets-for-flutter-app\/","title":{"rendered":"How to Create and Add Home Screen Widgets in a Flutter Mobile Application"},"content":{"rendered":"\n

In the dynamic world of mobile app development, creating a personalized and engaging user experience is crucial. Flutter, a framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase, has gained immense popularity for its flexibility and ease of use. If you want to improve the user\u2019s engagement with your Flutter mobile app, one of the options is to provide the home screen widget of your app, and the home_widget<\/a> package from pub.dev can be a game-changer for this purpose.<\/p>\n

What is home_widget Package?<\/h2>\n

HomeWidget is a package that makes creating HomeScreen Widgets easier on Android and iOS. HomeWidget does not allow writing Widgets with Flutter itself. It still requires writing the Widgets with native code<\/b>. However, it provides a unified interface for sending data, retrieving data, and updating the Widgets. This package lets you easily create and update live widgets on the user’s home screen, providing a more personalized and interactive experience.<\/p>\n

Getting Started<\/h2>\n

Create a new Flutter project and replace the `main.dart` file with the below code – <\/p>\n

\n
import 'package:flutter\/material.dart';\nvoid main() {\n runApp(const MyApp());\n}\n\n\nclass MyApp extends StatelessWidget {\n const MyApp({super.key});\n\n\n @override\n Widget build(BuildContext context) {\n   return MaterialApp(\n     title: 'Flutter Demo',\n     theme: ThemeData(\n       colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),\n       useMaterial3: true,\n     ),\n     home: const MyHomePage(title: 'Flutter Demo Home Page'),\n   );\n }\n}\n\n\nclass MyHomePage extends StatefulWidget {\n const MyHomePage({super.key, required this.title});\n final String title;\n\n\n @override\n State createState() => _MyHomePageState();\n}\n\n\nclass _MyHomePageState extends State {\n List todo = ['TODO 1', 'TODO 2'];\n final TextEditingController taskNameController = TextEditingController();\n\n\n addTodo() {\n   showDialog(\n     context: context,\n     builder: (BuildContext context) {\n       return AlertDialog(\n         content: StatefulBuilder(\n           builder: (context, setState) {\n             return SizedBox(\n               height: 200,\n               child: Column(\n                 children: [\n                   const Text('Add new todo', style: TextStyle(fontSize: 22)),\n                   const SizedBox(height: 24),\n                   TextFormField(\n                     maxLines: 3,\n                     controller: taskNameController,\n                     style: const TextStyle(fontSize: 14),\n                     decoration: InputDecoration(\n                       contentPadding: const EdgeInsets.all(20),\n                       hintText: 'Task',\n                       border: OutlineInputBorder(\n                         borderRadius: BorderRadius.circular(15),\n                       ),\n                     ),\n                   ),\n                 ],\n               ),\n             );\n           },\n         ),\n         actions: [\n           ElevatedButton(\n             onPressed: () => Navigator.of(context, rootNavigator: true).pop(),\n             child: const Text('Cancel'),\n           ),\n           ElevatedButton(\n             onPressed: () {\n               if (taskNameController.value.text.isNotEmpty) {\n                 setState(() {\n                   todo.add(taskNameController.value.text);\n                   taskNameController.clear();\n                 });\n               }\n               Navigator.of(context, rootNavigator: true).pop();\n             },\n             child: const Text('Save'),\n           ),\n         ],\n       );\n     },\n   );\n }\n\n\n @override\n Widget build(BuildContext context) {\n   final ColorScheme colorScheme = Theme.of(context).colorScheme;\n   final Color oddItemColor = colorScheme.primary.withOpacity(0.05);\n   final Color evenItemColor = colorScheme.primary.withOpacity(0.15);\n\n\n   return Scaffold(\n     appBar: AppBar(\n       backgroundColor: Theme.of(context).colorScheme.inversePrimary,\n       title: Text(widget.title),\n     ),\n     body: ReorderableListView(\n       padding: const EdgeInsets.symmetric(horizontal: 40),\n       children: [\n         for (int index = 0; index < todo.length; index += 1)\n           ListTile(\n             key: Key('$index'),\n             tileColor: (index + 1).isOdd ? oddItemColor : evenItemColor,\n             title: Text(todo[index]),\n             trailing: const Icon(Icons.drag_handle),\n           ),\n       ],\n       onReorder: (int oldIndex, int newIndex) {\n         setState(() {\n           if (oldIndex < newIndex) {\n             newIndex -= 1;\n           }\n           final String item = todo.removeAt(oldIndex);\n           todo.insert(newIndex, item);\n         });\n       },\n     ),\n     floatingActionButton: FloatingActionButton(\n       onPressed: addTodo,\n       tooltip: 'Add Task',\n       child: const Icon(Icons.add),\n     ),\n   );\n }\n}\n<\/code>\n<\/pre>\n<\/div>\n
Here, we have created a basic TODO app where you can add todos and reorder them. <\/p>\n
\"To-Do<\/p>\n
Now our objective is to show the first task from this TODO List in the widget on the Home screen of the device. For that, we need to perform the following steps:<\/p>\n
    \n
  1. We will create a basic home screen widget for iOS and Android using Xcode and Android Studio, respectively.<\/li>\n
  2. We will write dart code to update the content for the widget using the home_widget package.<\/li>\n
  3. Adding native iOS functionality to show updated content.<\/li>\n
  4. Adding native Android functionality to show updated content.<\/li>\n<\/ol>\n
    Creating a basic iOS Home Screen widget<\/h2>\n
      \n
    1. To add a Home Screen widget in iOS, open the project in Xcode.<\/li>\n
    2. Select File \u2192 New \u2192 Target<\/b> from the menu. This adds a new target to the project.<\/li>\n
    3. A list of templates appears. Select Widget Extension<\/b>.<\/li>\n
    4. Type “SimpleTodoWidget”<\/b> into the Product Name box for this widget. Clear<\/b> both the Include Live Activity<\/b> and Include Configuration Intent<\/b> check boxes and Activate.<\/li>\n
    5. Xcode creates and updates several files. We will work on the relevant files later.<\/li>\n<\/ol>\n
      \n
      Update your bundle identifier<\/strong><\/p>\n
      In Xcode, navigate to the settings for your target. In the Signing & Capabilities tab, check that your team and bundle identifier are set.<\/p>\n
      Add the App Group to both the Runner<\/b> target and the SimpleTodoWidgetExtention<\/b> target in Xcode:<\/p>\n
      Select + Capability -> App Groups<\/b> and add a new App Group<\/b>. Repeat for both the Runner<\/b> (parent app) target and the widget<\/b> target.<\/p>\n<\/div>\n
      Creating a basic Android Home Screen Widget<\/h2>\n
        \n
      1. To add a Home Screen widget in Android, open the project’ in Android Studio. <\/li>\n
      2. After the project builds, locate the app directory in the top-left corner. Add your new Home Screen widget to this directory. Right click the directory, select New -> Widget -> App Widget<\/b>.<\/li>\n
      3. \nAndroid Studio displays a new form. Add basic information about your Home Screen widget including its class name, placement, size, and source language\n