smooth_page_indicator 0.2.1 smooth_page_indicator: ^0.2.1 copied to clipboard
Customizable animated page indicator with a set of built-in effects.
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),
),
),
],
),
),
),
);
}
}