Clever Geek Handbook

Anuncio de Flutter 1.20

¡Rendimiento mejorado, autocompletado, nuevo widget y más!



Hola a todos, soy Evgeny Saturov de Surf. Les presento la traducción del artículo oficial sobre la última actualización de Flutter 1.20 con mis comentarios. El framework se vuelve cada vez más pulido con cada nuevo lanzamiento, y hoy vamos a echar un vistazo a lo que nos trajo el canal estable a finales del verano.







Con cada nueva versión, nos esforzamos por hacer que Flutter sea más rápido, estéticamente más agradable y más productivo, y para asegurarnos de que esté disponible para todas las plataformas compatibles. En la versión 1.20, que, en el momento del lanzamiento de este artículo, ya está disponible en nuestro canal estable, Flutter ha mejorado en cada uno de estos criterios.



Hablando de rendimiento , logramos mejorar el rendimiento tanto en los niveles más bajos del motor de renderizado como en el propio lenguaje Dart.



Para hacer que las aplicaciones de Flutter sean aún más estéticas, hemos agregado varias mejoras de interfaz de usuario a esta versión, incluida la tan esperada compatibilidad con autocompletar, una nueva forma de mover y escalar widgets, compatibilidad con el cursor del mouse, favoritos de material actualizado (como widgets de selección de fecha y hora) y agregamos una nueva página receptiva licencias para la ventana Acerca de, para aplicaciones Flutter de escritorio y móviles.



Para ayudarlo a ser más productivo , hemos actualizado la extensión Flutter para Visual Studio Code :

  • le permite utilizar Dart DevTools directamente en su IDE;
  • ahora puede mover archivos por el proyecto y las importaciones se actualizarán automáticamente;
  • Se ha agregado un nuevo conjunto de metadatos para que pueda escribir sus propias herramientas.


Gracias a la apertura de Flutter y la increíble comunidad de Flutter, esta versión incluye 3,029 solicitudes de extracción filtradas y 5,485 números cerrados de 359 colaboradores de todo el mundo, incluidos 270 colaboradores de la comunidad de Flutter. Además, este es un número récord de colaboradores que teníamos en el momento del próximo lanzamiento. Nos gustaría expresar un agradecimiento especial a los colaboradores CareF por 28 solicitudes de extracción, AyushBherwani1998 por 26 (incluidas 10 muestras de Google Summer of Code) y a14npara 13 solicitudes de extracción, muchas de las cuales adoptamos mientras trabajábamos en seguridad nula en Flutter (escribiremos más sobre esto pronto). No podríamos haber construido Flutter sin este enorme apoyo de la comunidad. ¡Gracias por tu contribución!



Con cada nueva versión de Flutter, vemos que la cantidad de usuarios crece rápidamente. Solo en abril, escribimos que el número de aplicaciones de Flutter en Google Play llegó a 50 mil. Durante el período pico, el crecimiento fue de 10 mil nuevas solicitudes por mes. Ahora, después de solo tres meses, se han publicado más de 90 mil en Google Play.



Aplicaciones de aleteo. Estamos viendo el mayor crecimiento en India, que se ha convertido en la región número uno para los desarrolladores de Flutter. En los últimos seis meses, su número se ha duplicado, lo cual es una consecuencia directa deaumentando la inversión de Google en la región. Finalmente, Flutter no sería Flutter si no fuera por Dart. Es bueno ver a Dart en el puesto 12 entre los 50 principales lenguajes de programación de la revista IEEE Spectrum , cuatro puestos más que el año pasado.



Mejoras de rendimiento para Flutter y Dart



En Flutter siempre estamos buscando nuevas formas de reducir el tamaño y acelerar sus aplicaciones. Por ejemplo, en esta versión, solucionamos un problema de rendimiento con la eliminación del icono de fuente cuando se agita el árbol , y también habilitamos este comportamiento de forma predeterminada al crear aplicaciones no web. Las mejoras mencionadas dan como resultado la eliminación de fuentes no utilizadas, reduciendo su tamaño. Probamos esto en la aplicación Flutter Gallery: se redujo en 100 KB de tamaño . Este es ahora el comportamiento predeterminado para las versiones de versiones. Por ahora, esto solo funciona con TrueType Fonts, pero esta limitación se eliminará en futuras versiones.



Otra mejora del rendimiento es reducir la irregularidad de la animación en la primera visualización a través de una fase de calentamiento. Vea cómo ha aumentado la suavidad de la animación (la grabación se ralentiza dos veces para mayor claridad).





Comparación de animaciones antes y después de la introducción del calentamiento de SkSL



Si una aplicación Flutter muestra una animación irregular durante el primer lanzamiento, esto puede corregirse utilizando Skia Shading Language. Al precompilar en la etapa de compilación de la aplicación, puede acelerar la animación más de 2 veces. Si desea aprovechar esta funcionalidad, vaya a la página de preparación de SkSL en flutter.dev.







, Flutter- . ? - Flutter - . 1.20 . , , .



-, Apple (, ) — - Metal. OpenGL.



-, . , flutter build. , . , .


Finalmente, a medida que optimizamos para escritorios, continuamos trabajando en la compatibilidad con el mouse. En esta versión, hemos reelaborado el sistema de prueba de pulsaciones del mouse para proporcionar una serie de beneficios arquitectónicos que no estaban disponibles debido a problemas de rendimiento. Esta refactorización ha dado como resultado una mejora del rendimiento de 15 veces en nuestros microbenchmarks web: los usuarios obtendrán un verificador de aciertos mejor, más consistente y más preciso sin sacrificar el rendimiento.



Además de mejorar las pruebas de acierto, hemos agregado compatibilidad con cursores de mouse, una de las características más solicitadas para computadoras de escritorio. Algunos de los widgets más utilizados mostrarán los cursores que espera de forma predeterminada. O puede elegir otro de la lista de cursores compatibles.







- Flutter for Web . 1.20, . , .




Nuevos cursores de mouse en widgets en Android



Esta versión de Flutter se basa en Dart 2.9 e incluye un nuevo decodificador UTF-8 de dos pasos. Está basado en estados y contiene primitivas de decodificación optimizadas en la máquina virtual Dart y aprovechando en parte las instrucciones SIMD.



UTF-8 es el método de codificación de caracteres más común en Internet. La capacidad de decodificar rápidamente juega un papel fundamental en la obtención de grandes respuestas de red. En nuestros puntos de referencia de decodificación UTF-8, notamos mejoras en todos los ámbitos. El aumento de la velocidad fue de casi un 200% para el inglés y de hasta un 400% para los textos en chino en dispositivos ARM de bajo rendimiento.



Autocompletar para aplicaciones Flutter



El soporte para autocompletar campos de texto en aplicaciones Flutter en Android e iOS ha sido durante mucho tiempo una de las características más codiciadas. Nos complace anunciar que después de la solicitud de extracción 52126 , ya no tendrá que pedir a sus usuarios que vuelvan a ingresar datos que el sistema operativo ya ha recopilado para ellos.





Autocompletar en acción



Además, ya hemos comenzado a adaptar esta funcionalidad para la web.



Nuevo widget para acciones de plantilla



En esta versión, hemos agregado un nuevo widget: InteractiveViewer. InteractiveViewer está diseñado para implementar acciones basadas en plantillas en su aplicación, como desplazarse, escalar y arrastrar y soltar, que funcionan incluso cuando se cambia de tamaño. Así es como funciona este widget para el ejemplo de tablero en Go .





Escalado, panorámica, cambio de tamaño, arrastrar y soltar con InteractiveViewer



Para integrar InteractiveViewer en su aplicación, consulte la documentación de la API . También puede probarlo en acción en DartPad. Si está interesado en aprender más sobre el desarrollo de InteractiveViewer, consulte esta presentación en el canal de YouTube Chicago Flutter .



En la nueva versión, también agregamosmás opciones para arrastrar y soltar . Por ejemplo, si necesita saber exactamente dónde ocurrió la caída en el widget de destino (esta opción anteriormente solo estaba disponible para el objeto Arrastrable ), ahora puede obtener estos datos usando el método DragTarget onAcceptDetails .





onAcceptDetails en acción



Consulte este ejemplo para obtener más información sobre esta función. En la próxima versión de Flutter, esta información también estará disponible durante el proceso de arrastrar y soltar, lo que permitirá que DragTarget actualice su estado visual de manera oportuna.







InteractiveViewer , , . , : — Justin McCandless. , Flutter. Justin ChicagoFlutter , Transform GestureDetector InteractiveViewer, .


Material- Slider, RangeSlider, TimePicker DatePicker



Junto con los nuevos widgets, esta versión contiene una serie de widgets actualizados de acuerdo con los nuevos principios de diseño de materiales . Específicamente Slider y RangeSlider. Para obtener más información, consulte ¿Qué hay de nuevo con el widget Slider? ...













Control deslizante de material actualizado Control deslizante de rango de material actualizado El selector de fechas



tiene un nuevo diseño compacto y compatibilidad con rangos de fechas.





DatePicker actualizado



Finalmente, hemos rediseñado completamente el TimePicker.





TimePicker actualizado



Puede probar el nuevo TimePicker en esta demostración de Flutter .



Página de licencias receptivas



Hemos creado una nueva página de licencia receptiva disponible en AboutDialog.





Nueva página con licencias



Pull Request 57588 del colaborador  TonicArtos se ha actualizado de acuerdo con los principios de diseño de materiales. Esto no solo hizo que el widget fuera más hermoso, sino que también mejoró la navegación: ahora es conveniente usarlo en tabletas, computadoras de escritorio y teléfonos inteligentes. Gracias, TonicArtos Teniendo en cuenta que cada aplicación de Flutter debe mostrar licencias para los paquetes que utiliza, ¡ha mejorado todas las aplicaciones de Flutter!



Nuevo formato pubspec.yaml para publicar complementos



Por supuesto, Flutter no se trata solo de widgets. También son herramientas. Hay demasiadas actualizaciones en esta versión, así que hablemos de las más notables.



Comencemos con un anuncio para los autores de complementos de Flutter: el antiguo formato pubspec.yaml ya no es compatible al publicar complementos. Si intenta usarlo, obtendrá un error al ejecutar pub publish.





Se produjo un error al publicar un complemento en el formato pubspec obsoleto. El



formato anterior no permitía especificar las plataformas en las que se ejecutan los complementos. Ha quedado obsoleto desde Flutter 1.12. Ahora se requiere el nuevo formato pubspec.yaml para publicar complementos nuevos o actualizados .



Los usuarios de complementos aún pueden usar el antiguo formato pubspec. Todos los complementos existentes en pub.dev que usan el obsoleto pubspec.yaml continuarán funcionando con las aplicaciones de Flutter en el futuro previsible.



Vista previa de Dart DevTools incorporadas en Visual Studio Code



La mayor actualización de herramientas de esta versión es para Visual Studio Code, con una vista previa de una nueva función que lleva a Dart DevTools directamente al espacio de desarrollo.





Vista previa del Explorador de diseño en código de Visual Studio



Habilite esta característica con la nueva configuración de dart.previewEmbeddedDevTools . La captura de pantalla anterior muestra el Inspector de widgets de Flutter integrado en Visual Studio Code. Con esta configuración, puede asignar una página de Favoritos en el menú de Dart DevTools ubicado en la barra de estado.





Este menú le permite elegir qué páginas mostrar.





Esta función aún se encuentra en la vista previa. Contáctanos si tienes algún problema con él.







— , , , Flutter-, VS Code ! , — -. , - , — . : VS Code. Android Studio .




La última versión de Dart DevTools viene con una versión actualizada de la utilidad de red que le permite perfilar las solicitudes web.





Dart DevTools Duración, estado y tipo de contenido de la



página de red de las conexiones de socket La página de red ahora agrega información de tiempo a las llamadas de red desde su aplicación, junto con otros datos como el estado y el tipo de contenido. Se han realizado mejoras adicionales en la interfaz de detalles de la solicitud, que ahora muestra datos de un socket web o solicitud http. Tenemos más planes para esta página, por ejemplo, queremos agregar mostrar el cuerpo de la solicitud y respuesta HTTP, así como monitorear el tráfico de gRPC.



Actualización de importaciones al cambiar el nombre de los archivos



Otra característica nueva de Visual Studio Code es que las importaciones se actualizan al mover o cambiar el nombre de los archivos.





Actualización de archivos Dart en movimiento



Esta característica actualmente solo funciona para archivos individuales, pero pronto agregaremos soporte para múltiples archivos o carpetas.



Comentario de



Android Studio, ahora si yo fuera tú, estaría seriamente preocupado. Una de las características más sutiles pero tan importantes de su querido IDE ahora está en VS Code. ¡Ahora puede cambiar el nombre de los archivos tanto como desee! No tiene que ajustar manualmente todas las importaciones (sí, sé que todos pasamos por esto). Oh, cuántas horas hombre nos salvó la actualización del complemento VS Code. Será interesante saber qué otras funciones avanzadas de refactorización usa en VS Code. Escribe en los comentarios.



Metadatos de herramientas



Otra actualización es para las personas que crean herramientas Flutter. Hicimos un nuevo proyecto en GitHub: allí recopilaremos y publicaremos metadatos sobre el marco en sí. En él encontrará archivos legibles por máquina que contienen estos datos:



Estos son los metadatos que usamos nosotros mismos para las extensiones de Android Studio / IntelliJ y VS Code. Pensamos que podrían resultar útiles a la hora de crear nuevas herramientas. En las aplicaciones de la familia IntelliJ, estos metadatos le permiten habilitar la visualización del color utilizado en su código Flutter.







En relación con esto, hay una nueva función en IntelliJ y Android Studio que procesa bloques de color para Color.fromARGB () y Color.fromRGBO ().







¡Nos gustaría expresar un agradecimiento especial a dratushnyy en GitHub por contribuir a mejorar las vistas previas de color en IntelliJ!



Canales de plataforma con seguridad de tipo para comunicación multiplataforma



En respuesta a una solicitud popular de los autores de complementos, decidimos experimentar cómo hacer que la comunicación entre Flutter y la plataforma sea más segura y fácil para complementos y Add-to-App . Para hacer esto, creamos Pigeon , una herramienta de línea de comandos que usa la sintaxis de Dart para generar código de seguridad de tipos en la parte superior de las tuberías de la plataforma sin dependencias adicionales de tiempo de ejecución. Pigeon le permite llamar a métodos Java / Objective-C / Kotlin / Swift y pasar objetos no primitivos llamando directamente a métodos Dart (y viceversa) en lugar de hacer coincidir manualmente los nombres de los métodos en las tuberías de la plataforma y serializar argumentos.







A pesar de que Pigeon aún se encuentra en estado de prelanzamiento, ha evolucionado lo suficiente como para que podamos usarlo en nuestro complemento video_player . Si está interesado en probar Pigeon en su proyecto, consulte la documentación actualizada del canal de la plataforma y este ejemplo .







Pigeon. , . Mobius GDG DevParty, Flutter- . «» , . -. Pigeon — .





Durante la producción de Flutter 1.20, las herramientas recibieron tantas actualizaciones excelentes que no podemos enumerarlas todas aquí. Sin embargo, seguro que te interesará echarles un vistazo:





Rompiendo cambios



Como siempre, intentamos mantener los cambios importantes al mínimo. Aquí hay una lista de dichos cambios en Flutter 1.20.





Resumen



Este es el lanzamiento más grande de Flutter hasta el momento. En este artículo, tocamos solo las herramientas más significativas y las mejoras de rendimiento y hablamos sobre los widgets más interesantes, nuevos y actualizados.



Planeamos agregar soporte para la seguridad nula (consulte el artículo detallado de Bob Nystrom Comprender la seguridad nula ), lanzar nuevas versiones de los complementos de Anuncios, Mapas y WebView, y expandir la compatibilidad de herramientas.



¿Cómo aplicaría las nuevas funciones de Flutter a su proyecto?


More articles:


All Articles