Carousel Widget

Estimated reading: 3 minutes 28 views

FlutKit provides the CustomCarousel widget, a reusable carousel/slider widget designed to display multiple widgets in a horizontal, swipeable layout. It supports automatic sliding, navigation controls, and page indicators, making it suitable for dashboards, featured content, banners, or highlight sections.

Common Use Cases

Dashboard highlight cards (stats, KPIs, summaries)
Featured products or announcements
Promotional banners
Media previews (images, cards, charts)
Compact content rotation in limited space

Constructor

Dart

CustomCarousel({
  Key? key,
  required List<Widget> pages,
  bool showControls = true,
  bool showIndicator = true,
  Duration autoSlideInterval = const Duration(seconds: 3),
  required double height,
})

CustomCarousel({
  Key? key,
  required List<Widget> pages,
  bool showControls = true,
  bool showIndicator = true,
  Duration autoSlideInterval = const Duration(seconds: 3),
  required double height,
})

Parameters

Parameter	Description
`pages`	Required. A list of widgets to be displayed as carousel pages. Each widget represents one slide.
`showControls`	Displays previous/next navigation controls (arrows). Default is `true`.
`showIndicator`	Shows page indicators (dots) to indicate the current slide. Default is `true`.
`autoSlideInterval`	Time interval for automatic slide transitions. Default is 3 seconds.
`height`	Required. Sets the fixed height of the carousel container.

Basic Usage Example

Dart

CustomCarousel(
  height: 220,
  pages: [
    _buildCard('Sales Overview', kPrimaryColor),
    _buildCard('Revenue Growth', kSuccessColor),
    _buildCard('User Activity', kInfoColor),
  ],
)

CustomCarousel(
  height: 220,
  pages: [
    _buildCard('Sales Overview', kPrimaryColor),
    _buildCard('Revenue Growth', kSuccessColor),
    _buildCard('User Activity', kInfoColor),
  ],
)

Example helper widget:

Dart

Widget _buildCard(String title, Color color) {
  return Card(
    color: color,
    child: Center(
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.w600,
        ),
      ),
    ),
  );
}

Widget _buildCard(String title, Color color) {
  return Card(
    color: color,
    child: Center(
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.w600,
        ),
      ),
    ),
  );
}

Disable Controls or Indicators

Dart

CustomCarousel(
  height: 200,
  showControls: false,
  showIndicator: false,
  pages: [
    Image.asset('assets/images/banner_1.png', fit: BoxFit.cover),
    Image.asset('assets/images/banner_2.png', fit: BoxFit.cover),
  ],
)

CustomCarousel(
  height: 200,
  showControls: false,
  showIndicator: false,
  pages: [
    Image.asset('assets/images/banner_1.png', fit: BoxFit.cover),
    Image.asset('assets/images/banner_2.png', fit: BoxFit.cover),
  ],
)

Tip: You can find more usage patterns and visual references directly inside the FlutKit demo under the Carousels section.

Dart

Base UI → Carousels

Base UI → Carousels

Best Practices

Keep page content lightweight to ensure smooth animations.
Use a consistent height for all pages to avoid layout jumps.
Disable auto-slide for content that requires user interaction (e.g., forms).
Combine with responsive layouts to adapt carousel usage on smaller screens.

Summary

CustomCarousel provides a flexible and developer-friendly way to showcase rotating content in FlutKit dashboards. With built-in controls, indicators, and auto-sliding support, it helps create engaging and space-efficient UI sections while remaining easy to customize and extend.