DotsIndicator

dots_indicator.dart

import 'package:flutter/material.dart';

class DotsIndicator extends StatelessWidget {
  DotsIndicator(
      {this.notifier,
      this.itemCount,
      this.onPageSelected,
      this.color = Colors.white,
      this.seletedColor = Colors.white,
      this.dotSize = 8.0,
      this.dotIncreaseSize = 2.0,
      this.dotSpacing = 25.0})
      : super();

  // The PageController that this DotsIndicator is representing.
  final ValueNotifier<int> notifier;

  // The number of items managed by the PageController
  final int itemCount;

  // Called when a dot is tapped
  final ValueChanged<int> onPageSelected;

  // The color of the dots.
  final Color color;

  // The color of the selected dot.
  final Color seletedColor;

  // The base size of the dots
  final double dotSize;

  // The increase in the size of the selected dot
  final double dotIncreaseSize;

  // The distance between the center of each dot
  final double dotSpacing;

  Widget build(BuildContext context) {
    return Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: List<Widget>.generate(this.itemCount, _buildDot));
  }

  Widget _buildDot(int index) {
    return SizedBox(
        width: this.dotSpacing,
        height: this.dotSpacing,
        child: MaterialButton(
          minWidth: this.dotSpacing,
          height: this.dotSpacing,
          padding: EdgeInsets.zero,
          child: ValueListenableBuilder(
            valueListenable: this.notifier,
            builder: (_, value, __) {
              bool selectedness = (this.notifier.value - index) == 0;

              double zoom = 1.0 + (this.dotIncreaseSize - 1.0);
              final dotColor = selectedness ? this.seletedColor : this.color;
              final dotSize = this.dotSize * (selectedness ? zoom : 1);

              return AnimatedContainer(
                decoration:
                    BoxDecoration(shape: BoxShape.circle, color: dotColor),
                duration: Duration(milliseconds: 100),
                width: dotSize,
                height: dotSize,
              );
            },
          ),
          onPressed: this.onPageSelected != null
              ? () => this.onPageSelected(index)
              : null,
        ));
  }
}