carousel_indicator

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A lightweight and straightforward Flutter package for creating carousel indicators that update based on the current index. It features built-in slide animations for smooth transitions between indicator states. Designed for simplicity, it integrates easily into any carousel or cover flow UI, providing visual feedback on the current slide position without additional complexity. Ideal for apps needing minimalistic, animated indicators with little setup.

Use cases

Displaying slide progress in a carousel
Enhancing user experience with visual feedback
Creating animated indicators for cover flow layouts
Integrating with PageView or Carousel widgets
Customizing indicator appearance with minimal code

Key features

Simple index-based updating
Pre-built slide animation
Minimal API surface
Supports multiple platforms
Easy integration with PageView
Customizable indicator styling

Suitable for

Developers seeking lightweight carousel indicators
Apps with dynamic content carousels
UIs requiring subtle visual cues
Projects prioritizing simplicity and performance
Flutter beginners exploring carousel components

Considerations

Limited customization beyond basic styling
No built-in support for non-linear animations
Requires manual handling of state management
Not ideal for complex interactive carousels
Depends on external PageView or similar widget for functionality

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

A Minimal and Simple carousel indicator library.

Author

Tech Skape (Love K.) techskape@gmail.com

Screenshot

Example

import 'package:carousel_indicator/carousel_indicator.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      
        primarySwatch: Colors.blue,
      
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
 int pageIndex=0;

  List<Widget> _demo=[
    Container(height: 300,color: Colors.amber),
              Container(height: 300,color: Colors.black),
              Container(height: 300,color: Colors.blue),
              Container(height: 300,color: Colors.green),
  ];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 300,
          width: double.infinity,
          child: PageView(
            children: _demo,
            
            onPageChanged: (index){
                setState(() {
                  pageIndex=index;
                });
            },
          ),
        ),
        SizedBox(height: 40,),
        CarouselIndicator(
          count: _demo.length,
          index: pageIndex,
        ),
      ],
    );
  }
}

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Search packages, repositories and app categories