https://github.com/douglasiacovelli/page_view_dot_indicator

A simple and animated page view indicator in the form of dots, which you can customise color, size, space and duration.
https://github.com/douglasiacovelli/page_view_dot_indicator

dart flutter indicator package pageview

Last synced: 3 months ago
JSON representation

A simple and animated page view indicator in the form of dots, which you can customise color, size, space and duration.

• Host: GitHub
• URL: https://github.com/douglasiacovelli/page_view_dot_indicator
• Owner: douglasiacovelli
• License: mit
• Created: 2021-03-21T13:37:54.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-02-13T17:04:03.000Z (about 1 year ago)
• Last Synced: 2024-08-03T14:07:54.160Z (7 months ago)
• Topics: dart, flutter, indicator, package, pageview
• Language: Dart
• Homepage: https://pub.dev/packages/page_view_dot_indicator
• Size: 113 KB
• Stars: 15
• Watchers: 1
• Forks: 11
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Page view dot indicator

[![pub package](https://img.shields.io/pub/v/page_view_dot_indicator?style=plastic&logo=flutter)](https://pub.dev/packages/flutter_formx)

This lib draws a simple dot indicator for page views with a simple API. Right now it is able to draw

dots with custom size, colors, spacing and duration. Besides that it also handles overflow by fading

the edges if there are more dots than the width of the page allows.



## Usage

Simply use this Widget in your page and make sure to use any form of state management to update the currentItem, such as setState.

#### These are the mandatory parameters:

```dart

PageViewDotIndicator(

  currentItem: selectedPage,

  count: pageCount,

  unselectedColor: Colors.black26,

  selectedColor: Colors.blue,

)

```

#### But you can also customize it using other parameters, such as:

```dart

PageViewDotIndicator(

  currentItem: selectedPage,

  count: pageCount,

  unselectedColor: Colors.black26,

  selectedColor: Colors.blue,

  size: const Size(12, 12),

  unselectedSize: const Size(8, 8),

  duration: const Duration(milliseconds: 200),

  margin: const EdgeInsets.symmetric(horizontal: 8),

  padding: EdgeInsets.zero,

  alignment: Alignment.centerLeft,

  fadeEdges: false,

  boxShape: BoxShape.square, //defaults to circle

  borderRadius: BorderRadius.circular(5), //only for rectangle shape

  onItemClicked: (index) { ... }

)

```