Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/leocavalcante/page_view_indicator

👆🏻 Builds indication marks for PageView.
https://github.com/leocavalcante/page_view_indicator

Last synced: about 2 months ago
JSON representation

👆🏻 Builds indication marks for PageView.

Host: GitHub
URL: https://github.com/leocavalcante/page_view_indicator
Owner: leocavalcante
License: bsd-3-clause
Created: 2018-07-21T00:36:16.000Z (almost 6 years ago)
Default Branch: master
Last Pushed: 2021-11-03T04:07:24.000Z (over 2 years ago)
Last Synced: 2024-01-08T06:03:32.809Z (6 months ago)
Language: Dart
Homepage:
Size: 606 KB
Stars: 161
Watchers: 4
Forks: 31
Open Issues: 3
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Lists

awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
awesome-flutter-cn - PageView Indicator - 为PageView构建页面指示器，由 [Leo Cavalcante](https://github.com/leocavalcante) 制作。 (组件 / 导航)
awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
-awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
awesome-flutter-cn - PageView Indicator - 为 PageView 构建的页面指示器，[Leo Cavalcante](https://github.com/leocavalcante). (组件 / 导航)
awesome-flutter - PageView Indicator - 👆🏻 Builds indication marks for PageView. ` 📝 a year ago ` (Navigation [🔝](#readme))

README

        # PageViewIndicator [![Pub Package](https://img.shields.io/pub/v/page_view_indicator.svg)](https://pub.dartlang.org/packages/page_view_indicator)

Builds indication marks for PageView.

## Import

```dart

import 'package:page_view_indicator/page_view_indicator.dart';

```

## Usage

### Default Material behavior

```dart

return PageViewIndicator(

  pageIndexNotifier: pageIndexNotifier,

  length: length,

  normalBuilder: (animationController, index) => Circle(

        size: 8.0,

        color: Colors.black87,

      ),

  highlightedBuilder: (animationController, index) => ScaleTransition(

        scale: CurvedAnimation(

          parent: animationController,

          curve: Curves.ease,

        ),

        child: Circle(

          size: 12.0,

          color: Colors.black45,

        ),

      ),

);

```

![Example 1](example1.gif)

---

### Custom animations

```dart

return PageViewIndicator(

  pageIndexNotifier: pageIndexNotifier,

  length: length,

  normalBuilder: (animationController, index) => Circle(

        size: 8.0,

        color: Colors.black87,

      ),

  highlightedBuilder: (animationController, index) => ScaleTransition(

        scale: CurvedAnimation(

          parent: animationController,

          curve: Curves.ease,

        ),

        child: Circle(

          size: 8.0,

          color: Colors.white,

        ),

      ),

);

```

![Example 2](example2.gif)

---

### Custom icons

It's not just about dots!

```dart

return PageViewIndicator(

  pageIndexNotifier: pageIndexNotifier,

  length: length,

  normalBuilder: (animationController, index) => ScaleTransition(

        scale: CurvedAnimation(

          parent: animationController,

          curve: Curves.ease,

        ),

        child: Icon(

          Icons.favorite,

          color: Colors.black87,

        ),

      ),

  highlightedBuilder: (animationController, index) => ScaleTransition(

        scale: CurvedAnimation(

          parent: animationController,

          curve: Curves.ease,

        ),

        child: Icon(

          Icons.star,

          color: Colors.white,

        ),

      ),

);

```

![Example 3](example3.gif)

### Changing the space bettwen the indicators

You can change the padding around the indicators using the `indicatorPadding` property:

```dart

return PageViewIndicator(

  pageIndexNotifier: pageIndexNotifier,

  length: length,

  indicatorPadding: const EdgeInsets.all(4.0)

  ...

```

Default is `const EdgeInsets.all(8.0)`.