Skip to content

Instantly share code, notes, and snippets.

@hnvn
Created July 11, 2018 01:10
Show Gist options
  • Save hnvn/30953582dc45b67877634d7fc6ac486b to your computer and use it in GitHub Desktop.
Save hnvn/30953582dc45b67877634d7fc6ac486b to your computer and use it in GitHub Desktop.
import 'package:flutter/material.dart';
import 'dart:math';
class DotsIndicator extends AnimatedWidget {
DotsIndicator({
Key key,
this.controller,
this.itemCount,
this.onPageSelected,
this.color: Colors.white,
}) : super(key: key, listenable: controller);
/// The PageController that this DotsIndicator is representing.
final PageController controller;
/// 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.
///
/// Defaults to `Colors.white`.
final Color color;
// The base size of the dots
static const double _kDotSize = 6.0;
// The increase in the size of the selected dot
static const double _kMaxZoom = 2.0;
// The distance between the center of each dot
static const double _kDotSpacing = 25.0;
Widget _buildDot(int index) {
double selectedness = Curves.easeOut.transform(
max(
0.0,
1.0 - ((controller.page ?? controller.initialPage) % itemCount - index).abs(),
),
);
double zoom = 1.0 + (_kMaxZoom - 1.0) * selectedness;
return Container(
width: _kDotSpacing,
child: Center(
child: Material(
color: color,
type: MaterialType.circle,
child: Container(
width: _kDotSize * zoom,
height: _kDotSize * zoom,
child: InkWell(
onTap: () => onPageSelected(index),
),
),
),
),
);
}
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: List<Widget>.generate(itemCount, _buildDot),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment