{"id":13789852,"url":"https://github.com/pyozer/dots_indicator","last_synced_at":"2025-05-16T01:06:08.985Z","repository":{"id":32967246,"uuid":"144336445","full_name":"Pyozer/dots_indicator","owner":"Pyozer","description":"Add an indicator for a progression. You can customize indicators (shape, color, ..)","archived":false,"fork":false,"pushed_at":"2025-02-18T22:25:54.000Z","size":540,"stargazers_count":157,"open_issues_count":4,"forks_count":36,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-16T01:06:02.377Z","etag":null,"topics":["android","dart","dart2","dots","flutter","indicator","ios","pageview"],"latest_commit_sha":null,"homepage":"https://pub.dartlang.org/packages/dots_indicator","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/Pyozer.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-10T22:09:10.000Z","updated_at":"2025-04-21T23:31:25.000Z","dependencies_parsed_at":"2025-02-24T16:14:38.110Z","dependency_job_id":"2fe0542b-3790-43fe-a8c8-048c73138e94","html_url":"https://github.com/Pyozer/dots_indicator","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyozer%2Fdots_indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyozer%2Fdots_indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyozer%2Fdots_indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pyozer%2Fdots_indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pyozer","download_url":"https://codeload.github.com/Pyozer/dots_indicator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254448579,"owners_count":22072764,"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","dart2","dots","flutter","indicator","ios","pageview"],"created_at":"2024-08-03T22:00:33.803Z","updated_at":"2025-05-16T01:06:03.976Z","avatar_url":"https://github.com/Pyozer.png","language":"Dart","funding_links":[],"categories":["Packages"],"sub_categories":[],"readme":"# dots_indicator\n\nWidget to display dots indicator to show a position (for a PageView for example).\n\n## Installation\n\nYou just need to add `dots_indicator` as a [dependency in your pubspec.yaml file](https://flutter.io/using-packages/).\n\n```yaml\ndependencies:\n  dots_indicator: ^4.0.1\n```\n\n## Example\n\nIn these examples, `pageLength` is the total of dots to display and `currentPage` is the position to hightlight (the active dot).\n\nFor information, `currentPage` is a double, to be able to have lerp animation.\n\n### A simple dots indicator\n\n![Simple dots](https://raw.githubusercontent.com/Pyozer/dots_indicator/master/demo/normal.gif)\n\n```dart\nnew DotsIndicator(\n  dotsCount: pageLength,\n  position: currentPage,\n);\n```\n\n### Custom colors\n\n![Custom dots colors](https://raw.githubusercontent.com/Pyozer/dots_indicator/master/demo/custom_color.gif)\n\n```dart\nnew DotsIndicator(\n  dotsCount: pageLength,\n  position: currentPage,\n  decorator: DotsDecorator(\n    color: Colors.black87, // Inactive color\n    activeColor: Colors.redAccent,\n  ),\n);\n```\n\n### Use specific color for each dot\n\nYou can choose to have one color for inactive dots and one color the active dot.\n\nBut you can also define one color by inactive dots (`colors`) and one color by active dot (`activeColors`).\n\nIf you have a total of 3 dots, you must provide an array of 3 colors.\n\n```dart\nnew DotsIndicator(\n  dotsCount: pageLength,\n  position: currentPage,\n  decorator: DotsDecorator(\n    colors: [Colors.grey[300], Colors.grey[600], Colors.grey[900]], // Inactive dot colors\n    activeColors: [Colors.red[300], Colors.red[600], Colors.red[900]], // Àctive dot colors\n  ),\n);\n```\n\n### Custom size and shape\n\nYou can change the default size of dots and also shape.\n\nSo you can choose to have a shape for inactive dots and another shape for the active dot for example.\u003cbr /\u003e\n**By default, the shape of dots are CircleBorder, so to have a rounded rectangle for active one, you need to change `activeShape`**\n\n![Custom dots size](https://raw.githubusercontent.com/Pyozer/dots_indicator/master/demo/custom_size.gif)\n\n```dart\nnew DotsIndicator(\n  dotsCount: pageLength,\n  position: currentPage,\n  decorator: DotsDecorator(\n    size: const Size.square(9.0),\n    activeSize: const Size(18.0, 9.0),\n    activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),\n  ),\n);\n```\n\n### Custom size for each dot\n\nYou can customize the size of each dot, for inactive and/or active dots.\n\nFor that, use `sizes` and/or `activeSizes` params.\n\n```dart\nnew DotsIndicator(\n  dotsCount: pageLength,\n  position: currentPage,\n  decorator: DotsDecorator(\n    sizes: [\n      const Size.square(10.0),\n      const Size.square(15.0),\n      const Size.square(20.0),\n    ],\n    activeSizes: [\n      const Size.square(25.0),\n      const Size.square(25.0),\n      const Size.square(35.0),\n    ],\n  ),\n);\n```\n\n### Custom shape\n\nYou can change the default shape of dots. By default it's a CircleBorder.\n\nYou can change the no active and active dot shape.\n\n![Custom dots shape](https://raw.githubusercontent.com/Pyozer/dots_indicator/master/demo/custom_shape.gif)\n\n```dart\nnew DotsIndicator(\n  dotsCount: pageLength,\n  position: currentPage,\n  decorator: DotsDecorator(\n    shape: const Border(),\n    activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),\n  ),\n);\n```\n### Custom shape for each dot\n\nYou can customize the shape of each dot, for inactive and/or active dots.\n\nFor that, use `shapes` and/or `activeShapes` params.\n\n```dart\nnew DotsIndicator(\n  dotsCount: pageLength,\n  position: currentPage,\n  decorator: DotsDecorator(\n    shapes: [\n      RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),\n      RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),\n      RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),\n    ],\n    activeShapes: [\n      RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),\n      RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),\n      RoundedRectangleBorder(borderRadius: BorderRadius.circular(25.0)),\n    ],\n  ),\n);\n```\n\n### Change the space between dots\n\nBy default a dot have a margin of 6 pixels on his left and right. It's `EdgeInsets.symmetric(horizontal: 6.0)`.\nBut if you want you can change it, for example to increase the space between dots or to add top margin.\n\n![Custom dots space](https://raw.githubusercontent.com/Pyozer/dots_indicator/master/demo/custom_space.gif)\n\n```dart\nnew DotsIndicator(\n  dotsCount: pageLength,\n  position: currentPage,\n  decorator: DotsDecorator(\n    spacing: const EdgeInsets.all(10.0),\n  ),\n);\n```\n\n### Axis and reverse property\n\nThere is two other property, `axis` and `reversed`.\nAxis is to display dots indicator horizontally (default) or vertically.\nAlso, you can set `reversed: true` to reverse the order of dots. (default: false).\n\nFor example, if you want to display the dots indicator vertically, but with the first dots on bottom :\nSet `axis: Axis.vertical` and `reversed: true`.\nObviously, you can use reversed with `Axis.horizontal`.\n\n### onTap property\n\nYou can add `onTap` property, to listen when a dot has been pressed.\nExemple:\n```\nonTap: (position) {\n  setState(() =\u003e _currentPos = position);\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyozer%2Fdots_indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpyozer%2Fdots_indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpyozer%2Fdots_indicator/lists"}