Personalizar la alineación de las pestañas usando la nueva propiedad TabBar.tabAlignment

Uso de TabBar.tabAlignment para personalizar la alineación de las pestañas en un TabBar.

La propiedad TabBar.tabAlignment establece dónde coloca las pestañas un TabBar de Material 3. El enum TabAlignment tiene los siguientes valores:

• TabAlignment.start: Alinea las pestañas al inicio del TabBar con scroll (desplazable).
• TabAlignment.startOffset: Alinea las pestañas al inicio del TabBar con scroll con un desplazamiento (offset) de 52.0 píxeles.
• TabAlignment.center: Alinea las pestañas al centro del TabBar.
• TabAlignment.fill: Alinea las pestañas al inicio y las estira para llenar el TabBar fijo.

El TabBar con scroll admite las siguientes alineaciones:

• TabAlignment.start
• TabAlignment.startOffset
• TabAlignment.center

El TabBar fijo admite las siguientes alineaciones:

• TabAlignment.fill
• TabAlignment.center

Cuando estableces ThemeData.useMaterial3 en true, un TabBar con scroll alinea las pestañas como TabAlignment.startOffset de forma predeterminada. Para cambiar esta alineación, establece la propiedad TabBar.tabAlignment para la personalización a nivel de widget. O establece la propiedad TabBarThemeData.tabAlignment para la personalización a nivel de aplicación.

Cuando estableces TabBar.isScrollable y ThemeData.useMaterial3 en true, las pestañas en un TabBar con scroll tienen como valor predeterminado TabAlignment.startOffset. Esto alinea las pestañas al inicio del TabBar con scroll con un desplazamiento de 52.0 píxeles. Esto cambia el comportamiento anterior. Las pestañas se alineaban al inicio del TabBar con scroll cuando se necesitaban mostrar más pestañas de las que permitía el ancho.

Un TabBar con scroll de Material 3 usa TabAlignment.startOffset como la alineación de pestañas predeterminada. Esto alinea las pestañas al inicio del TabBar con scroll con un desplazamiento de 52.0 píxeles.

Para alinear las pestañas al inicio del TabBar con scroll, establece TabBar.tabAlignment en TabAlignment.start. Este cambio también elimina el desplazamiento de 52.0 píxeles. Los siguientes fragmentos de código muestran cómo usar TabBar.tabAlignment para alinear las pestañas al inicio del TabBar con scroll:

Código antes de la migración:

TabBar(
  isScrollable: true,
  tabs: List<Tab>.generate(
    count,
    (int index) => Tab(text: 'Tab $index'),
  ).toList(),
);

Código después de la migración:

TabBar(
  tabAlignment: TabAlignment.start,
  isScrollable: true,
  tabs: List<Tab>.generate(
    count,
    (int index) => Tab(text: 'Tab $index'),
  ).toList(),
);

Llegó en la versión: 3.13.0-17.0.pre
En la versión estable: 3.16

Documentación de la API:

• TabBar
• TabBar.tabAlignment
• TabAlignment

PRs relevantes:

• Presentar TabBar.tabAlignment
• Corregir el TabBar con scroll de Material 3