{"id":15008554,"url":"https://github.com/salihcanbinboga/info_popup","last_synced_at":"2025-04-09T16:05:16.431Z","repository":{"id":59619426,"uuid":"538171387","full_name":"SalihCanBinboga/info_popup","owner":"SalihCanBinboga","description":"The allows you to easily show a simple, customizable popup on your wrapped widget.","archived":false,"fork":false,"pushed_at":"2024-11-24T15:55:53.000Z","size":12118,"stargazers_count":31,"open_issues_count":1,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-09T16:05:08.868Z","etag":null,"topics":["dart","dart-lang","dart-package","flutter","flutter-android-ios","flutter-examples","flutter-package","flutter-web","flutter-widget","pubdev","ui"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/info_popup","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/SalihCanBinboga.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-09-18T16:33:45.000Z","updated_at":"2025-01-23T03:00:59.000Z","dependencies_parsed_at":"2023-02-02T20:31:43.504Z","dependency_job_id":"62be1cd9-223f-442c-b568-b0d4b70a4c6b","html_url":"https://github.com/SalihCanBinboga/info_popup","commit_stats":{"total_commits":111,"total_committers":2,"mean_commits":55.5,"dds":"0.10810810810810811","last_synced_commit":"d10d21ee87137f6c8b157518f2e03c4694b8581b"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SalihCanBinboga%2Finfo_popup","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SalihCanBinboga%2Finfo_popup/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SalihCanBinboga%2Finfo_popup/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SalihCanBinboga%2Finfo_popup/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SalihCanBinboga","download_url":"https://codeload.github.com/SalihCanBinboga/info_popup/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065289,"owners_count":21041871,"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","dart-lang","dart-package","flutter","flutter-android-ios","flutter-examples","flutter-package","flutter-web","flutter-widget","pubdev","ui"],"created_at":"2024-09-24T19:19:21.043Z","updated_at":"2025-04-09T16:05:16.413Z","avatar_url":"https://github.com/SalihCanBinboga.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Introduction\n\nThe `info_popup` package allows you to easily show a **simple**, **customizable** popup on your wrapped widget. The **highlight feature**, which can be activated at will, helps draw the user's attention to the desired location. \n\nYou can test it now on the [Info Popup preview page](https://info-popup.web.app/#/ \"Info Popup\"). \nNote that the website experience may be different.\n\n## Features\n\n- Display a ***customizable*** popup on your wrapped widget\n- Activate the ***highlight*** feature to draw the user's attention to the desired location\n- Fully customize the content of the popup\n- Add margins to the popup from ***any side***\n\n![MainPresentation](assets/readme/example_presentation.gif)\n![HighlightExample](assets/readme/highlight_example.png)\n\n## Getting Started\n\nTo use this package, add `info_popup` as a dependency in your `pubspec.yaml` file.\n\n```yaml\ndependencies:\n  info_popup: ^3.0.0\n```\n\nAlternatively, you can add it to your project by running the following commands in your terminal:\n\nwith Dart:\n\n```shell\n$ dart pub add info_popup\n```\n\nwith Flutter:\n\n```shell\n$ flutter pub add info_popup\n```\n\n## Usage\n\nTo show a popup, wrap the widget that you want to display the popup on with the `InfoPopupWidget` widget. All you have to do is wrap it in the widget you want to show information with the `InfoPopupWidget` widget. With the `InfoPopupController`, you can customize it as you wish, and turn it on and off.\n\n```dart\nimport 'package:info_popup/info_popup.dart';\n```\n\n```dart\n\tInfoPopupWidget(\n\t\tcontentTitle: 'Info Popup Details',\n\t\tchild: Icon(\n\t\t\tIcons.info,\n\t\t\tcolor: Colors.pink,\n\t\t),\n\t),\n```\n\n## Example \n\nThis is a normal info text displayed using the `InfoPopupWidget` widget with several optional parameters.\n\n```dart\n              InfoPopupWidget(\n                contentTitle: 'Info Popup Details',\n                arrowTheme: InfoPopupArrowTheme(\n                  color: Colors.pink,\n                  arrowDirection: ArrowDirection.up,\n                ),\n                contentTheme: InfoPopupContentTheme(\n                  infoContainerBackgroundColor: Colors.black,\n                  infoTextStyle: TextStyle(color: Colors.white),\n                  contentPadding: const EdgeInsets.all(8),\n                  contentBorderRadius: BorderRadius.all(Radius.circular(10)),\n                  infoTextAlign: TextAlign.center,\n                ),\n                dismissTriggerBehavior: PopupDismissTriggerBehavior.onTapArea,\n                areaBackgroundColor: Colors.transparent,\n                indicatorOffset: Offset.zero,\n                contentOffset: Offset.zero,\n                onControllerCreated: (controller) {\n                  print('Info Popup Controller Created');\n                },\n                onAreaPressed: (InfoPopupController controller) {\n                  print('Area Pressed');\n                },\n                infoPopupDismissed: () {\n                  print('Info Popup Dismissed');\n                },\n                onLayoutMounted: (Size size) {\n                  print('Info Popup Layout Mounted');\n                },\n                child: Icon(\n                  Icons.info,\n                  color: Colors.pink,\n                ),\n              ),\n```\n\"This is a ***custom popup*** example created using the `InfoPopupWidget` widget.\n\n##### Custom Popup Widget\n```dart\n              InfoPopupWidget(\n                customContent: Container(\n                  decoration: BoxDecoration(\n                    color: Colors.blueGrey,\n                    borderRadius: BorderRadius.circular(10),\n                  ),\n                  padding: const EdgeInsets.all(10),\n                  child: Column(\n                    children: const \u003cWidget\u003e[\n                      TextField(\n                        decoration: InputDecoration(\n                          hintText: 'Enter your name',\n                          hintStyle: TextStyle(color: Colors.white),\n                          enabledBorder: OutlineInputBorder(\n                            borderSide: BorderSide(color: Colors.white),\n                          ),\n                        ),\n                      ),\n                      SizedBox(height: 10),\n                      Center(\n                        child: Text(\n                          'Example of Info Popup inside a Bottom Sheet',\n                          style: TextStyle(\n                            color: Colors.white,\n                          ),\n                        ),\n                      ),\n                    ],\n                  ),\n                ),\n                arrowTheme: const InfoPopupArrowTheme(\n                  color: Colors.pink,\n                  arrowDirection: ArrowDirection.up,\n                ),\n                dismissTriggerBehavior: PopupDismissTriggerBehavior.onTapArea,\n                areaBackgroundColor: Colors.transparent,\n                indicatorOffset: Offset.zero,\n                contentOffset: Offset.zero,\n                onControllerCreated: (controller) {\n                  print('Info Popup Controller Created');\n                },\n                onAreaPressed: (InfoPopupController controller) {\n                  print('Area Pressed');\n                },\n                infoPopupDismissed: () {\n                  print('Info Popup Dismissed');\n                },\n                onLayoutMounted: (Size size) {\n                  print('Info Popup Layout Mounted');\n                },\n                child: Icon(\n                  Icons.info,\n                  color: Colors.pink,\n                ),\n              ),\n```\n\n\n## Conclusion\n\nThe info_popup package provides a simple and effective way to show a customizable popup on your wrapped widget. With the highlight feature, you can draw the user's attention to the desired location.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/SalihCanBinboga/info_popup/blob/master/LICENSE \"LICENSE\") file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalihcanbinboga%2Finfo_popup","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalihcanbinboga%2Finfo_popup","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalihcanbinboga%2Finfo_popup/lists"}