Saltar al contenido principal

Indicadores de progreso de Material 3 actualizados

Los widgets LinearProgressIndicator y CircularProgressIndicator han sido actualizados para coincidir con las especificaciones de Material 3 Design.

Resumen

#

El LinearProgressIndicator y CircularProgressIndicator se han actualizado para coincidir con las especificaciones de Material 3 Design.

Los cambios en el LinearProgressIndicator incluyen un espacio (gap) entre las pistas activas e inactivas, un indicador de parada (stop indicator) y esquinas redondeadas. Los cambios en el CircularProgressIndicator incluyen un espacio entre las pistas activas e inactivas, y un extremo de trazo (stroke cap) redondeado.

Contexto

#

Las especificaciones de Material 3 Design para el LinearProgressIndicator y CircularProgressIndicator se actualizaron en diciembre de 2023.

Para optar por las especificaciones de diseño de 2024, establece las banderas LinearProgressIndicator.year2023 y CircularProgressIndicator.year2023 en false. Esto se hace para garantizar que las aplicaciones existentes no se vean afectadas por las especificaciones de diseño actualizadas.

Descripción del cambio

#

Cada uno de los widgets LinearProgressIndicator y CircularProgressIndicator tiene una bandera year2023 que se puede establecer en false para optar por la especificación de diseño actualizada. El valor predeterminado para la bandera year2023 es true, lo que significa que los indicadores de progreso utilizan la especificación de diseño de 2023.

Cuando LinearProgressIndicator.year2023 se establece en false, el indicador de progreso tiene espacios entre las pistas activas e inactivas, un indicador de parada y esquinas redondeadas. Si el LinearProgressIndicator es indeterminado, el indicador de parada no se muestra.

Cuando CircularProgressIndicator.year2023 se establece en false, el indicador de progreso tiene un espacio en la pista y un extremo de trazo redondeado.

Guía de migración

#

Para optar por la especificación de diseño actualizada para el LinearProgressIndicator, establece la bandera year2023 en false:

dart 
LinearProgressIndicator(
  year2023: false,
  value: 0.5,
),

Para actualizar toda tu aplicación para que use el diseño actualizado de LinearProgressIndicator, establece la propiedad ProgressIndicatorThemeData.year2023 en false en tu MaterialApp:

dart 
return MaterialApp(
  theme: ThemeData(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
        // ...
        LinearProgressIndicator(
          year2023: false,
          value: 0.5,
        ),
        // ...

Para optar por la especificación de diseño actualizada para el CircularProgressIndicator, establece la bandera year2023 en false:

dart 
CircularProgressIndicator(
  year2023: false,
  value: 0.5,
),

Para actualizar toda tu aplicación para que use el diseño actualizado de CircularProgressIndicator, establece la propiedad ProgressIndicatorThemeData.year2023 en false en tu MaterialApp:

dart 
return MaterialApp(
  theme: ThemeData(progressIndicatorTheme: const ProgressIndicatorThemeData(year2023: false)),
        // ...
        CircularProgressIndicator(
          year2023: false,
          value: 0.5,
        ),
        // ...

Timeline

#

Llegó en la versión: 3.28.0-0.1.pre
En la versión estable: 3.29

Referencias

#

Documentación de la API:

Issues relevantes:

PRs relevantes:

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.