{"id":15038335,"url":"https://github.com/simformsolutionspvtltd/flutter_showcaseview","last_synced_at":"2025-05-14T05:10:37.697Z","repository":{"id":37090364,"uuid":"185921742","full_name":"SimformSolutionsPvtLtd/flutter_showcaseview","owner":"SimformSolutionsPvtLtd","description":"Flutter plugin that allows you to showcase your features on flutter application. 👌🔝🎉","archived":false,"fork":false,"pushed_at":"2025-05-12T09:20:08.000Z","size":13690,"stargazers_count":1727,"open_issues_count":8,"forks_count":475,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-12T09:59:05.143Z","etag":null,"topics":["android","dart","flutter","flutter-package","flutter-plugin","flutter-widget","highlight","ios","package","showcaseview","showcaseview-library","spotlight","tooltip"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/showcaseview","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/SimformSolutionsPvtLtd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"zenodo":null}},"created_at":"2019-05-10T05:03:09.000Z","updated_at":"2025-05-11T00:49:31.000Z","dependencies_parsed_at":"2024-07-11T12:07:11.420Z","dependency_job_id":"05962101-6729-44e2-8a46-ccf5340b51a2","html_url":"https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview","commit_stats":{"total_commits":240,"total_committers":52,"mean_commits":4.615384615384615,"dds":0.875,"last_synced_commit":"91c519d74b5765bfda56204d4dfde18ba31d7a93"},"previous_names":["simformsolutions/flutter_showcaseview"],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Fflutter_showcaseview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Fflutter_showcaseview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Fflutter_showcaseview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SimformSolutionsPvtLtd%2Fflutter_showcaseview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SimformSolutionsPvtLtd","download_url":"https://codeload.github.com/SimformSolutionsPvtLtd/flutter_showcaseview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254076850,"owners_count":22010611,"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":["android","dart","flutter","flutter-package","flutter-plugin","flutter-widget","highlight","ios","package","showcaseview","showcaseview-library","spotlight","tooltip"],"created_at":"2024-09-24T20:38:03.659Z","updated_at":"2025-05-14T05:10:37.673Z","avatar_url":"https://github.com/SimformSolutionsPvtLtd.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Showcase View - Simform LLC.](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_showcaseview/master/preview/banner.png)\n\n\n# ShowCaseView\n\n[![Build](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/actions/workflows/flutter.yaml/badge.svg?branch=master)](https://github.com/SimformSolutionsPvtLtd/flutter_showcaseview/actions) [![showcaseview](https://img.shields.io/pub/v/showcaseview?label=showcaseview)](https://pub.dev/packages/showcaseview)\n\nA Flutter package allows you to Showcase/Highlight your widgets.\n\n_Check out other amazing open-source [Flutter libraries](https://pub.dev/publishers/simform.com/packages) and [Mobile libraries](https://github.com/SimformSolutionsPvtLtd/Awesome-Mobile-Libraries) developed by Simform Solutions!_\n\n## Preview\n\n![The example app running in Android](https://raw.githubusercontent.com/SimformSolutionsPvtLtd/flutter_showcaseview/master/preview/showcaseview.gif)\n\n## Migration guide for release 4.0.0\n\nRenamed parameters `titleAlignment` to `titleTextAlign` and `descriptionAlignment`\nto `descriptionTextAlign` to correspond it more with the TextAlign property.`titleAlignment`\nand `descriptionAlignment` will be used for widget alignment.\n\nBefore:\n```dart\nShowcase(\n  titleAlignment: TextAlign.center,\n  descriptionAlignment: TextAlign.center,\n),\n```\n\nAfter:\n```dart\nShowcase(\n  titleTextAlign: TextAlign.center,\n  descriptionTextAlign: TextAlign.center,\n),\n```\n\n## Getting Started\n\n1.  Add dependency to `pubspec.yaml`\n\n    *Get the latest version in the 'Installing' tab on [pub.dev](https://pub.dev/packages/showcaseview)*\n\n```dart\ndependencies:\n    showcaseview: \u003clatest-version\u003e\n```\n\n2.  Import the package\n```dart\nimport 'package:showcaseview/showcaseview.dart';\n```\n\n3. Register a `ShowCaseView` widget.\n```dart\n  void initState() {\n  super.initState();\n  ShowcaseView.register(scope: scopeName);\n  );\n```\n\n4. Adding a `Showcase` widget.\n```dart\nGlobalKey _one = GlobalKey();\nGlobalKey _two = GlobalKey();\nGlobalKey _three = GlobalKey();\n\n...\n\nShowcase(\n  key: _one,\n  title: 'Menu',\n  description: 'Click here to see menu options',\n  child: Icon(\n    Icons.menu,\n    color: Colors.black45,\n  ),\n),\n\nShowcase.withWidget(\n  key: _three,\n  height: 80,\n  width: 140,\n  targetShapeBorder: CircleBorder(),\n  container: Column(\n    crossAxisAlignment: CrossAxisAlignment.start,\n    children: \u003cWidget\u003e[\n      ...\n    ],\n  ),\n  child: ...,\n),\n```\n\n5. Starting the `ShowCase`:\n\n- If you have a single showcase, then you can start the `ShowCaseView` using the code below:\n\n```dart\nsomeEvent() {\n  ShowCaseView.get().startShowCase([_one, _two, _three]);\n}\n```\n\n- If you have multiple ShowcaseViews, then you can start the `ShowCaseView` using the code below,\n  which is recommended:\n\n```dart\nsomeEvent() {\n  ShowCaseView.getNamed(scopeName).startShowCase([_one, _two, _three]);\n}\n```\n\nIf you want to start the `ShowCaseView` as soon as your UI built up then use below code:\n\n```dart\nWidgetsBinding.instance.addPostFrameCallback((_) =\u003e\n  ShowCaseWidget.of(context).startShowCase([_one, _two, _three])\n);\n```\n\nIf you have some animation or transition in your UI and you want to start the `ShowCaseView` after\nthat then use below code:\n\n```dart\nWidgetsBinding.instance.addPostFrameCallback((_) =\u003e\n  ShowCaseWidget.of(context).startShowCase([_one, _two, _three], delay: \"Animation Duration\")\n);\n```\n\n## How to use\n\nCheck out the **example** app in the [example](example) directory or the 'Example' tab on\npub.dartlang.org for a more complete example.\n\n## MultiShowcaseView\n\nTo show multiple showcase at the same time provide same key to showcase.\nNote: auto scroll to showcase will not work in case of the multi-showcase and we will use property\nof first initialized showcase for common things like barrier tap and colors.\n\n```dart\n\nGlobalKey _one = GlobalKey();\n...\n\nShowcase\n  (\n    key: _one,\n    title: 'Showcase one',\n    description: 'Click here to see menu options',\n    child: Icon(\n    Icons.menu,\n    color: Colors.black45,\n  ),\n),\n\nShowcase(\n  key: _one,\n  title: 'Showcase two',\n  description: 'Click here to see menu options',\n  child: Icon(\n  Icons.menu,\n  color:Colors.black45,\n  ),\n),\n```\n\n## Scrolling to active showcase\n\nAuto Scrolling to active showcase feature will not work properly in scroll views that renders widgets on demand(ex, ListView, GridView).\n\nIn order to scroll to a widget it needs to be attached with widget tree. So, If you are using a scrollview that renders widgets on demand, it is possible that the widget on which showcase is applied is not attached in widget tree. So, flutter won't be able to scroll to that widget.\n\nSo, If you want to make a scroll view that contains less number of children widget then prefer to use SingleChildScrollView.\n\nIf using SingleChildScrollView is not an option, then you can assign a ScrollController to that scrollview and manually scroll to the position where showcase widget gets rendered. You can add that code in onStart method of `ShowCaseWidget`.\n\nExample:\n\n```dart\n// This controller will be assigned to respected sctollview.\nfinal _controller = ScrollController();\n\nShowCaseView.register\n(\n  onStart: (index, key) {\n    if(index == 0) {\n      WidgetsBinding.instance.addPostFrameCallback((_) {\n       // If showcase widget is at offset 1000 in the listview.\n       // If you don't know the exact position of the showcase widget,\n       // You can provide nearest possible location.\n       // \n       // In this case providing 990 instead of 1000 will work as well.\n        _controller.jumpTo(1000);\n      });\n    }\n  },\n);\n```\n\n## Custom Showcase Widget\n\nYou can create a custom showcase widget using `Showcase.withWidget`:\n\n```dart\nShowcase.withWidget\n(\n  key: _customKey,\n  height: 80,\n  width: 140,\n  targetShapeBorder: CircleBorder(),\n  container: Column(\n    crossAxisAlignment: CrossAxisAlignment.start,\n    children: \u003cWidget\u003e[\n      Text(\"This is a custom widget!\", style: TextStyle(color: Colors.white)),\n      SizedBox(height: 10),\n      Text(\"You can add any content here.\", style: TextStyle(color: Colors.white)),\n    ],\n  ),\n  child: FloatingActionButton(\n  onPressed: () {},\n  child: Icon(Icons.add),\n  ),\n)\n```\n\n### Using Tooltip Actions\n\nYou can add action buttons to your tooltips to enhance user interaction:\n\n```dart\nShowcase\n(\nkey: _actionKey,\ntitle: 'Profile',\ndescription: 'Tap to view your profile',\ntooltipActions: [\nTooltipActionButton(\ntype: TooltipActionButtonType.next,\nname: 'NEXT',\nonTap: () {\n// Custom action when next is pressed\nprint(\"Next pressed\");\n},\n),\nTooltipActionButton(\ntype: TooltipActionButtonType.skip,\nname: 'SKIP',\n),\n],\ntooltipActionConfig: TooltipActionConfig(\nposition: TooltipActionPosition.outside,\nalignment: MainAxisAlignment.center,\n),\nchild: CircleAvatar(\nchild: Icon(Icons.person)\n,\n)\n,\n)\n```\n\n### Custom Action Buttons\n\nCreate custom action buttons with `TooltipActionButton.custom`:\n\n```dart\nShowcase\n(\nkey: _customActionKey,\ntitle: 'Custom Actions',\ndescription: 'This showcase has custom action buttons',\ntooltipActions: [\nTooltipActionButton.custom(\nbutton: Container(\npadding: EdgeInsets.symmetric(horizontal: 10, vertical: 4),\ndecoration: BoxDecoration(\ncolor: Colors.blue,\nborderRadius: BorderRadius.circular(8),\n),\nchild: Row(\nchildren: [\nIcon(Icons.arrow_forward, color: Colors.white, size: 18),\nSizedBox(width: 5),\nText('Continue', style: TextStyle(color: Colors.white)),\n],\n),\n),\nonTap: () {\n// Custom action\n},\n),\n],\nchild: ListTile(\nleading: Icon(Icons.star),\ntitle: Text('Featured Item'),\n),\n)\n```\n\n### Floating Action Widget\n\nAdd a floating action widget that appears during the showcase:\n\n```dart\nShowcase\n(\nkey: _floatingKey,\ntitle: 'Swipe Gesture',\ndescription: 'Swipe left or right to navigate',\nfloatingActionWidget: (context) =\u003e Container(\nwidth: 200,\nheight: 100,\npadding: EdgeInsets.all(10),\nmargin: EdgeInsets.only(bottom: 50),\ndecoration: BoxDecoration(\ncolor: Colors.white,\nborderRadius: BorderRadius.circular(10),\nboxShadow: [\nBoxShadow(color: Colors.black26, blurRadius: 10, offset: Offset(0, 5))\n],\n),\nchild: Column(\nchildren: [\nIcon(Icons.swipe, size: 40),\nText('Swipe to continue', style: TextStyle(fontWeight: FontWeight.bold)),\nText('Use your finger to navigate between items'),\n],\n),\n),\nchild: Card(\nchild: ListTile(\ntitle: Text('Swipeable Item'),\nsubtitle: Text('Try swiping this item'\n)\n,\n)\n,\n)\n,\n)\n```\n\n## Functions of `ShowCaseView.get()` and `ShowCaseView.getNamed(scopeName)`:\n\n| Function Name | Description                                         |\n|---------------|-----------------------------------------------------|\n| startShowCase | Starting the showcase                               |\n| next          | Starts next showcase                                |\n| previous      | Starts previous showcase                            |\n| dismiss       | Dismisses all showcases                             |\n| unRegister    | UnRegister all showcases and the showcaseView scope |\n\n## Main Contributors\n\n\u003ctable\u003e\n  \u003ctr\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Flamingloon\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/81063988?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSahil Totala\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/vatsaltanna\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/25323183?s=100\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVatsal Tanna\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/sanket-simform\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/65167856?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eSanket Kachhela\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/HappyMakadiyaS\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/97177197?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eHappy Makadiya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/Ujas-Majithiya\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/56400956?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eUjas Majithiya\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n     \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/aditya-chavda\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/41247722?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAditya Chavda\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## License\n\n```text\nMIT License\n\nCopyright (c) 2021 Simform Solutions\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Fflutter_showcaseview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimformsolutionspvtltd%2Fflutter_showcaseview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimformsolutionspvtltd%2Fflutter_showcaseview/lists"}