smooth_page_indicator 0.1.5

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

smooth_page_indicator #

Customizable animated page indicator with a set of built-in effects.

New! Scrolling dots effect

Effects #

EffectPreview
Worm
Expanding Dots
Jumping dot
Scrolling Dots -> 0.1.5
Slide
Scale
Swap
Color Transition -> 0.1.2

Usage #


SmoothPageIndicator(
	controller: controller,  // PageController
	count:  6,
	effect:  WormEffect(),  // your preferred effect
)

Customization #


You can customize width, height, radius, spacing, paint style, color and more...

SmoothPageIndicator(
	controller: controller,
	count:  6,
	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 it's 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.

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 staring in on Github or report any bugs you encounter.

ChangeLog #

[0.1.5] #

  • Add off-canvas scrolling effect ScrollingDotsEffect
  • Add Active color with transition to to ScaleEffect

[0.1.4] #

  • Add Active color with transition to ExpendingDotEffect

[0.1.3] #

  • Fix indicator always starts at zero index regardless of the controller's initial page

[0.1.2+1] #

  • Add individual demos for each effect to README file

[0.1.2] #

  • Add Color Transition effect

Breaking change! #

  • Replace isRTL with textDirection
  • Directionality is now handled the flutter way instead of manually passing a bool value to isRTL property

[0.1.1] #

  • Add documentation
  • Edit README file

[0.1.0+1] #

  • Edit README file.

[0.1.0] #

  • Initial release.

example/README.md

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_indicators.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final controller = PageController(viewportFraction: 0.8);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: Center(
        child: Directionality(
          textDirection: TextDirection.rtl,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 16),
              SizedBox(
                height: 300,
                child: PageView(
                  controller: controller,
                  children: List.generate(
                      6,
                      (_) => Card(
                            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
                            margin: EdgeInsets.symmetric(horizontal: 10, vertical: 4),
                            child: Container(height: 280),
                          )),
                ),
              ),
              SizedBox(height: 16),
              Padding(
                padding: const EdgeInsets.only(top: 16, bottom: 8),
                child: Text("Worm"),
              ),
              Container(
                child: SmoothPageIndicator(
                  controller: controller,
                  count: 6,
                  effect: WormEffect(),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16, bottom: 8),
                child: Text("Expanding Dots "),
              ),
              Container(
                child: SmoothPageIndicator(
                  controller: controller,
                  count: 6,
                  effect: ExpandingDotsEffect(
                    expansionFactor: 4,
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: Text("Jumping Dot "),
              ),
              SmoothPageIndicator(
                controller: controller,
                count: 6,
                effect: JumpingDotEffect(),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(vertical: 8),
                child: Text("slide Dots "),
              ),

              Padding(
                padding: const EdgeInsets.only(top: 16, bottom: 8),
                child: Text("Scrolling Dots "),
              ),
              SmoothPageIndicator(
                  controller: controller,
                  count: 6,
                  effect: ScrollingDotsEffect(
                    activeStrokeWidth: 2.6,
                    activeDotScale: .4,
                    radius: 8,
                    spacing: 10,
                  )),

              Padding(
                padding: const EdgeInsets.only(top: 16, bottom: 8),
                child: Text("Scale"),
              ),

              Container(
                child: SmoothPageIndicator(
                  controller: controller,
                  count: 6,
                  effect: ScaleEffect(),
                ),
              ),

              Padding(
                padding: const EdgeInsets.only(top: 16, bottom: 8),
                child: Text("Slide"),
              ),
              Container(
                child: SmoothPageIndicator(
                  controller: controller,
                  count: 6,
                  effect: SlideEffect(
                      spacing: 8.0,
                      radius: 4.0,
                      dotWidth: 24.0,
                      dotHeight: 16.0,
                      dotColor: Colors.grey,
                      paintStyle: PaintingStyle.stroke,
                      strokeWidth: 2,
                      activeDotColor: Colors.indigo),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  smooth_page_indicator: ^0.1.5

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:smooth_page_indicator/smooth_page_indicator.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
92
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
96
Learn more about scoring.

We analyzed this package on Mar 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.5.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test