{"id":19312075,"url":"https://github.com/weblineindia/flutter-intro-screens","last_synced_at":"2025-04-12T11:23:04.219Z","repository":{"id":129984523,"uuid":"289190631","full_name":"weblineindia/Flutter-Intro-Screens","owner":"weblineindia","description":"A Flutter based Reusable Intro Screens component that provides Application Startup Screens with configurable items which can be used in any Flutter application.","archived":false,"fork":false,"pushed_at":"2020-08-21T07:55:58.000Z","size":8468,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T21:04:02.100Z","etag":null,"topics":["app-onboarding","app-startup-screen","application-startup","flutter","flutter-components","flutter-demo","flutter-examples","flutter-intro-screen","flutter-library","flutter-plugin","flutter-startup-screen","intro-screen","intro-slider","introduction-screen","onboarding-screen","reusable-components","startup-screen"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/software-development-resources.html","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/weblineindia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","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":"2020-08-21T06:02:15.000Z","updated_at":"2023-07-20T09:50:03.000Z","dependencies_parsed_at":"2023-04-15T04:14:21.646Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/Flutter-Intro-Screens","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/weblineindia%2FFlutter-Intro-Screens","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-Intro-Screens/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-Intro-Screens/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-Intro-Screens/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/Flutter-Intro-Screens/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248558511,"owners_count":21124300,"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":["app-onboarding","app-startup-screen","application-startup","flutter","flutter-components","flutter-demo","flutter-examples","flutter-intro-screen","flutter-library","flutter-plugin","flutter-startup-screen","intro-screen","intro-slider","introduction-screen","onboarding-screen","reusable-components","startup-screen"],"created_at":"2024-11-10T00:32:38.174Z","updated_at":"2025-04-12T11:23:04.198Z","avatar_url":"https://github.com/weblineindia.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flutter - Intro Screens\n\nA Flutter based Reusable Intro Screens component that provides Application Startup Screens with configurable items which can be used in any Flutter application.\n\n\n## Table of contents\n- [Flutter Support](#Flutter-support)\n- [Demo](#demo)\n- [Features](#features)\n- [Getting started](#getting-started)\n- [Usage](#usage)\n- [Methods](#methods)\n- [Want to Contribute?](#want-to-contribute)\n- [Need Help / Support?](#need-help) \n- [Collection of Components](#collection-of-Components)\n- [Changelog](#changelog)\n- [License](#license)\n- [Keywords](#Keywords)\n\n\n## Flutter Support\n\nVersion - Flutter 1.17 (stable)\n\nWe have tested our program in above version, however you can use it in other versions as well.\n\n\n## Demo\n[![](introScreen.gif)](https://github.com/weblineindia/Flutter-Intro-Screens/blob/master/introScreen.gif)\n\n------\n\n## Features\n\n* Introduction Screens handled with navigation using stateless widget.\n* Introduction Screens with less code of implementation and configurable UI options.\n\n\n## Getting started\n\n* Download this sample project and import app_startup_ui_widget.dart Widget file in your Flutter App. \n* Update images based on your requirements. \n\n\n## Usage\n\nSetup process is described below to integrate in project.\n\n## Configure Intro Screens View in your widget by following below method steps\n\n### Methods\n\nStep 1.Add  'provider' package to pubspec.yaml\n\nStep 2. Add MultiProvider in Your application widget like below and provider StartupScreenNavigationProvider in providers list.\n       \n    // Put BottomNavigatorProvider as mention below\n    class MyApp extends StatelessWidget {\n      @override\n      Widget build(BuildContext context) {\n        final MaterialColor colorCustom = MaterialColor(0xFFFACA58, color);\n        return MultiProvider(\n          providers: [\n            ChangeNotifierProvider.value(\n              value: StartupScreenNavigationProvider(),\n            )\n          ],\n          child: MaterialApp(\n            title: 'Flutter Demo',\n            home: ...,\n          ),\n        );\n      }\n    }\n       \n\nStep 3. User following StartUpScreen constructor for adding Intro Screen as user landing screen.             \n       \n         List\u003cPageItem\u003e arrPageItems = [];\n         Color pageIndicatorColor;\n         Color pageIndicatorSelectedColor;\n         Color buttonsColor;\n         Color buttonsTextColor;\n         Function(BuildContext, int) nextPageCallback;\n         Function(BuildContext) skipScreenCallback;\n         \n\n         // ignore: sort_constructors_first\n         StartUpScreen(\n             {this.arrPageItems,\n             this.pageIndicatorColor,\n             this.pageIndicatorSelectedColor,\n             this.buttonsColor,\n             this.buttonsTextColor,\n             this.skipScreenCallback,\n             this.nextPageCallback});\n        \n\nStep 4. Pass PageItems to StartUpScreen widget. \n\n      this.arrPageItems = [] // Pass PageItem in StartUpScreen widget for displaying and Use 'PageItem' helper class to create PageItems \n\n     //Use our helper class to create pageItems for StartUpScreen\n     class PageItem {\n       String imgPath;\n       // ignore: sort_constructors_first\n       PageItem({this.imgPath});\n     }\n\n\nStep 5.if you want to set various colors to StartUpScreen you can configure as below.\n\n    this.pageIndicatorColor // To set page indicators unselected color\n    this.pageIndicatorSelectedColor // To set page indicators selected color\n    this.buttonsColor // To set buttons color in StartUpScreen Widget\n    this.buttonsTextColor // To set buttons text color in StartUpScreen Widget\n    \nStep 6.if you want to Handle callbacks of StartUpScreen.\n    \n    // Use below parameter of StartUpScreen widget for handle skip button callback\n    skipScreenCallback: (BuildContext context) {\n      Navigator.pushReplacement(\n          context, MaterialPageRoute(builder: (context) =\u003e YOUR_SCREEN()));\n    } \n    \n    // Use below parameter of StartUpScreen widget for handle next and last page callback of StartUpScreen \n    nextPageCallback: (BuildContext context, int page) {\n      if (page == arrItems.length - 1) {\n        Navigator.pushReplacement(context,\n            MaterialPageRoute(builder: (context) =\u003e YOUR_SCREEN()));\n       }\n       else {...}\n    }\n    \nStep 7. Adding StartUpScreen in your main app widget\n    \n    MaterialApp(\n      title: 'Flutter Demo',\n      debugShowCheckedModeBanner: false,\n      theme: ThemeData(\n        primarySwatch: colorCustom,\n      ),\n      home: StartUpScreen(\n        arrPageItems: arrItems,\n        pageIndicatorColor: Colors.grey,\n        pageIndicatorSelectedColor: colorCustom,\n        buttonsColor: colorCustom,\n        buttonsTextColor: Colors.white,\n        skipScreenCallback: (BuildContext context) {\n          Navigator.pushReplacement(\n              context, MaterialPageRoute(builder: (context) =\u003e YOUR_SCREEN()));\n        },\n        nextPageCallback: (BuildContext context, int page) {\n          if (page == arrItems.length - 1) {\n            Navigator.pushReplacement(context,\n                MaterialPageRoute(builder: (context) =\u003e YOUR_SCREEN()));\n          }\n        },\n      ),\n    )\n  \n    \n------\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n------\n\n## Need Help? \nIf you need help then feel free to contact our [Flutter developers](https://www.weblineindia.com/flutter-cross-platform-mobile-app-development.html).\n\n ------\n \n## Collection of Components\n We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development.](https://www.weblineindia.com/software-development-resources.html)\n \n------\n\n## Changelog\nDetailed changes for each release are documented in [CHANGELOG](./CHANGELOG).\n\n## License\n\n[MIT](LICENSE)\n\n[mit]: https://github.com/weblineindia/Flutter-Intro-Screens/blob/master/LICENSE\n\n## Keywords\nFlutter-Intro-screens, Introduction-screens, App-startup-screen, App-onboarding-screen\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fflutter-intro-screens","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Fflutter-intro-screens","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fflutter-intro-screens/lists"}