{"id":23959764,"url":"https://github.com/champ96k/flutter_walkthrough_screen","last_synced_at":"2026-01-11T04:45:14.495Z","repository":{"id":56830486,"uuid":"319433705","full_name":"champ96k/flutter_walkthrough_screen","owner":"champ96k","description":"A flutter package that helps the developer in creating a customized onboarding screen of their app.","archived":false,"fork":false,"pushed_at":"2021-08-14T13:42:04.000Z","size":879,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T00:11:09.987Z","etag":null,"topics":["dart","flutter","flutter-plugin","flutterpackage","onboardingscreens","packages","ui","walkthrough"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_walkthrough_screen","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/champ96k.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}},"created_at":"2020-12-07T20:16:11.000Z","updated_at":"2024-03-05T16:45:29.000Z","dependencies_parsed_at":"2022-09-09T17:11:27.672Z","dependency_job_id":null,"html_url":"https://github.com/champ96k/flutter_walkthrough_screen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/champ96k%2Fflutter_walkthrough_screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/champ96k%2Fflutter_walkthrough_screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/champ96k%2Fflutter_walkthrough_screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/champ96k%2Fflutter_walkthrough_screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/champ96k","download_url":"https://codeload.github.com/champ96k/flutter_walkthrough_screen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681688,"owners_count":21144737,"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","flutter-plugin","flutterpackage","onboardingscreens","packages","ui","walkthrough"],"created_at":"2025-01-06T18:52:54.871Z","updated_at":"2026-01-11T04:45:14.462Z","avatar_url":"https://github.com/champ96k.png","language":"Dart","funding_links":["https://www.buymeacoffee.com/champ96k"],"categories":[],"sub_categories":[],"readme":"# Flutter Walkthrough Screen\n\nA flutter package which help developer in creating a customize onboarding screens of their app.\n\n ![Bitbucket open issues](https://img.shields.io/bitbucket/issues-raw/champ96k/flutter_walkthrough_screen)\n\n\n## Screenshots\n\n![](https://i.ibb.co/L05Kg47/Walkthrough.png)\n\n\n## Usage\n\n\n[Example](https://github.com/champ96k/flutter_walkthrough_screen/tree/main/example)\n\nTo use this package :\n\n* add the dependency to your [pubspec.yaml](https://github.com/champ96k/flutter-onboarding-screen/blob/master/pubspec.yaml) file.\n\n```yaml\n  dependencies:\n    flutter:\n      sdk: flutter\n    flutter_walkthrough_screen:\n```\n\n### How to use\n\n```dart\nclass TestScreen extends StatelessWidget {\n    /*here we have a list of OnbordingScreen which we want to have, each OnbordingScreen have a imagePath,title and an desc.\n      */\n  final List\u003cOnbordingData\u003e list = [\n      OnbordingData(\n        image: AssetImage(\"images/pic1.png\"),\n        titleText:Text(\"This is Title1\"),\n        descText: Text(\"This is desc1\"),\n      ),\n       OnbordingData(\n        image: AssetImage(\"images/pic2.png\"),\n        titleText:Text(\"This is Title2\"),\n        descText: Text(\"This is desc2\"),\n      ),\n       OnbordingData(\n        image: AssetImage(\"images/pic3.png\"),\n        titleText:Text(\"This is Title3\"),\n        descText: Text(\"This is desc4\"),\n      ),\n       OnbordingData(\n        image: AssetImage(\"images/pic4.png\"),\n        titleText:Text(\"This is Title4\"),\n        descText: Text(\"This is desc4\"),\n      ),\n    ];\n\n  @override\n  Widget build(BuildContext context) {\n    /* remove the back button in the AppBar is to set automaticallyImplyLeading to false\n  here we need to pass the list and the route for the next page to be opened after this. */\n    return IntroScreen(\n                 onbordingDataList: list,\n                 colors: [\n                   //list of colors for per pages\n                   Colors.white,\n                   Colors.red,\n                 ],\n                 pageRoute: MaterialPageRoute(\n                   builder: (context) =\u003e NextPage(),\n                 ),\n                 nextButton: Text(\n                   \"NEXT\",\n                   style: TextStyle(\n                     color: Colors.purple,\n                   ),\n                 ),\n                 lastButton: Text(\n                   \"GOT IT\",\n                   style: TextStyle(\n                     color: Colors.purple,\n                   ),\n                 ),\n                 skipButton: Text(\n                   \"SKIP\",\n                   style: TextStyle(\n                     color: Colors.purple,\n                   ),\n                 ),\n                 selectedDotColor: Colors.orange,\n                 unSelectdDotColor: Colors.grey,\n               );\n  }\n}\n```\n\n\n# Customize your onboarding screen design\n\n\nBackground color             |  Background gradient color\n:-------------------------:|:-------------------------:\n![](https://i.ibb.co/87Yd36V/background-color.png)  |  ![](https://i.ibb.co/F8GYJSR/background-gradient-color.png)\n\n\n\nLast page button             |  Next page button\n:-------------------------:|:-------------------------:\n![](https://i.ibb.co/5vLg0pG/last-page-button.png)  |  ![](https://i.ibb.co/qmVRSvV/next-page-button.png)\n\n\nSkip button             |  Define next page route\n:-------------------------:|:-------------------------:\n![](https://i.ibb.co/f0qRn4C/skip-button.png)  |  ![](https://i.ibb.co/MM9f6Xx/page-route.png)\n\n\nSelected dot Color             |  Unselected dot Color\n:-------------------------:|:-------------------------:\n![](https://i.ibb.co/6w344S3/selected-dot-Color.png)  |  ![](https://i.ibb.co/dtpjTD1/unselect-dot-Color.png)\n\n\n\n### Created \u0026 Maintained By\n\n[Tushar Nikam](http://tusharnikam.ml/)\n\n\n\n\u003cp\u003e\u003ca href=\"https://www.twitter.com/champ_96k\"\u003e\u003cimg src=\"https://img.shields.io/badge/twitter-%231DA1F2.svg?\u0026style=for-the-badge\u0026logo=twitter\u0026logoColor=white\" height=25\u003e\u003c/a\u003e \u003ca href=\"https://www.linkedin.com/in/tushar-nikam-a29a97131/\"\u003e\u003cimg src=\"https://img.shields.io/badge/linkedin-%230077B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" height=25\u003e\u003c/a\u003e \u003ca href=\"https://medium.com/@champ96k\"\u003e\u003cimg src=\"https://img.shields.io/badge/medium-%2312100E.svg?\u0026style=for-the-badge\u0026logo=medium\u0026logoColor=white\" height=25\u003e\u003c/a\u003e \u003ca href=\"https://champ96k.github.io\"\u003e\u003cimg src=\"https://img.shields.io/badge/tusharnikam.ml-portfolio-orange\" height=25\u003e\u003c/a\u003e \u003ca href=\"https://stackoverflow.com/users/11157840/tushar-nikam\" target=\"_blank\"\u003e\u003cimg src=\"https://logos-download.com/wp-content/uploads/2019/01/Stack_Overflow_Logo-700x283.png\" alt=\"Stackoverflow\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\"height=25 \u003e\u003c/a\u003e  \u003ca href=\"https://www.buymeacoffee.com/champ96k\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\" alt=\"Buy Me A Coffee\" style=\"height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;\"height=25 \u003e\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchamp96k%2Fflutter_walkthrough_screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchamp96k%2Fflutter_walkthrough_screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchamp96k%2Fflutter_walkthrough_screen/lists"}