CircularRevealIndicator class

Indicador circular animado tipo “reveal por segmentos”.

Renderiza un anillo compuesto por segmentCount segmentos radiales que se revelan en torno a un segmento activo. El segmento activo se resalta con mayor longitud y grosor, y los segmentos adyacentes pueden mostrar un efecto de degradado (halo) configurable mediante activeSegments.

Modos de operación

Automático (animate: true y currentIndex == null): rota el segmento activo de forma continua según animationDuration.
Manual (currentIndex != null): tú controlas el índice activo. Suele usarse para sincronizar con un progreso o una lectura externa. En este modo se ignora la animación interna (se detiene).

UX/Consejos

Usa activeColor bien contrastado con inactiveColor para una lectura clara, sobre todo con strokeWidth reducido.
activeSegments crea un halo suave alrededor del activo; mantenerlo bajo (2–4) suele producir un look elegante sin ruido visual.
Si renderizas varios indicadores superpuestos (p. ej., efecto reloj), envuélvelos en Stack y juega con size, strokeWidth y opacidades.
RepaintBoundary ya está incluido para evitar repaints innecesarios en padres cuando el indicador actualiza su frame.

Ejemplo básico (auto-rotación)

CircularRevealIndicator(
  size: 120,
  segmentCount: 12,
  activeColor: Colors.blue,
  inactiveColor: Colors.grey,
  strokeWidth: 3,
  animationDuration: const Duration(seconds: 2),
)

Ejemplo con control manual

// Avanza el índice desde afuera (por ejemplo, con un Timer)
int idx = 0;
Timer.periodic(const Duration(milliseconds: 100), (_) {
  setState(() => idx = (idx + 1) % 60);
});

CircularRevealIndicator(
  size: 80,
  segmentCount: 60,
  currentIndex: idx, // Control manual
  animate: false,    // Desactiva animación interna
  activeSegments: 4, // Halo un poco más ancho
)

Ejemplo efecto “reloj” en capas

Stack(
  alignment: Alignment.center,
  children: [
    CircularRevealIndicator(
      size: 200,
      segmentCount: 60,
      activeColor: Colors.cyan.withOpacity(0.3),
      animationDuration: const Duration(minutes: 60), // horas/minutos
    ),
    CircularRevealIndicator(
      size: 150,
      segmentCount: 60,
      activeColor: Colors.cyan.withOpacity(0.6),
      animationDuration: const Duration(seconds: 60), // segundos
    ),
  ],
)

Notas técnicas

El layout del trazo se basa en líneas radiales cortas con StrokeCap.round, ajustando longitud y grosor en función de la distancia al índice activo.
shouldPaint: true pinta también los segmentos anteriores como activos, útil para simular progreso acumulado.
animationDuration controla una vuelta completa del índice activo (modo automático).

Inheritance

Object
DiagnosticableTree
Widget
StatefulWidget
CircularRevealIndicator

Constructors

CircularRevealIndicator({Key? key, double size = 40.0, int segmentCount = 12, Color activeColor = Colors.blue, Color inactiveColor = const Color(0xFFE0E0E0), int? currentIndex, bool shouldPaint = true, double strokeWidth = 2.0, Duration animationDuration = const Duration(milliseconds: 1200), int activeSegments = 3, bool animate = true}): Crea un CircularRevealIndicator.
const

Properties

activeColor → Color: Color de los segmentos activos/revelados.
final
activeSegments → int: Número de segmentos adyacentes que muestran efecto de degradado (halo).
final
animate → bool: Si el indicador debe animarse automáticamente (solo si currentIndex es null).
final
animationDuration → Duration: Duración de una rotación completa del indicador en modo automático.
final
currentIndex → int?: Índice del segmento actualmente activo (para control manual). Si es null, el índice se controla automáticamente con la animación.
final
hashCode → int: The hash code for this object.
no setterinherited
inactiveColor → Color: Color de los segmentos inactivos.
final
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
segmentCount → int: Número de segmentos que componen el círculo.
final
shouldPaint → bool: Si true, pinta todos los segmentos anteriores al actual como activos (útil para simular progreso acumulado).
final
size → double: Tamaño total del indicador circular (ancho y alto).
final
strokeWidth → double: Grosor de los segmentos.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<CircularRevealIndicator>: Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>: Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void: Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode: Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String: A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String: Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String: Returns a one-line detailed description of the object.
inherited
toStringShort() → String: A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool: The equality operator.
inherited