Saltar al contenido principal

Establecer el valor predeterminado de SystemUiMode a edge-to-edge

De forma predeterminada, las aplicaciones orientadas a Android SDK 15+ optarán por el modo edge-to-edge.

Resumen

#

El modo edge-to-edge es el comportamiento de visualización predeterminado de Android a partir de la versión 15 de Android y posteriores. In Android 15, podías optar por no participar en este comportamiento, pero a partir de Android 16, ya no puedes hacerlo. Para obtener más información sobre este cambio, consulta las notas de la versión de Android 16.

Android 16 (o posterior)

#

Utilizar el mecanismo para optar por no participar en edge-to-edge en Android 16 o posterior podría hacer que tu aplicación falle, pero puedes evitar esto utilizando recursos específicos de la versión; para obtener más detalles, visita la guía de migración.

Para aprender cómo estructurar tu aplicación para evitar esto, te recomendamos visitar el artículo de LeanCode, Mastering Edge-To-Edge in Flutter: A Deep Dive Into the System Navigation Bar in Android. También puedes encontrar más discusión en el Issue 168635 en GitHub.

Android 15 (y anteriores)

#

Si tu aplicación de Flutter está orientada a la versión 15 del Android SDK, se mostrará automáticamente en modo edge-to-edge, como se documenta en la página de la API de SystemUiMode. Para mantener el comportamiento de la aplicación que no es edge-to-edge (incluido un SystemUiMode no establecido), sigue los pasos de la guía de migración.

Contexto

#

De forma predeterminada, Android impone el modo edge-to-edge para todas las aplicaciones que están orientadas a Android 15 o posterior. Para obtener más información sobre este cambio, consulta las notas de la versión de Android 15. Esto afecta a los dispositivos que ejecutan Android SDK 15+ o API 35+.

Antes de Flutter 3.27, las aplicaciones de Flutter estaban orientadas a Android 14 de forma predeterminada y no optaban por el modo edge-to-edge automáticamente, pero tu aplicación se verá afectada cuando decidas orientarla a Android 15. Si tu aplicación está orientada a flutter.targetSdkVersion (como lo hace de forma predeterminada), entonces estará orientada a Android 15 a partir de la versión 3.27 de Flutter, optando automáticamente por el modo edge-to-edge en tu aplicación.

Si tu aplicación establece explícitamente SystemUiMode.edgeToEdge para ejecutarse en modo edge-to-edge llamando a SystemChrome.setEnabledSystemUIMode, entonces tu aplicación ya está migrada. Las aplicaciones que necesitan más tiempo para migrar al modo edge-to-edge deben seguir los siguientes pasos para optar por no participar en dispositivos que ejecutan Android SDK 15.

Ten en cuenta lo siguiente:

  1. Android planea que la solución alternativa detallada aquí sea temporal.
  2. Flutter planea alinearse con Android (e iOS) para soportar edge-to-edge de forma predeterminada dentro de este año, así que migra al modo edge-to-edge antes de que el sistema operativo elimine la capacidad de optar por no participar.

Guía de migración

#

Para optar por no participar en edge-to-edge en Android SDK 15, especifica el nuevo atributo de estilo en cada actividad que lo requiera. Si tienes un estilo padre del cual los estilos hijos necesitan optar por no participar, puedes modificar solo el padre. En el siguiente ejemplo, actualiza la configuración de estilo generada a partir de flutter create.

De forma predeterminada, los estilos utilizados en una aplicación de Flutter se configuran en el archivo de manifiesto de Android (your_app/android/app/src/main/AndroidManifest.xml). Generalmente, los estilos se indican mediante @style y ayudan a dar formato a tu aplicación. Modifica estos estilos predeterminados en tu archivo de manifiesto:

AndroidManifest.xml
xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application ...>
        <activity ...>
            <!-- Style to modify: -->
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
            />
        </activity>
    </application>
</manifest>

Localiza la definición del estilo en: your_app/android/app/src/main/res/values/styles.xml.

Agrega el siguiente atributo a los estilos correspondientes:

styles.xml
xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        ...
        <!-- Add the following line: -->
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    </style>
    ...
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        ...
	      <!-- Add the following line: -->
        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
    </style>
</resources>

Asegúrate de aplicar el mismo cambio también en el archivo de estilos del modo noche: your_app/android/app/src/main/res/values-night/styles.xml.

Asegúrate de que ambos estilos se actualicen de manera consistente en ambos archivos.

Este estilo modificado opta por no participar en el modo edge-to-edge para aplicaciones orientadas a Android SDK 15.

Timeline

#

A partir de Flutter 3.27, las aplicaciones de Flutter están orientadas a Android 15 de forma predeterminada, por lo que si deseas usar esta versión y no configurar manualmente una versión de SDK de destino inferior para tu aplicación de Flutter, sigue los pasos de migración anteriores para mantener un SystemUiMode no establecido o que no sea edge-to-edge.

Introducido en la versión: 3.26.0-0.0.pre
Versión estable: 3.27

Referencias

#