Google I/O 2023 - Se lanza Flutter 3.10, veamos qué hay de nuevo

El enlace original de la parte central: https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

Aunque la nota clave principal de esta E/S es principalmente la IA, todavía se lanza una nueva versión estable de Flutter como de costumbre, pero no es la 4.0 como todos suponían, sino la 3.10. El número de versión de Flutter sigue siendo tan inesperado.

Flutter 3.10 incluye principalmente mejoras relacionadas con la web, dispositivos móviles, gráficos, seguridad, etc. El núcleo es en realidad:

• iOS usa Impulsor por defecto
• Llegan un montón de nuevos controles de Material 3
• Optimización del nuevo rendimiento de iOS, actualización incidentalmente prescindible de Android
• La web se puede anidar en otras aplicaciones sin iframe

Estructura

Materia 3

Parece que Google está muy preocupado por la especificación de diseño de Material 3. De acuerdo con la última especificación de especificación de Material Design , Flutter también ha seguido con modificaciones relacionadas, incluidos nuevos componentes y temas de componentes y nuevos efectos visuales .

En la actualidad, los desarrolladores MaterialAppaún useMaterial3elegir si usar Material 3 a través del bit de bandera en la configuración del tema, pero a partir de la próxima versión estable, useMaterial3el valor predeterminado se ajustará atrue .

Para Material 3, puede obtener una vista previa a través de la demostración relacionada en https://flutter.github.io/samples/material_3.html.

ColorScheme.fromImageProvider

Todos los componentes de M3 configuran el color predeterminado del tema ColorScheme, y ​​el esquema de color predeterminado utiliza tonos morados, que es diferente del azul predeterminado anterior .

Además de personalizar los esquemas de configuración a partir de un solo color "semilla", también se pueden crear esquemas de color personalizados a partir de fromImageProviderimágenes .

Barra de navegación

Esta vez también agregó una versión M3 del efecto BottomNavigationBarde control , aunque M3 usa diferentes colores, resaltado y elevación, su método de trabajo sigue siendo el mismo que antes.

Si necesita NavigationBarsajustar la apariencia predeterminada de , puede usar NavigationBarThemepara anular la modificación Aunque no necesita migrar su aplicación existente a NavigationBars, la recomendación oficial es usarla NavigationBarscomo .

NavegaciónCajón

M3 también proporciona uno nuevo para Drawer NavigationDrawer , que NavigationDestinationsmuestra una lista de selección única y también puede contener otros controles en la lista.

Sincronizar con M3 Los colores y las alturas Drawertambién actualizado, junto con algunos cambios menores en el diseño.

NavigationDrawerSe puede desplazar cuando sea necesario y, si desea anular la apariencia predeterminada NavigationDrawerdel , también puede usarla NavigationDrawerThemepara anularla.

SearchBar y SearchAnchor

Este es el nuevo control de Flutter para buscar consultas y proporcionar predicciones.

Cuando el usuario ingresa una consulta de búsqueda, se calcula una lista de respuestas coincidentes en la "vista de búsqueda" y el usuario selecciona un resultado o ajusta los resultados coincidentes.

Si desea anular la apariencia predeterminada SearchBarThemedel , también puede usar SearchAnchorThemepara anularlo.

Barra de pestañas secundaria

Flutter en M3 ahora brinda soporte para crear contenido con pestañas de segundo nivel de forma predeterminada, que se puede usar para la pestaña de segundo nivel TabBar.secondary.

DatePicker y TimePicker actualizados

En M3, se ha DatePicker actualizado La API correspondiente no ha cambiado, pero se agregará una nueva DatePickerThemepara ajustar el estilo del control.

TimePickerAl igual que DatePickercon , se han actualizado los colores, el diseño y la forma de las versiones normal y compacta del control.

Actualización de la hoja inferior

En M3, BottomSheetademás de las actualizaciones de color y forma, se ha agregado un controlador de arrastre opcional, que surte efecto cuandoshowDragHandle se establece en .true

Actualización de ListTile

En M3, se ListTileactualizan , incluido el relleno de contenido, la alineación de los controles iniciales y finales, el ancho mínimo inicial y el espaciado vertical, etc., pero la API permanece sin cambios.

Actualización de campo de texto

M3 ha actualizado todo el soporte TextFieldpara gestos nativos.

Hacer doble clic TextFieldo tiene el mismo efecto que hacer doble clic o triple clic en un dispositivo táctil, que está disponible de forma predeterminada para TextFieldambos y .CupertinoTextField

TextFieldgesto de doble clic/toque

• Doble clic + arrastrar: Expande la selección en el bloque.
• Tocar dos veces + arrastrar: expande la selección en bloques.

TextFieldgesto de triple clic/toque

Triple clic

• TextFieldSeleccione un bloque de párrafo en la posición en la que se hizo clic en varias líneas (Android/Fuchsia/iOS/macOS/Windows).
• Cuando está dentro de una línea múltiple TextField(Linux), selecciona un bloque de líneas en la posición del clic.
• Selecciona todo el texto en una sola línea TextField.

Toque triple

• TextFieldSeleccione el bloque de párrafo en la posición en la que se hizo clic en la línea múltiple .
• Seleccionar todo el texto TextFielden

Triple clic+arrastrar

• Ampliar la selección en bloques de párrafo (Android/Fuchsia/iOS/macOS/Windows).
• Expandir selecciones en bloques de filas (Linux).

En pocas palabras, el gesto y el mouse activarán diferentes efectos de selección con doble clic y triple clic, y Linux tendrá una pequeña diferencia con el efecto de triple clic.

Flutter es compatible con el nivel 1 de SLSA

Flutter Framework ahora se compila utilizando Software Artifact Supply Chain Level ( SLSA ) Nivel 1, que admite la implementación de muchas funciones de seguridad, que incluyen:

• Proceso de compilación con secuencias de comandos : las secuencias de comandos de compilación de Flutter ahora permiten compilaciones automatizadas en plataformas de compilación confiables, basadas en una arquitectura protegida para ayudar a prevenir la manipulación de artefactos, mejorando la seguridad de la cadena de suministro.
• Aprobación multipartita con registros de auditoría : los flujos de trabajo de lanzamiento de Flutter solo se ejecutan después de la aprobación de varios ingenieros, todas las ejecuciones crean registros auditables de cambios que garantizan que nadie pueda introducir cambios entre el código fuente y la generación de artefactos.
• Procedencia : las versiones beta y estables ahora se crean utilizando provenance , lo que significa que las fuentes confiables con los artefactos de publicación del marco de creación de contenido esperado y los enlaces se publican con cada versión para ver y verificar la procedencia del archivo SDK .

Este trabajo también avanza hacia el cumplimiento de SLSA L2 y L3, que se centran en la protección de artefactos durante y después de la construcción.

Web

Tiempos de carga mejorados

3.10 reduce el tamaño de archivo de las fuentes de iconos, lo que elimina los glifos no utilizados de Material y Cupertino, lo que proporciona una carga más rápida.

CanvasKit más pequeño

Los navegadores basados ​​en Chromium pueden usar canales CanvasKit personalizados más pequeños, y CanvasKit alojado en Google gstatic.com puede mejorar aún más el rendimiento.

elemento incrustado

Ahora puede cargar Flutter Web desde un elemento específico en la página . No iframe, antes de esta versión, flutter web debe llenar todo el cuerpo de la página o mostrarse en iframela etiqueta En pocas palabras, es más conveniente anidar flutter web en otra web .

Se puede ver una demostración específica: https://github.com/flutter/samples/tree/main/web_embedding

Compatibilidad con sombreadores

Las aplicaciones web pueden usar el fragment shader de Flutter :

flutter:
  shaders:
    - shaders/myshader.frag

Motor

Impulso

iOS proporcionó soporte de vista previa de Impeller en la versión estable 3.7 y, desde entonces, Impeller ha recibido y abordado una gran cantidad de comentarios de los usuarios.

En la versión 3.10 hicimos más de 250 compromisos con Impeller, y ahora hacemos de Impeller el renderizador predeterminado en iOS .

Todas las aplicaciones creadas para iOS que usan Flutter 3.10 usan Impeller de forma predeterminada, por lo que las aplicaciones de iOS pueden esperar menos tartamudeos y un rendimiento más consistente.

Desde la versión 3.7, Impeller en iOS ha mejorado el consumo de memoria para usar menos pases de procesamiento y objetivos de procesamiento intermedios.

En los iPhone más nuevos, habilitar la compresión de textura con pérdida reduce el uso de la memoria sin comprometer la fidelidad, y estos avances también mejoran significativamente el rendimiento en el iPad .

Por ejemplo, la página "pulsar cita" en la aplicación Wonderous , estas mejoras han reducido el uso de memoria de la página actual a casi la mitad .

La reducción en el uso de la memoria también reduce moderadamente la carga de GPU y CPU, la aplicación Wondrous probablemente no registra estas caídas de carga, su marco ya estaba bien optimizado antes, pero este cambio debería mejorar la duración de la batería.

Impeller también libera la capacidad del equipo para entregar más rápidamente las solicitudes de funciones populares, como la compatibilidad con una gama de colores P3 más amplia en iOS.

Las contribuciones de la comunidad aceleraron nuestro progreso, especialmente los usuarios de GitHub ColdPaleLight y luckysmg , quienes escribieron varios parches relacionados con Impeller que mejoraron la fidelidad y el rendimiento.

Si bien Impeller satisface las necesidades de representación de la mayoría de las aplicaciones de Flutter, puede optar por desactivar Impeller. Si elige optar por no participar, considere presentar un problema en GitHub para informarnos por qué.

<key>FLTEnableImpeller</key>
<false/>

Los usuarios pueden notar pequeñas diferencias en el renderizado entre Skia e Impeller, estas diferencias pueden ser errores, así que no presente problemas en Github, en una versión futura eliminaremos el renderizador de Skia heredado para iOS para reducir el tamaño de Flutter .

Además, el backend Vulkan de Impeller todavía es compatible, e Impeller en Android todavía está en desarrollo activo, pero aún no está listo para la vista previa.

Para ver el progreso de Impeller, consulte https://github.com/orgs/flutter/projects/21.

Actuación

La versión 3.10 cubre muchas más mejoras de rendimiento y correcciones más allá de Impeller.

eliminar catón

Gracias a luckysmg , que descubrió que el tiempo para obtener la siguiente capa dibujable del controlador Metal se puede acortar configurando el color FlutterViewsde fondo en un valor distinto de cero.

Este cambio eliminó los problemas de baja velocidad de fotogramas en las pantallas iOS recientes de 120 Hz y, en algunos casos, triplicó las velocidades de fotogramas , lo que nos ayudó a resolver seis problemas de GitHub.

Este cambio fue tan significativo que implementamos una corrección en la versión 3.7 .

En la versión estable 3.7, movimos la carga de imágenes locales del subproceso de la plataforma al subproceso de Dart para evitar retrasos en los eventos vsync del subproceso de la plataforma. Pero los usuarios notaron que este trabajo adicional en el subproceso de Dart también causó algunos bloqueos.

En 3.10 movimos la apertura y decodificación de imágenes locales del subproceso de Dart a un subproceso de fondo , este cambio elimina pausas potencialmente largas en pantallas con muchas imágenes locales, al tiempo que evita retrasar eventos vsync, en nuestras pruebas locales y en puntos de referencia automatizados, esto El cambio redujo a la mitad el tiempo de carga de múltiples imágenes simultáneas.

Seguimos desarrollando optimizaciones sobre la nueva estructura interna DisplayList de Flutter, y en 3.10 agregamos el mecanismo de selección basado en R-Tree .

Este mecanismo elimina el manejo de las operaciones de dibujo anteriores en nuestro renderizador. Por ejemplo, las optimizaciones aceleran los pintores personalizados cuya salida falla fuera de la pantalla.

Nuestros micropuntos de referencia muestran una reducción de hasta el 50 % en el tiempo de procesamiento de DisplayList, y las aplicaciones con pintura personalizada recortada pueden ver mejoras variables según la complejidad y la cantidad de operaciones de pintura ocultas.

Reducir el retraso de inicio de iOS

La estrategia ineficiente anterior para la búsqueda de identificadores en las aplicaciones aumentó la latencia de inicio de la aplicación, que aumentó proporcionalmente al tamaño de la aplicación.

Y en 3.10, arreglamos la búsqueda de identificadores de paquete , que reduce la latencia de inicio de aplicaciones grandes en 100 ms o alrededor de 30 a 50 %.

Tamaño reducido

Flutter se usa SkParagraphcomo la biblioteca predeterminada para texto, diseño y renderizado, y anteriormente incluimos una marca para admitir la reversión a versiones heredadas libtxty minikin.

Dado que SkParagraphtenemos plena confianza en , eliminamoslibtxt y minikinsus banderas en 3.10, lo que redujo el tamaño comprimido de Flutter en 30 KB.

Parece confiado.

estabilidad

En la versión 3.0, habilitamos una función de Android al final de la canalización de renderizado que utiliza controladores de GPU avanzados que vuelven a dibujar menos contenido de pantalla cuando solo cambia una región "sucia".

Anteriormente habíamos agregado esto a una optimización anterior para lograr un efecto similar, y aunque nuestros resultados de referencia fueron decentes, surgieron dos problemas:

• En primer lugar, es posible que los puntos de referencia más mejorados no representen casos de uso reales.
• En segundo lugar, está resultando difícil encontrar un conjunto de dispositivos y versiones de Android que admitan esta función impulsada por GPU.

Debido al progreso y soporte limitados, hemos deshabilitado algunos repintados en Android .

Mientras usa el backend de Skia, la función permanece habilitada en iOS y esperamos habilitarla a través de Impeller en una versión futura.

mejoras de la API

decodificador APNG

Flutter 3.10 resuelve uno de nuestros problemas más preocupantes , APNGagrega la capacidad de decodificar imágenes , y ahora puede usar la API de carga de imágenes existente de Flutter para cargar APNGimágenes .

Mejoras en la API de carga de imágenes

3.10 agrega un nuevo método instantiateImageCodecWithSize que admite casos de uso que cumplen las siguientes tres condiciones:

• Relación de aspecto desconocida en carga
• restricciones del cuadro delimitador
• Restricciones de la relación de aspecto original

Móvil

iOS

depuración inalámbrica

Aplicaciones de Flutter para iOS que ahora pueden ejecutarse y recargarse en caliente de forma inalámbrica .

Una vez que haya emparejado con éxito su dispositivo iOS de forma inalámbrica en Xcode, puede usar flutter run para implementar su aplicación en el dispositivo. Si tiene problemas, verifique que el icono de red aparezca junto al dispositivo en Ventana > Dispositivos y simuladores > Dispositivos. .

Para obtener más información, puede consultar https://docs.flutter.dev/get-started/install/macos#ios-setup.

Compatibilidad con imágenes de amplia gama de colores

Las aplicaciones de Flutter en iOS ahora pueden admitir la representación precisa de imágenes de gama amplia. Para usar la compatibilidad con gama amplia, las aplicaciones deben usar Impeller Info.plisty agregar FLTEnableWideGamut la bandera al archivo.

Compatibilidad con la revisión ortográfica

SpellCheckConfiguration()El control ahora es compatible con el servicio de revisión ortográfica de Apple en iOS de forma predeterminada, que se puede configurar usando los parámetros spellCheckConfigurationen CupertinoTextField.

Casillas de verificación y radios adaptables

3.10 Agregados CupertinoCheckBoxy CupertinoRadioa la biblioteca Cupertino, crean componentes de casillas de verificación y botones de opción al estilo de Apple.

La casilla de verificación Material y los controles de radio tienen .adaptiveconstructores que usan los controles Cupertino correspondientes en iOS y macOS, y los controles Material en otras plataformas.

Optimiza las animaciones, transiciones y colores de Cupertino

Flutter 3.10 mejora algunas animaciones, transiciones y colores para que coincidan con SwiftUI, estas mejoras incluyen:

• renovar CupertinoPageRoute
• Agregar animación de zoom de títuloCupertinoSliverNavigationBar
• Se agregaron varios colores nuevos del sistema iOS.CupertinoColors

Rendimiento de PlatformView

Flutter limita la frecuencia de actualización en iOS para reducir el parpadeoPlatformViews cuando aparece una aplicación en la pantalla , lo que los usuarios pueden notar cuando .PlatformViews

macOS e iOS pueden usar código compartido en complementos

Flutter ahora admite pubspec.yamlla sharedDarwinSourceclave en el archivo del complemento, lo que indica que Flutter debe compartir el código de iOS y macOS.

ios: 
  pluginClass:  PathProviderPlugin 
  dartPluginClass:  PathProviderFoundation 
  sharedDarwinSource:  true 
macos: 
  pluginClass:  PathProviderPlugin 
  dartPluginClass:  PathProviderFoundation 
  sharedDarwinSource:  true

Nuevos recursos para extensiones de aplicación

Agregamos documentación para desarrolladores de Flutter que usan extensiones de aplicaciones de iOS, incluidas Live Activities, Home Screen Controls y Share extensions.

Para simplificar la creación de controles de pantalla de inicio y el uso compartido de datos, path_providerhemos homescreen_widgetagregado nuevos métodos a los complementos y .

Consulte: https://docs.flutter.dev/development/platform-integration/ios/app-extensions

Nuevos recursos para el diseño multiplataforma

La documentación ahora incluye consideraciones de diseño multiplataforma para componentes específicos de la interfaz de usuario . Para obtener más información sobre estos componentes de la interfaz de usuario, consulte las discusiones en el repositorio Flutter UX GitHub: https://github.com/flutter/uxr/discussions

Consulte: https://docs.flutter.dev/resources/platform-adaptations#ui-components

Androide

Compatibilidad con Android CameraX

Camera X es una biblioteca de Jetpack que simplifica la adición de una rica funcionalidad de cámara a las aplicaciones de Android.

Esta característica funciona con una variedad de hardware de cámara de Android, y en 3.10 agregamos soporte preliminar para CameraX al complemento Flutter Camera, que cubre los siguientes casos de uso:

• captura de imagen
• grabación de vídeo
• Mostrar vista previa de la cámara en vivo

Dependencies: 
  camera:  ^0.10.4  # 最新相机版本
  camera_android_camerax:  ^0.5.0

herramientas de desarrollo

Continuamos mejorando DevTools, un conjunto de herramientas de rendimiento y depuración para Dart y Flutter, algunos aspectos destacados incluyen:

• La interfaz de usuario de DevTools utiliza Material 3, que moderniza el aspecto y mejora la accesibilidad.
• La consola de DevTools admite la evaluación de una aplicación en ejecución en modo de depuración, lo que antes de 3.10 solo se podía hacer mientras la aplicación estaba en pausa.
• El visor de seguimiento integrado de Perfetto reemplaza al visor de seguimiento de la línea de tiempo anterior.

Perfetto puede manejar conjuntos de datos más grandes y funcionar mejor que los visores de seguimiento tradicionales como:

• Permitir fijar hilos de interés
• Haga clic y arrastre para seleccionar varios eventos de la línea de tiempo de varios fotogramas
• Extraiga datos específicos de eventos de la línea de tiempo mediante consultas SQL

Desaprobaciones y cambios importantes

API en desuso

Los cambios importantes en 3.10 incluyen API obsoletas que expiraron después del lanzamiento de v3.7.

Para ver todas las API afectadas, así como contexto adicional y orientación sobre migración, consulte la guía de obsolescencia de la versión anterior .

Dart Fix puede solucionar muchos de estos problemas, incluidos arreglos rápidos en el IDE y dart fixaplicaciones por lotes mediante comandos.

Actualización de Android Studio Flamingo

Después de actualizar Android Studio a Flamingo, flutter runes posible flutter buildvea errores al intentar compilar o Flutter aplicaciones de Android.

Este error ocurre porque Android Studio Flamingo actualizó su SDK de Java incluido de 11 a 17, y la versión anterior de Gradle 7.3 no funciona cuando se usa Java 17.

Hemos actualizadoflutter analyze --suggestions para verificar si este error ocurre debido a una incompatibilidad entre las versiones de Java SDK y Gradle.

Para conocer las diferentes formas de solucionar este error, consulte nuestra guía de migración: https://docs.flutter.dev/go/android-java-gradle-error.

Los singletons de ventana están en desuso

La versión revisada desaprueba el singleton de Windows, y las aplicaciones y bibliotecas que dependen de él deben comenzar a migrar .

Esto preparará su aplicación para la compatibilidad con varias ventanas con anticipación cuando la admita en una versión futura de Flutter.

PD: También pueden estar atentos al nuevo juego basado en Flutter lanzado por este I/O: I/O FLIP game