Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Milad-Akarie/smooth_page_indicator
Flutter Smooth PageView indicators
https://github.com/Milad-Akarie/smooth_page_indicator
Last synced: 3 months ago
JSON representation
Flutter Smooth PageView indicators
- Host: GitHub
- URL: https://github.com/Milad-Akarie/smooth_page_indicator
- Owner: Milad-Akarie
- License: mit
- Created: 2019-12-28T19:35:58.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-09-19T11:53:12.000Z (9 months ago)
- Last Synced: 2024-01-29T07:36:10.829Z (5 months ago)
- Language: Dart
- Size: 4.68 MB
- Stars: 1,052
- Watchers: 9
- Forks: 131
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-stars - Milad-Akarie/smooth_page_indicator - Flutter Smooth PageView indicators (Dart)
- trackawesomelist - smooth\_page\_indicator (⭐1.1k) - -stargazers:Milad-Akarie/smooth_page_indicator--> - Customizable animated page indicator with a set of built-in effects. [Milad Akarie](https://github.com/Milad-Akarie) (Recently Updated / [Apr 15, 2024](/content/2024/04/15/README.md))
- awesome-stars - smooth_page_indicator - Akarie | 1117 | (Dart)
- awesome-flutter - Smooth Page Indicator - Customizable animated page indicator with a set of built-in effects. [Milad Akarie](https://github.com/Milad-Akarie) (Components / UI)
README
## smooth_page_indicator
##### Customizable animated page indicator with a set of built-in effects.
##### infinite Loop support
##### Scrolling dots effect
### Effects
| Effect | Preview |
|:----------------------------------------|:------------------------------------------------------------------------------------------------------------------------:|
| Worm |  |
| Worm style = WormStyle.thin |  |
| Worm style = WormStyle.underground |  |
| Worm style = WormStyle.thinUnderground |  |
| Expanding Dots |  |
| Jumping dot |  |
| Jumping dot with vertical offset |  |
| Scrolling Dots |  |
| Slide |  |
| Slide style = SlideStyle.slideUnder |  |
| Scale |  |
| Swap |  |
| Swap type = SwapType.yRotation |  |
| Color Transition |  |
| Customizable demo-1 |  |
| Customizable demo-2 |  |
| Customizable demo-3 |  |
| Customizable demo-4 |  |
### Usage
---
`SmoothPageIndicator` uses the PageController's scroll offset to animate the active dot.
```dart
SmoothPageIndicator(
controller: controller, // PageController
count: 6,
effect: WormEffect(), // your preferred effect
onDotClicked: (index){
}
)
```
### Usage without a PageController
---
Unlike `SmoothPageIndicator `, `AnimatedSmoothIndicator` is self animated and all it needs is the
active index.
```dart
AnimatedSmoothIndicator(
activeIndex: yourActiveIndex,
count: 6,
effect: WormEffect(),
)
```
### Customization
---
You can customize direction, width, height, radius, spacing, paint style, color and more...
```dart
SmoothPageIndicator(
controller: controller,
count: 6,
axisDirection: Axis.vertical,
effect: SlideEffect(
spacing: 8.0,
radius: 4.0,
dotWidth: 24.0,
dotHeight: 16.0,
paintStyle: PaintingStyle.stroke,
strokeWidth: 1.5,
dotColor: Colors.grey,
activeDotColor: Colors.indigo
),
)
```
### RTL Support
---
Smooth page indicator will inherit directionality from its ancestors unless you specify a
directionality by passing it directly to the widget or wrapping the Indicator with a Directionality
widget from the flutter package.
```dart
SmoothPageIndicator(
controller: controller, // PageController
count: 6,
// forcing the indicator to use a specific direction
textDirection: TextDirection.rtl
effect: WormEffect(),
);
```
### Support the Library
You can support the library by liking it on pub, staring in on Github and reporting any bugs you
encounter.