dynamic_carousel_indicator

Description:

dynamic carousel indicator

The Dynamic Carousel Indicator provides an interactive indicator for dynamic carousels.

Author #
Chanapongpan Najaikong (Pick) [email protected]
Features #

Dynamic dot indicator that adapts to the number of items in the carousel.
Customizable dot size, spacing, and colors.
Smooth animations when navigating between carousel items.
Scalable active and adjacent dot sizes for visual feedback.
Easy integration into your Flutter app.

Getting started #
To get started, simply install the package, customize the indicator's appearance, and incorporate it into your Flutter app's carousel widget.
Usage #
DynamicCarouselIndicator(
pageIndex: _currentPageIndex,
count: _totalPages
)
copied to clipboard
Example #
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Dynamic Carousel Indicator Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
late final Map<int, int> pageIndex = {
1: 0,
3: 0,
5: 0,
6: 0,
10: 0,
};

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Column(
children: [
_buildCarousel(1),
const SizedBox(height: 16),
_buildCarousel(3),
const SizedBox(height: 16),
_buildCarousel(5),
const SizedBox(height: 16),
_buildCarousel(6),
const SizedBox(height: 16),
_buildCarousel(10),
const SizedBox(height: 16),
],
),
),
);
}

Widget _buildCarousel(int totalPage) {
var pages = List<Widget>.generate(
totalPage,
(i) => Container(
margin: const EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.grey.withOpacity(0.4),
),
child: Center(
child: Text('Page ${i + 1}/$totalPage'),
),
),
);

return Column(
children: [
SizedBox(
height: 100,
child: PageView.builder(
itemCount: pages.length,
controller: PageController(viewportFraction: 0.8),
itemBuilder: (context, i) => pages[i],
onPageChanged: (value) {
setState(() {
pageIndex[totalPage] = value;
});
},
),
),
const SizedBox(
height: 8,
),
DynamicCarouselIndicator(
pageIndex: pageIndex[totalPage]!,
count: pages.length,
),
],
);
}
}

copied to clipboard