{"id":13573601,"url":"https://github.com/long1eu/circle_indicator","last_synced_at":"2025-04-28T12:51:52.901Z","repository":{"id":76842296,"uuid":"93756716","full_name":"long1eu/circle_indicator","owner":"long1eu","description":"Small library that build a circle indicator for the PagerViewer. This can be used in Android and iOS apps.","archived":false,"fork":false,"pushed_at":"2017-11-29T11:14:32.000Z","size":4073,"stargazers_count":38,"open_issues_count":6,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-25T20:43:53.386Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/long1eu.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}},"created_at":"2017-06-08T14:07:10.000Z","updated_at":"2023-07-21T23:46:28.000Z","dependencies_parsed_at":"2024-01-07T00:58:49.935Z","dependency_job_id":null,"html_url":"https://github.com/long1eu/circle_indicator","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/long1eu%2Fcircle_indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/long1eu%2Fcircle_indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/long1eu%2Fcircle_indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/long1eu%2Fcircle_indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/long1eu","download_url":"https://codeload.github.com/long1eu/circle_indicator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251318393,"owners_count":21570347,"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":[],"created_at":"2024-08-01T15:00:38.095Z","updated_at":"2025-04-28T12:51:52.884Z","avatar_url":"https://github.com/long1eu.png","language":"Dart","funding_links":[],"categories":["Components"],"sub_categories":["Navigation"],"readme":"# circle_indicator\n\nA library for Dart developers. It is awesome.\n\n![Demo:](https://raw.githubusercontent.com/thelong1EU/circle_indicator/master/indicator.gif)\n\n## Installation\n\n1. Depend on it\nAdd this to your package's pubspec.yaml file:\n\n       dependencies:\n         circle_indicator: \"^0.0.7\"\n         \n2. Install it\nYou can install packages from the command line:\n\n       $ pub get\n       \nAlternatively, your editor might support 'pub get'. Check the docs for your editor to learn more.\n\n3. Import it\nNow in your Dart code, you can use:\n\n       import 'package:circle_indicator/circle_indicator.dart';\n\n\n\n\n## Usage\n\nA simple usage example for the CircleIndicator:\n    \n    final PageController controller = new PageController();\n    \n    @override\n      Widget build(BuildContext context) {\n        return new Scaffold(\n          body: new Container(\n              padding: new EdgeInsets.only(top: 16.0,),\n              decoration: new BoxDecoration(\n                  color: primaryColor\n              ),\n              child: new Stack(\n                alignment: FractionalOffset.bottomCenter,\n                children: \u003cWidget\u003e[\n                  new PageView.builder(\n                    controller: controller,\n                    itemCount: pageList.length,\n                    itemBuilder: (_, int i) =\u003e pageList[i],\n                  ),\n                  new Container(\n                    margin: new EdgeInsets.only(\n                      top: 16.0,\n                      bottom: 16.0,\n                    ),\n                    child: new CircleIndicator(controller, pageList.length, \n                      3.0, Colors.white70, Colors.white)\n                    ),\n                  ),\n                ],\n              )\n          ),\n        );\n      }\n      \nIf you want to use the whole IntroductionWidget you can do it like so:\n\n    class StartPage extends StatelessWidget {\n    \n      @override\n      Widget build(BuildContext context) {\n        var pageList = \u003cStartPageItem\u003e[\n          new StartPageItem(\"assets/ic_info_01.png\"),\n          new StartPageItem(\"assets/ic_info_02.png\"),\n          new StartPageItem(\"assets/ic_info_03.png\"),\n          new StartPageItem(\"assets/ic_info_04.png\"),\n          new StartPageItem(\"assets/ic_info_05.png\"),\n          new StartPageItem(\"assets/ic_info_06.png\"),\n          new StartPageItem(\"assets/ic_info_07.png\"),\n          new StartPageItem(\"assets/ic_info_08.png\"),\n        ];\n    \n        return new Scaffold(\n          body: new IntroductionWidget(\n            pageList: pageList,\n            circleIndicator: new CircleIndicator.withIntroduction(\n                pageList.length, 3.0, Colors.white70, Colors.white),\n            rightAction: () =\u003e startApp(context),\n            rightText: new Text(\"START\",\n              style: Theme\n                  .of(context)\n                  .textTheme\n                  .body1\n                  .copyWith(\n                color: Colors.white,),\n            ),\n            backgroundColor: primaryColor,\n          ),\n        );\n      }\n    \n    \n      void startApp(BuildContext context) {\n        Navigator.popAndPushNamed(context, HomePage.routeName);\n      }\n    }\n    \nYou can add both left and right actions:\n\n      return new Scaffold(\n        body: new IntroductionWidget(\n          pageList: pageList,\n          circleIndicator: new CircleIndicator.withIntroduction(\n              pageList.length, 3.0, Colors.white70, Colors.white),\n          rightAction: () =\u003e startApp(context),\n          ///called every time the page changes with the page number\n          showRight: (page) =\u003e page == 5,\n          rightText: new Text(\"START\",\n            style: Theme\n                .of(context)\n                .textTheme\n                .body1\n                .copyWith(\n              color: Colors.white,),\n          ),\n  \n          leftAction: () =\u003e startApp(context),\n          ///called every time the page changes with the page number\n          showLeft: (page) =\u003e true,\n          leftText: new Text(\"SKIP\",\n            style: Theme\n                .of(context)\n                .textTheme\n                .body1\n                .copyWith(\n              color: Colors.white,),\n          ),\n          backgroundColor: primaryColor,\n        ),\n      );\n\n## Features and bugs\n\nPlease file feature requests and bugs at the [issue tracker][tracker].\n\n[tracker]: https://github.com/thelong1EU/circle_indicator/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flong1eu%2Fcircle_indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flong1eu%2Fcircle_indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flong1eu%2Fcircle_indicator/lists"}