easy_dot_indicator

Description:

easy dot indicator

easy_dot_indicator #
A simple dot-style indicator Flutter widget.


Getting Started #
Combine with PageView:
class _PageViewExampleState extends State<PageViewExample> {
EasyDotIndicatorController indicatorController = EasyDotIndicatorController();

@override
Widget build(BuildContext context) {
return SizedBox(
width: 300,
height: 200,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned.fill(
child: PageView.builder(
// itemBuilder: (_, index) => ...,
itemCount: 10,
onPageChanged: (index) {
indicatorController.updateIndex(index);
},
),
),
Positioned(
bottom: 10,
child: EasyDotIndicator(
visibleNum: 5,
count: 10,
controller: indicatorController,
),
),
],
),
);
}
}
copied to clipboard
Combine with CarouselSlider:
class _CarouselSliderExampleState extends State<CarouselSliderExample> {
EasyDotIndicatorController indicatorController = EasyDotIndicatorController();

@override
Widget build(BuildContext context) {
return SizedBox(
width: 300,
height: 200,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Positioned.fill(
child: CarouselSlider(
items: List.generate(
10,
(index) => Container(
alignment: Alignment.center,
color: Colors.grey,
child: Text(
'CarouselSlider:Item$index',
style: const TextStyle(fontSize: 24, color: Colors.white),
),
),
),
options: CarouselOptions(
viewportFraction: 1,
onPageChanged: (index, _) {
indicatorController.updateIndex(index);
},
),
),
),
Positioned(
bottom: 10,
child: EasyDotIndicator(
visibleNum: 5,
count: 10,
controller: indicatorController,
),
),
],
),
);
}
}
copied to clipboard
You can custom dot widget like this:

class _CustomDotExampleState extends State<CustomDotExample> {
EasyDotIndicatorController indicatorController = EasyDotIndicatorController();

@override
Widget build(BuildContext context) {
return SizedBox(
width: 300,
height: 200,
child: Stack(
alignment: Alignment.center,
children: <Widget>[
//...
Positioned(
bottom: 10,
child: EasyDotIndicator(
visibleNum: 5,
count: 10,
controller: indicatorController,
dotConfig: EasyDotIndicatorCustomConfig(
big: _getDotStyle(Dot.big),
middle: _getDotStyle(Dot.middle),
small: _getDotStyle(Dot.small),
animDuration: const Duration(milliseconds: 200),
gap: 6,
customDotBuilder: (anim, cur, pre) {
final preSize = _getDotStyle(pre).size;
final curSize = _getDotStyle(cur).size;
return CustomPaint(
painter: IndicatorCustomDotPainter(),
size: Size.lerp(preSize, curSize, anim.value)!,
);
},
),
),
),
],
),
);
}

DotStyle _getDotStyle(Dot dot) {
return switch (dot) {
Dot.big => const DotStyle(size: Size.square(12)),
Dot.middle => const DotStyle(size: Size.square(9)),
Dot.small => const DotStyle(size: Size.square(6)),
};
}
}

class IndicatorCustomDotPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.white
..style = PaintingStyle.fill;

Path path = Path();
path.moveTo(size.width / 2, (size.height - size.width) / 2); // Top point
path.lineTo(size.width, size.height / 2); // Right point
path.lineTo(size.width / 2, (size.height + size.width) / 2); // Bottom point
path.lineTo(0, size.height / 2); // Left point
path.close();

canvas.drawPath(path, paint);
}

@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}
copied to clipboard
For help getting started with Flutter development, view the online
documentation.
For instructions integrating Flutter modules to your existing applications,
see the add-to-app documentation.