{"id":13550771,"url":"https://github.com/xsahil03x/fancy_on_boarding","last_synced_at":"2025-04-04T20:16:00.600Z","repository":{"id":53604671,"uuid":"143615685","full_name":"xsahil03x/fancy_on_boarding","owner":"xsahil03x","description":"Fancy OnBoarding Screen Library","archived":false,"fork":false,"pushed_at":"2023-09-19T08:01:36.000Z","size":4404,"stargazers_count":361,"open_issues_count":9,"forks_count":82,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-28T19:12:30.945Z","etag":null,"topics":["dart","flutter","flutter-package","flutter-ui","google-flutter","hacktoberfest","library","navigation","on-boarding"],"latest_commit_sha":null,"homepage":"https://pub.dartlang.org/packages/fancy_on_boarding","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/xsahil03x.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":"xsahil03x","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null}},"created_at":"2018-08-05T13:35:59.000Z","updated_at":"2025-03-12T18:53:57.000Z","dependencies_parsed_at":"2024-01-16T18:58:14.753Z","dependency_job_id":"15d3c876-6a93-46b3-b671-d0c9e57290e2","html_url":"https://github.com/xsahil03x/fancy_on_boarding","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Ffancy_on_boarding","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Ffancy_on_boarding/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Ffancy_on_boarding/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xsahil03x%2Ffancy_on_boarding/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xsahil03x","download_url":"https://codeload.github.com/xsahil03x/fancy_on_boarding/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242681,"owners_count":20907134,"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-package","flutter-ui","google-flutter","hacktoberfest","library","navigation","on-boarding"],"created_at":"2024-08-01T12:01:37.396Z","updated_at":"2025-04-04T20:16:00.578Z","avatar_url":"https://github.com/xsahil03x.png","language":"Dart","funding_links":["https://patreon.com/xsahil03x"],"categories":["Dart"],"sub_categories":[],"readme":"# 👏 FancyOnBoarding\n\n[![Say Thanks!](https://img.shields.io/badge/Say%20Thanks-!-1EAEDB.svg)](https://saythanks.io/to/xsahil03x) [![Twitter](https://img.shields.io/twitter/url/https/github.com/xsahil03x/fancy_on_boarding.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:\u0026url=https%3A%2F%2Fgithub.com%2Fxsahil03x%2Ffancy_on_boarding)\n\nA Fancy OnBoarding Screen Library for Easy and Quick Usage.\n* Checkout the Original Author : [![GitHub followers](https://img.shields.io/github/stars/matthew-carroll/flutter_ui_challenge_material_page_reveal.svg?style=social\u0026label=Follow)](https://github.com/matthew-carroll/flutter_ui_challenge_material_page_reveal)\n* Checkout the Original Designer : [![GitHub followers](https://img.shields.io/github/stars/Ramotion/paper-onboarding-android.svg?style=social\u0026label=Follow)](https://github.com/Ramotion/paper-onboarding-android)\n\nThe source code is **100% Dart**, and everything resides in the [/lib](https://github.com/xsahil03x/fancy_on_boarding/tree/master/lib) folder.\n\n\n### Show some :heart: and star the repo to support the project\n\n[![GitHub stars](https://img.shields.io/github/stars/xsahil03x/fancy_on_boarding.svg?style=social\u0026label=Star)](https://github.com/xsahil03x/fancy_on_boarding) [![GitHub forks](https://img.shields.io/github/forks/xsahil03x/fancy_on_boarding.svg?style=social\u0026label=Fork)](https://github.com/xsahil03x/fancy_on_boarding/fork) [![GitHub watchers](https://img.shields.io/github/watchers/xsahil03x/fancy_on_boarding.svg?style=social\u0026label=Watch)](https://github.com/xsahil03x/fancy_on_boarding) [![GitHub followers](https://img.shields.io/github/followers/xsahil03x.svg?style=social\u0026label=Follow)](https://github.com/xsahil03x/fancy_on_boarding)  \n[![Twitter Follow](https://img.shields.io/twitter/follow/xsahil03x.svg?style=social)](https://twitter.com/xsahil03x)\n\n[![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=102)](https://opensource.org/licenses/MIT)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/xsahil03x/fancy_on_boarding/blob/master/LICENSE)\n[![Build Status](https://travis-ci.com/xsahil03x/fancy_on_boarding.svg?branch=master)](https://travis-ci.com/xsahil03x/fancy_on_boarding)\n[![CodeCov](https://codecov.io/gh/xsahil03x/fancy_on_boarding/branch/master/graph/badge.svg)](https://codecov.io/gh/xsahil03x/fancy_on_boarding)\n\n### GIF\n\u003cimg src=\"https://user-images.githubusercontent.com/25670178/65394497-90810a00-ddac-11e9-825d-af3f726ac97f.gif\" height=\"400\" alt=\"GIF\"/\u003e\n\n## 💻 Installation\nIn the `dependencies:` section of your `pubspec.yaml`, add the following line:\n\n[![Version](https://img.shields.io/pub/v/fancy_on_boarding.svg)](https://pub.dartlang.org/packages/fancy_on_boarding)\n\n```\nfancy_on_boarding: \u003clatest_version\u003e\n```\n\n## ❔ Usage\n\n### Import this class\n```dart\nimport 'package:fancy_on_boarding/fancy_on_boarding.dart';\n```\n\n### Create a List of PageModel\n\n```dart\n  final pageList = [\n    PageModel(\n        color: const Color(0xFF678FB4),\n        heroImagePath: 'assets/png/hotels.png',\n        title: Text('Hotels',\n            style: TextStyle(\n              fontWeight: FontWeight.w800,\n              color: Colors.white,\n              fontSize: 34.0,\n            )),\n        body: Text('All hotels and hostels are sorted by hospitality rating',\n            textAlign: TextAlign.center,\n            style: TextStyle(\n              color: Colors.white,\n              fontSize: 18.0,\n            )),\n        iconImagePath: 'assets/png/key.png'),\n    PageModel(\n        color: const Color(0xFF65B0B4),\n        heroImagePath: 'assets/png/banks.png',\n        title: Text('Banks',\n            style: TextStyle(\n              fontWeight: FontWeight.w800,\n              color: Colors.white,\n              fontSize: 34.0,\n            )),\n        body: Text(\n            'We carefully verify all banks before adding them into the app',\n            textAlign: TextAlign.center,\n            style: TextStyle(\n              color: Colors.white,\n              fontSize: 18.0,\n            )),\n        iconImagePath: 'assets/png/wallet.png'),\n    PageModel(\n      color: const Color(0xFF9B90BC),\n      heroImagePath: 'assets/png/stores.png',\n      title: Text('Store',\n          style: TextStyle(\n            fontWeight: FontWeight.w800,\n            color: Colors.white,\n            fontSize: 34.0,\n          )),\n      body: Text('All local stores are categorized for your convenience',\n          textAlign: TextAlign.center,\n          style: TextStyle(\n            color: Colors.white,\n            fontSize: 18.0,\n          )),\n      icon: Icon(\n        Icons.shopping_cart,\n        color: const Color(0xFF9B90BC),\n      ),\n    ),\n    // SVG Pages Example\n    PageModel(\n        color: const Color(0xFF678FB4),\n        heroImagePath: 'assets/svg/hotel.svg',\n        title: Text('Hotels SVG',\n            style: TextStyle(\n              fontWeight: FontWeight.w800,\n              color: Colors.white,\n              fontSize: 34.0,\n            )),\n        body: Text('All hotels and hostels are sorted by hospitality rating',\n            textAlign: TextAlign.center,\n            style: TextStyle(\n              color: Colors.white,\n              fontSize: 18.0,\n            )),\n        iconImagePath: 'assets/svg/key.svg',\n        heroImageColor: Colors.white),\n    PageModel(\n        color: const Color(0xFF65B0B4),\n        heroImagePath: 'assets/svg/bank.svg',\n        title: Text('Banks SVG',\n            style: TextStyle(\n              fontWeight: FontWeight.w800,\n              color: Colors.white,\n              fontSize: 34.0,\n            )),\n        body: Text(\n            'We carefully verify all banks before adding them into the app',\n            textAlign: TextAlign.center,\n            style: TextStyle(\n              color: Colors.white,\n              fontSize: 18.0,\n            )),\n        iconImagePath: 'assets/svg/cards.svg',\n        heroImageColor: Colors.white),\n    PageModel(\n      color: const Color(0xFF9B90BC),\n      heroImagePath: 'assets/svg/store.svg',\n      title: Text('Store SVG',\n          style: TextStyle(\n            fontWeight: FontWeight.w800,\n            color: Colors.white,\n            fontSize: 34.0,\n          )),\n      body: Text('All local stores are categorized for your convenience',\n          textAlign: TextAlign.center,\n          style: TextStyle(\n            color: Colors.white,\n            fontSize: 18.0,\n          )),\n      iconImagePath: 'assets/svg/cart.svg',\n    ),\n  ];\n```\n\n### Pass it into the FancyOnBoarding widget\n```dart\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: FancyOnBoarding(\n        doneButtonText: \"Done\",\n        skipButtonText: \"Skip\",\n        pageList: pageList,\n        onDoneButtonPressed: () =\u003e\n            Navigator.of(context).pushReplacementNamed('/mainPage'),\n        onSkipButtonPressed: () =\u003e\n            Navigator.of(context).pushReplacementNamed('/mainPage'),\n      ),\n    );\n  }\n```\n\n## 🎨 Customization and Attributes\n\n#### FancyOnBoarding attributes\n\u003ctable\u003e\n    \u003cth\u003eAttribute Name\u003c/th\u003e\n    \u003cth\u003eExample Value\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003ctr\u003e\n        \u003ctd\u003epageList\u003c/td\u003e\n        \u003ctd\u003eList\u0026lt;PageModel\u0026gt;\u003c/td\u003e\n        \u003ctd\u003eThe list of pages to be displayed\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonDoneButtonPressed\u003c/td\u003e\n        \u003ctd\u003e(){}\u003c/td\u003e\n        \u003ctd\u003eFunction to be called on pressing done button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eonSkipButtonPressed\u003c/td\u003e\n        \u003ctd\u003e(){}\u003c/td\u003e\n        \u003ctd\u003eFunction to be called on pressing skip button\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edoneButtonText\u003c/td\u003e\n        \u003ctd\u003e\"Let's Go\"\u003c/td\u003e\n        \u003ctd\u003eDone button text content defaults to \"Done\"\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eskipButtonText\u003c/td\u003e\n        \u003ctd\u003e\"Skip\"\u003c/td\u003e\n        \u003ctd\u003eSkip button text content defaults to \"Skip\"\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eshowSkipButton\u003c/td\u003e\n        \u003ctd\u003etrue\u003c/td\u003e\n        \u003ctd\u003eSkip button should be visible or not. Defaults to true\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ebottomMargin\u003c/td\u003e\n        \u003ctd\u003e8.0\u003c/td\u003e\n        \u003ctd\u003eIndicator bottom margin. Defaults to 8.0\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003edoneButton\u003c/td\u003e\n        \u003ctd\u003eButton(onPressed:(){},child:Text('Done'))\u003c/td\u003e\n        \u003ctd\u003eCustom DoneButton. Will replace default doneButton if provided\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eskipButton\u003c/td\u003e\n        \u003ctd\u003eButton(onPressed:(){},child:Text('Skip'))\u003c/td\u003e\n        \u003ctd\u003eCustom SkipButton. Will replace default doneButton if provided\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n\n#### PageModel attributes \n\u003ctable\u003e\n    \u003cth\u003eAttribute Name\u003c/th\u003e\n    \u003cth\u003eExample Value\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ecolor\u003c/td\u003e\n        \u003ctd\u003eColor(0xFF65B0B4)\u003c/td\u003e\n        \u003ctd\u003eThe background color of the page\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eheroAssetPath\u003c/td\u003e\n        \u003ctd\u003e'assets/banks.png'\u003c/td\u003e\n        \u003ctd\u003eThe main onboarding image\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eheroAssetColor\u003c/td\u003e\n        \u003ctd\u003eColor(0xFF65B0B4)\u003c/td\u003e\n        \u003ctd\u003eMain onboarding image color\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003etitle\u003c/td\u003e\n        \u003ctd\u003eText('Banks')\u003c/td\u003e\n        \u003ctd\u003eTitle of the page\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003ebody\u003c/td\u003e\n        \u003ctd\u003eText('We carefully verify all banks before adding them into the app')\u003c/td\u003e\n        \u003ctd\u003eBody of the page\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eiconAssetPath\u003c/td\u003e\n        \u003ctd\u003e'assets/wallet.png'\u003c/td\u003e\n        \u003ctd\u003eIcon for the floating bubble\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n        \u003ctd\u003eicon\u003c/td\u003e\n        \u003ctd\u003eIcon(Icons.shopping_cart)\u003c/td\u003e\n        \u003ctd\u003eIcon for the floating bubble, Will replace 'iconAssetPath' if provided\u003c/td\u003e\n    \u003c/tr\u003e\n    \n\u003c/table\u003e\n\n\n# 👍 How to Contribute\n1. Fork it\n2. Create your feature branch (git checkout -b my-new-feature)\n3. Commit your changes (git commit -am 'Add some feature')\n4. Push to the branch (git push origin my-new-feature)\n5. Create new Pull Request\n\n# 📃 License\n\n    Copyright (c) 2018 Sahil Kumar\n    \n    Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \"Software\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n    \n    The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n    \n    THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n## Getting Started\n\nFor help getting started with Flutter, view our online [documentation](https://flutter.io/).\n\nFor help on editing package code, view the [documentation](https://flutter.io/developing-packages/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxsahil03x%2Ffancy_on_boarding","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxsahil03x%2Ffancy_on_boarding","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxsahil03x%2Ffancy_on_boarding/lists"}