{"id":15505899,"url":"https://github.com/adrian-samoticha/flutter_manual_widget_tester","last_synced_at":"2026-05-11T06:02:21.780Z","repository":{"id":43768029,"uuid":"509054597","full_name":"Adrian-Samoticha/flutter_manual_widget_tester","owner":"Adrian-Samoticha","description":"A widget testing utility for the Flutter framework.","archived":false,"fork":false,"pushed_at":"2023-07-31T19:22:55.000Z","size":3759,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-10-19T19:43:33.828Z","etag":null,"topics":["dart","flutter","gui","manual-testing","testing","testing-framework","testing-library","testing-tool","testing-tools","ui","widget-testing"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_manual_widget_tester","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Adrian-Samoticha.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-30T11:36:03.000Z","updated_at":"2023-08-01T08:28:44.000Z","dependencies_parsed_at":"2024-11-16T03:25:03.549Z","dependency_job_id":"84b72b98-de45-4b0d-8778-db5d644c9f1b","html_url":"https://github.com/Adrian-Samoticha/flutter_manual_widget_tester","commit_stats":{"total_commits":398,"total_committers":2,"mean_commits":199.0,"dds":0.002512562814070307,"last_synced_commit":"e616336478c3b23c428e23ca29eade4b7fa72dbb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adrian-Samoticha%2Fflutter_manual_widget_tester","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adrian-Samoticha%2Fflutter_manual_widget_tester/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adrian-Samoticha%2Fflutter_manual_widget_tester/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Adrian-Samoticha%2Fflutter_manual_widget_tester/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Adrian-Samoticha","download_url":"https://codeload.github.com/Adrian-Samoticha/flutter_manual_widget_tester/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246083168,"owners_count":20720920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","flutter","gui","manual-testing","testing","testing-framework","testing-library","testing-tool","testing-tools","ui","widget-testing"],"created_at":"2024-10-02T09:24:50.768Z","updated_at":"2026-05-11T06:02:16.742Z","avatar_url":"https://github.com/Adrian-Samoticha.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- \nThis README describes the package. If you publish this package to pub.dev,\nthis README's contents appear on the landing page for your package.\n\nFor information about how to write a good package README, see the guide for\n[writing package pages](https://dart.dev/guides/libraries/writing-package-pages). \n\nFor general information about developing packages, see the Dart guide for\n[creating packages](https://dart.dev/guides/libraries/create-library-packages)\nand the Flutter guide for\n[developing packages and plugins](https://flutter.dev/developing-packages). \n--\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg width=\"640\" height=\"266\" src=\"./svg/logo.svg\" alt=\"Flutter Manual Widget Tester logo\"\u003e\n\u003c/p\u003e\n\n**flutter_manual_widget_tester** is a Flutter package that allows you to manually test your Flutter widgets in isolation. It provides a simple UI to interact with your widgets and modify their properties:\n\n \u003c!-- TODO: insert screenshot here --\u003e\n\n## Getting Started\nLet’s assume we are developing a `CustomList` widget which displays a list of items. It is given a list of strings as well as a heading string. It then displays the heading and the list of items, while styling the heading according to a set of provided colors. Let’s write the code for the first version:\n\n```dart\nclass CustomList extends StatelessWidget {\n  const CustomList({\n    super.key,\n    required this.headerColor,\n    required this.headingColor,\n    required this.stringList,\n    required this.heading,\n  });\n\n  final Color headerColor;\n  final Color headingColor;\n  final List\u003cString\u003e stringList;\n  final String heading;\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      crossAxisAlignment: CrossAxisAlignment.stretch,\n      children: [\n        Container(\n          color: headerColor,\n          height: 32.0,\n          child: Center(\n            child: Text(\n              heading,\n              style: TextStyle(\n                color: headingColor,\n              ),\n            ),\n          ),\n        ),\n        Expanded(\n          child: SingleChildScrollView(\n            child: Column(\n                children: stringList.map((e) {\n              return SizedBox(\n                height: 32.0,\n                child: Text(e),\n              );\n            }).toList()),\n          ),\n        ),\n      ],\n    );\n  }\n}\n```\n\nNow, to manually test this `CustomList` widget, we can use the `ManualWidgetTester` provided by this package. To do so, make sure your `MyApp` class’ `MyHomePage` builds a `ManualWidgetTester` like so:\n\n```dart\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  const MyApp({Key? key}) : super(key: key);\n\n  @override\n  Widget build(BuildContext context) {\n    return const MaterialApp(\n      home: MyHomePage(),\n    );\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  const MyHomePage({Key? key}) : super(key: key);\n\n  @override\n  State\u003cMyHomePage\u003e createState() =\u003e _MyHomePageState();\n}\n\nclass _MyHomePageState extends State\u003cMyHomePage\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return ManualWidgetTester(\n      builders: [\n        WidgetTestBuilder(\n          id: 'custom list',\n          name: 'Custom List',\n          icon: Icons.list,\n          builder: (context, settings) {\n            final headerColor = settings.getSetting(\n              'headerColor',\n              const Color.fromRGBO(0, 0, 255, 1.0),\n            );\n            final headingColor = settings.getSetting(\n              'headingColor',\n              const Color.fromRGBO(255, 255, 255, 1.0),\n            );\n\n            final numberOfItems = settings.getSetting('numberOfItems', 10);\n            final stringList = List.generate(\n              numberOfItems,\n              (index) =\u003e 'Item $index',\n            );\n\n            final heading = settings.getSetting('heading', 'Custom List');\n\n            return CustomList(\n              headerColor: headerColor,\n              headingColor: headingColor,\n              stringList: stringList,\n              heading: heading,\n            );\n          },\n        ),\n      ],\n    );\n  }\n}\n```\n\nAs you can see, `ManualWidgetTester` receives a list of `WidgetTestBuilder` instances. Each `WidgetTestBuilder` represents a widget you want to manually test. It receives an ID which is to be kept consistent across hot reloads, a name and icon to display in the UI, and most importantly the `builder` function which builds the widget you want to test. The `builder` method receives a `WidgetTestSessionCustomSettings` instance which provides access to the settings that can be modified in the UI. Here, we are using settings to modify the `headerColor`, `headingColor`, `numberOfItems`, and `heading` properties of the `CustomList` widget.\n\nIf we now run this app and click the plus icon in the top right, we will see our `Custom List` widget in the list. Clicking it will load the UI to modify its settings and view the widget. The window should look like this:\n\n\u003cimg width=\"1072\" alt=\"Screenshot 2023-07-31 at 20 45 58\" src=\"https://github.com/Adrian-Samoticha/flutter_manual_widget_tester/assets/86920182/2589aac0-c527-4184-acb0-0067d411ea44\"\u003e\n\nWe can use the sidebar to modify the settings of the widget, change the current zoom level using the buttons on the bottom, resize the widget using the resize handles and interact with the widget as we normally would in our app. Any changes to the settings will automatically rebuild the widget and update the view. For instance, we can click the `headerColor` button and change the color to see the header update in real time.\n\n\u003cimg width=\"1072\" alt=\"Screenshot 2023-07-31 at 20 50 42\" src=\"https://github.com/Adrian-Samoticha/flutter_manual_widget_tester/assets/86920182/dc22054c-5006-4dcc-9c34-81a2cf29c907\"\u003e\n\n$$\\Downarrow$$\n\n\u003cimg width=\"1072\" alt=\"Screenshot 2023-07-31 at 20 50 51\" src=\"https://github.com/Adrian-Samoticha/flutter_manual_widget_tester/assets/86920182/f5dca5dc-df53-4404-bc46-315d4f7fc8ce\"\u003e\n\nAdditionally, we can change “generic settings,” such as the current media query properties or the default text style.\n\nIn fact, if we increase the default font size, we find our first error. The list items do not have enough height to accommodate the larger text. Additionally, our widget appears to not respect the padding defined in the media query. These errors might go unnoticed when testing within our app, because there would be no way to manually modify these generic settings. Let’s fix those errors and perform a hot reload. The code now looks like this:\n\n```dart\nclass CustomList extends StatelessWidget {\n  const CustomList({\n    super.key,\n    required this.headerColor,\n    required this.headingColor,\n    required this.stringList,\n    required this.heading,\n  });\n\n  final Color headerColor;\n  final Color headingColor;\n  final List\u003cString\u003e stringList;\n  final String heading;\n\n  @override\n  Widget build(BuildContext context) {\n    return Column(\n      crossAxisAlignment: CrossAxisAlignment.stretch,\n      children: [\n        Container(\n          color: headerColor,\n          child: SafeArea(\n            child: Center(\n              child: Text(\n                heading,\n                style: TextStyle(\n                  color: headingColor,\n                ),\n              ),\n            ),\n          ),\n        ),\n        Expanded(\n          child: SingleChildScrollView(\n            child: Column(\n                children: stringList.map((e) {\n              return SizedBox(\n                child: Text(e),\n              );\n            }).toList()),\n          ),\n        ),\n      ],\n    );\n  }\n}\n```\n\nMore importantly, the custom list widget now respects the media query and has enough height for the larger text:\n\n\u003cimg width=\"1072\" alt=\"Screenshot 2023-07-31 at 21 02 24\" src=\"https://github.com/Adrian-Samoticha/flutter_manual_widget_tester/assets/86920182/169db4a8-36d0-4d28-8905-1a8c03a087fe\"\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrian-samoticha%2Fflutter_manual_widget_tester","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadrian-samoticha%2Fflutter_manual_widget_tester","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadrian-samoticha%2Fflutter_manual_widget_tester/lists"}