https://github.com/ivansaul/instagram_page_indicator

Customizable animated page indicator like Instagram written for Flutter
https://github.com/ivansaul/instagram_page_indicator

dart flutter instagram package page-indicator ui

Last synced: 8 days ago
JSON representation

Customizable animated page indicator like Instagram written for Flutter

• Host: GitHub
• URL: https://github.com/ivansaul/instagram_page_indicator
• Owner: ivansaul
• License: mit
• Created: 2023-10-30T14:51:33.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-30T17:06:58.000Z (about 1 year ago)
• Last Synced: 2024-10-23T07:41:56.957Z (14 days ago)
• Topics: dart, flutter, instagram, package, page-indicator, ui
• Language: C++
• Homepage: https://pub.dev/packages/instagram_page_indicator
• Size: 922 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        




    Instagram Page Indicator



Simple Page Indicator like Instagram written for Flutter

[![Made-with-flutter](https://img.shields.io/badge/Made%20with-Flutter-orange)](https://flutter.dev/) 

[![Pub version](https://img.shields.io/pub/v/instagram_page_indicator.svg)](https://pub.dev/packages/instagram_page_indicator)

![GitHub repo size](https://img.shields.io/github/repo-size/ivansaul/instagram_page_indicator)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![Discord](https://img.shields.io/badge/-Discord-424549?style=social&logo=discord)](https://discord.gg/b72uAVBz6b)



---

## Demo







## Usage

```dart

InstagramPageIndicator(

    itemCount: pages.length,

    controller: controller,

),

```

## Customization

You can customize direction, size, spacing, color and more...

```dart

InstagramPageIndicator(

    itemCount: pages.length,

    controller: controller,

    dotSize: 11,

    dotSelectedSize: 15,

    dotSpacing: 20,

    dotColor: Colors.grey.shade300,

    dotSelectedColor: Colors.blueAccent.shade100,

    visibleDotCount: 5,

    visibleDotThreshold: 2,

    orientation: Axis.horizontal,

    reverse: false,

),

```

## Credits

This project is based on [scrolling_page_indicator](https://pub.dev/packages/scrolling_page_indicator). The main focus of this project is adding new features and make it accessible to everyone.