¿Qué hay de nuevo en Flutter 2?

El año pasado, escribí dos artículos aquí en Smashing Magazine sobre el uso de Flutter en plataformas web y de escritorio. El primer artículo fue una introducción general al desarrollo web y de escritorio, y se centró en la creación de una interfaz de usuario receptiva; el segundo artículo trataba sobre los desafíos que podría enfrentar al intentar desarrollar una aplicación Flutter que se ejecute en múltiples plataformas.

En aquel entonces, el equipo de Flutter no consideraba que la compatibilidad con Flutter para plataformas no móviles fuera estable ni estuviera lista para la producción, pero ahora las cosas han cambiado.

Flutter 2 está aquí

El 3 de marzo, Google realizó el evento Flutter Engage, donde se lanzó Fluter 2.0. Esta versión es realmente una versión 2.0 adecuada, con muchos cambios que prometen hacer que Flutter esté realmente listo para ir más allá del desarrollo de aplicaciones móviles.

El cambio que es central para comprender por qué Flutter 2.0 es importante es que el desarrollo web ahora es oficialmente parte del canal estable y el soporte de escritorio también seguirá pronto en el canal estable. De hecho, actualmente está habilitado en forma de versión candidata como una instantánea beta de versión temprana en el canal estable.

En el anuncio, Google no solo dio una pista de cómo será el futuro de Flutter. También hubo ejemplos reales de cómo las grandes empresas ya están trabajando en las aplicaciones de Flutter para reemplazar sus aplicaciones existentes por otras que funcionan mejor y permiten que los desarrolladores sean más productivos. Por ejemplo, el fabricante de automóviles más grande del mundo, Toyota, ahora construirá el sistema de infoentretenimiento en sus automóviles usando Flutter.

Otro anuncio interesante, que muestra cuán rápido está mejorando Flutter como un SDK multiplataforma, es el anuncio de Canonical de que, además de desarrollar su nuevo instalador de Ubuntu usando Flutter, también usarán Flutter como su opción predeterminada para crear aplicaciones de escritorio.

También lanzaron una versión de Flutter del tema Yaru de Ubuntu, que usaremos más adelante en el artículo para crear una aplicación de escritorio de Flutter que se ve perfectamente en casa en el escritorio de Ubuntu, y también usa algunas de las nuevas funciones de Flutter. Puede echar un vistazo al anuncio de Flutter 2 de Google para obtener una imagen más completa.

Veamos algunos de los cambios técnicos en Flutter que entraron en el canal estable con la versión 2.0 y construyamos una aplicación de escritorio de ejemplo muy simple con Flutter antes de sacar algunas conclusiones sobre los tipos de proyectos específicos para los que podíamos y no podíamos usar Flutter. ahora.

Cambios generales de usabilidad para dispositivos más grandes

Según el anuncio, se han realizado muchos cambios en Flutter para brindar un mejor soporte para dispositivos que no son dispositivos móviles.

Por ejemplo, un ejemplo obvio de algo que se necesitaba para aplicaciones web y de escritorio y que hasta ahora tenía que hacerse usando paquetes de terceros o implementándolo usted mismo es una barra de desplazamiento .

Ahora hay una barra de Scrollbar incorporada que puede encajar perfectamente en su aplicación, luciendo exactamente como debería verse una barra de desplazamiento en la plataforma específica: con o sin una pista, con la posibilidad de desplazarse haciendo clic en la pista, por ejemplo, que es enorme si desea que sus usuarios se sientan como en casa desde el principio cuando usan su aplicación Flutter. También puede tematizarlo y personalizarlo.

También parece que, en algún momento, Flutter mostrará automáticamente las barras de desplazamiento adecuadas cuando el contenido de la aplicación se pueda desplazar.

Mientras tanto, puede envolver cualquier vista desplazable con el widget de barra de desplazamiento de su elección y crear un ScrollController para agregarlo como controller tanto para la barra de desplazamiento como para el widget desplazable (en caso de que nunca haya usado un ScrollController , lo usa exactamente como un TextEditingController para un campo de TextField ). Puede ver un ejemplo del uso de una barra de desplazamiento de Material normal un poco más abajo en este artículo en el ejemplo de la aplicación de escritorio.

Cambios web de Flutter

Flutter para la web ya se encontraba en una forma bastante útil, pero hubo problemas de rendimiento y usabilidad que significaron que nunca se sintió tan pulido como Flutter móvil. Con el lanzamiento de Flutter 2.0, ha habido muchas mejoras, especialmente en lo que respecta al rendimiento .

El objetivo de compilación, anteriormente muy experimental y difícil de usar para representar su aplicación (con WebAssembly y Skia), ahora se llama CanvasKit . Se refinó para ofrecer una experiencia consistente y de alto rendimiento al pasar de ejecutar una aplicación de Flutter de forma nativa en dispositivos móviles a ejecutarla en un navegador.

Ahora, de forma predeterminada, su aplicación se renderizará con CanvasKit para usuarios de la web de escritorio y con el renderizador HTML predeterminado (que también ha tenido mejoras, pero no es tan bueno como CanvasKit) para los usuarios de la web móvil.

Si ha intentado usar Flutter para crear aplicaciones web, es posible que haya notado que no era particularmente intuitivo tener algo tan simple como un hipervínculo. Ahora, al menos, puede crear hipervínculos un poco más como lo haría cuando usa HTML, usando la clase Link .

En realidad, esto no es una adición a Flutter en sí, sino una adición reciente al paquete url_launcher de Google. Puede encontrar una descripción completa y ejemplos de uso de la clase Link en la referencia oficial de la API.

Se mejoró la selección de texto , ya que ahora el punto de pivote corresponde al lugar donde el usuario comenzó a seleccionar el texto y no al borde izquierdo del texto SelectableText en cuestión. Además, ahora las opciones Copiar/Cortar/Pegar existen y funcionan correctamente.

Sin embargo, la selección de texto aún no es de primer nivel, ya que no es posible seleccionar texto en diferentes widgets de SelectableText y el texto seleccionable aún no es el predeterminado, pero hablaremos sobre esto y sobre otros inconvenientes web destacados de Flutter (falta de compatibilidad con SEO). , ante todo) en la conclusión de este artículo.

Cambios en el escritorio Flutter

Cuando escribí sobre desarrollo web y de escritorio con Flutter el año pasado, me centré principalmente en crear aplicaciones web con Flutter, dado que el desarrollo de escritorio aún se consideraba muy experimental (ni siquiera en el canal beta ). Ahora, sin embargo, el soporte de escritorio de Flutter pronto seguirá al soporte web y se mantendrá estable.

El rendimiento y la estabilidad se han mejorado bastante, y las mejoras en la usabilidad general para dispositivos más grandes operados con un mouse y un teclado que benefician tanto a las aplicaciones web también significan que las aplicaciones de escritorio de Flutter ahora son más usables.

Todavía hay una falta de herramientas para las aplicaciones de escritorio y todavía hay muchos errores pendientes bastante graves, así que no intente usarlo para su próximo proyecto de aplicación de escritorio destinado a la distribución pública.

Ejemplo de aplicación de escritorio creada con Flutter

Sin embargo, el soporte de escritorio de Flutter ahora es bastante estable y usable, y seguramente mejorará en el futuro tanto como Flutter en su totalidad ha mejorado hasta ahora, ¡así que intentémoslo para verlo en acción ! Puede descargar el código de ejemplo completo en un repositorio de GitHub.

La aplicación que construiremos es la siguiente aplicación muy simple. Tenemos una barra lateral de navegación junto con algunos elementos de contenido para cada una de las secciones de navegación.

Lo primero que debe hacer es averiguar sus dependencias .

En primer lugar, debe tener habilitado el desarrollo de escritorio de Flutter, usando el comando

 flutter config --enable-${OS_NAME}-desktop

donde reemplazaría ${OS_NAME} con el sistema operativo de escritorio de su elección, ya sea windows , linux o macos . Para este ejemplo, usaré Linux dado que vamos a usar el tema de Ubuntu.

También se necesitan otras dependencias para crear aplicaciones nativas para cada plataforma, por ejemplo, en Windows necesita Visual Studio 2019, en macOS necesita Xcode y CocoaPods y puede encontrar una lista actualizada de dependencias de Linux en el sitio web oficial de Flutter.

Luego crea un proyecto Flutter, ejecutando:

 flutter create flutter_ubuntu_desktop_example

Luego, debemos obtener el tema en sí (la única dependencia de nuestra aplicación) agregando yaru a las dependencies de su aplicación en pubspec.yaml (en la raíz del árbol fuente):

 dependencies: yaru: ^0.0.0-dev.8 flutter: sdk: flutter

Luego, pasemos a lib/main.dart , donde reside el código de nuestra aplicación.

Primero, importamos las cosas que necesitamos. En este caso, solo vamos a importar la biblioteca regular de Flutter Material Design y el tema Yaru (solo vamos a usar el tema claro para este ejemplo, por lo que solo show ese objeto en el paquete Yaru):

 import 'package:flutter/material.dart'; import 'package:yaru/yaru.dart' show yaruLightTheme;

En lugar de tener una clase de aplicación separada, vamos a llamar a los constructores de MaterialApp directamente en main cuando llamemos a runApp , así que ahí es donde establecemos el tema de la aplicación, que será el tema Yaru, más específicamente el tema ligero llamado yaruLightTheme :

 void main() => runApp(MaterialApp( theme: yaruLightTheme, home: HomePage(), ));

La página de StatefulWidget HomePage con los datos que mostraremos dado que es inmutable (recuerde, los widgets siempre son inmutables, la mutabilidad se maneja en el State de un StatefulWidget ):

 class HomePage extends StatefulWidget { final dataToShow = { "First example data": [ "First string in first list item", "Second in first", "Example", "One" ], "Second example": [ "This is another example", "Check", "It", "Out", "Here's other data" ], "Third example": [ "Flutter is", "really", "awesome", "and", "it", "now", "works", "everywhere,", "this", "is", "incredible", "and", "everyone", "should", "know", "about", "it", "because", "someone", "must", "be", "missing", "out", "on", "a lot" ] }.entries.toList(); @override createState() => HomePageState(); }

HomePageState es donde definimos la interfaz de usuario y el comportamiento de la aplicación. En primer lugar, echemos un vistazo al árbol de widgets que queremos construir (excluidos los elementos de lista y cuadrícula y los widgets de espaciado):

Vamos a restringir la Column de la izquierda (la que muestra los controles para que los widgets se muestren en el lado derecho de la aplicación) a un cierto ancho (400 píxeles, por ejemplo) usando un Container , mientras que GridView a la derecha debería Expanded para llenar la vista.

En el lado izquierdo de la Row (dentro de la Column ), ListView debe expandirse para llenar el espacio vertical debajo de la Row de botones en la parte superior. Dentro de la Row en la parte superior, también necesitamos expandir el TextButton (el botón de reinicio) para llenar el espacio a la derecha de los IconButton de chevron izquierdo y derecho.

El HomePageState resultante que hace todo eso, junto con la lógica necesaria para mostrar las cosas correctas a la derecha dependiendo de lo que el usuario seleccione a la izquierda, es el siguiente:

 class HomePageState extends State<HomePage> { int selected = 0; ScrollController _gridScrollController = ScrollController(); incrementSelected() { if (selected != widget.dataToShow.length - 1) { setState(() { selected++; }); } } decrementSelected() { if (selected != 0) { setState(() { selected--; }); } } @override Widget build(BuildContext context) { return Scaffold( body: Row( children: [ Container( color: Colors.black12, width: 400.0, child: Column( children: [ Row( children: [ IconButton( icon: Icon(Icons.chevron_left), onPressed: decrementSelected, ), IconButton( icon: Icon(Icons.chevron_right), onPressed: incrementSelected, ), Expanded( child: Center( child: TextButton( child: Text("Reset"), onPressed: () => setState(() => selected = 0), ), )) ], ), Expanded( child: ListView.builder( itemCount: widget.dataToShow.length, itemBuilder: (_, i) => ListTile( title: Text(widget.dataToShow[i].key), leading: i == selected ? Icon(Icons.check) : Icon(Icons.not_interested), onTap: () { setState(() { selected = i; }); }, ), ), ), ], )), Expanded( child: Scrollbar( isAlwaysShown: true, controller: _gridScrollController, child: GridView.builder( controller: _gridScrollController, itemCount: widget.dataToShow[selected].value.length, gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 200.0), itemBuilder: (_, i) => Container( width: 200.0, height: 200.0, child: Padding( padding: const EdgeInsets.all(8.0), child: Card( child: Center( child: Text(widget.dataToShow[selected].value[i])), ), ), )), ), ), ], ), ); } }

¡y listo!

Luego construyes tu aplicación con

 flutter build ${OS_NAME}

donde ${OS_NAME} es el nombre de su sistema operativo, el mismo que usó anteriormente para habilitar el desarrollo de escritorio de Flutter usando flutter config .

El binario compilado para ejecutar su aplicación será

 build/linux/x64/release/bundle/flutter_ubuntu_desktop_example

en Linux y

 build\windows\runner\Release\flutter_ubuntu_desktop_example.exe

en Windows, puede ejecutarlo y obtendrá la aplicación que le mostré al comienzo de esta sección.

En macOS, debe abrir macos/Runner.xcworkspace en Xcode y luego usar Xcode para compilar y ejecutar su aplicación.

Otros cambios de aleteo

También ha habido algunos cambios que también afectan el desarrollo móvil con Flutter, y aquí hay solo una breve selección de algunos de ellos.

Una característica que muchos de nosotros, los desarrolladores de Flutter, queríamos es una mejor compatibilidad con los anuncios de Admob , y ahora finalmente se incluye en el paquete oficial de google_mobile_ads . Otro es autocomplete ; hay un widget de material Autocomplete para él, así como un widget RawAutocomplete más personalizable.

La adición del Link que discutimos en la sección sobre desarrollo web en realidad se aplica a todas las plataformas , aunque sus efectos los sentirán más aquellos que trabajan en proyectos web de Flutter.

Cambios recientes en el idioma de Dart

Es importante estar al tanto de los cambios que se realizaron en el lenguaje Dart que afectan el desarrollo de la aplicación Flutter.

En particular, Dart 2.12 trajo soporte de interoperabilidad de lenguaje C (descrito en detalle y con instrucciones para diferentes plataformas en el sitio web oficial de Flutter); Además, se agregó la null-safety sonido al canal de lanzamiento estable de Dart.

null-safety

El mayor cambio que se realizó en Dart es la introducción de null-safety de sonido que está recibiendo cada vez más soporte de paquetes de terceros, así como de las bibliotecas y paquetes desarrollados por Google.

La seguridad nula brinda optimizaciones del compilador y reduce la posibilidad de errores de tiempo de ejecución, por lo que, aunque en este momento es opcional admitirla, es importante que comiences al menos a comprender cómo hacer que tu aplicación sea segura frente a nulos.

Sin embargo, por el momento, es posible que esa no sea una opción para usted, ya que no todos los paquetes de Pub son completamente seguros para nulos y eso significa que si necesita uno de esos paquetes para su aplicación, no podrá aprovechar los beneficios en nula-seguridad.

Cómo hacer que su aplicación sea null-safe

Si alguna vez ha trabajado con Kotlin, el enfoque de Dart para la seguridad nula le resultará algo familiar. Eche un vistazo a la guía oficial de Dart para obtener una guía más completa sobre la null-safety de Dart.

Todos los tipos con los que está familiarizado ( String , int , Object , List , sus propias clases, etc.) ahora no aceptan valores NULL: su valor nunca puede ser null .

Esto significa que una función que tiene un tipo de devolución que no acepta valores NULL siempre debe devolver un valor , de lo contrario obtendrá un error de compilación y siempre tendrá que inicializar variables que no aceptan valores NULL, a menos que sea una variable local a la que se le asigna un valor antes. alguna vez se usa.

Si desea que una variable sea anulable, debe agregar un signo de interrogación al final del nombre del tipo, por ejemplo, al declarar un número entero como este:

 int? a = 1

En cualquier momento, puede establecerlo en null y el compilador no llorará por ello.

Ahora, ¿qué sucede si tiene un valor anulable y lo usa para algo que requiere un valor no anulable? Para hacer eso, simplemente puede verificar que no sea nulo:

 void function(int? a) { if(a != null) { // a is an int here } }

Si sabe con 100% de certeza que existe una variable y que no es nula, puede simplemente usar el ! operador, así:

 String unSafeCode(String? s) => s!;

Sacar conclusiones: ¿Qué podemos hacer con Flutter 2?

A medida que Flutter sigue evolucionando, hay más y más cosas que podemos hacer con él, pero aún no es razonable decir que Flutter se puede usar para cualquier proyecto de desarrollo de aplicaciones de cualquier tipo.

En el lado móvil, es poco probable que te encuentres con algo en lo que Flutter no sea bueno porque ha sido compatible desde el principio y se ha pulido. La mayoría de las cosas que necesitarás ya están allí.

Por otro lado, la web y el escritorio aún no han llegado.

El escritorio todavía tiene algunos errores y las aplicaciones de Windows (que son una parte importante del desarrollo del escritorio) aún requieren mucho trabajo antes de que se vean bien. La situación es mejor en Linux y macOS solo hasta cierto punto.

La web está en un lugar mucho mejor que el escritorio . Puede crear aplicaciones web decentes, pero aún está limitado principalmente a aplicaciones de una sola página y aplicaciones web progresivas. Todavía no queremos usarlo para aplicaciones centradas en el contenido donde se necesitan indexabilidad y SEO.

Las aplicaciones centradas en el contenido probablemente no serán tan buenas porque la selección de texto aún no es de primer nivel, como vimos en la sección sobre el estado actual de Flutter para la web.

Sin embargo, si necesita la versión web de su aplicación Flutter, Flutter para la web probablemente estará bien, especialmente porque ya hay una gran cantidad de paquetes compatibles con la web y la lista siempre está creciendo.

Recursos adicionales

• Discurso principal (Flutter Engage), YouTube
• Novedades en Flutter 2, Flutter, Medio
• Comprender null safety , Dart.dev
• Desarrollo web y de escritorio receptivo con Flutter, Smashing Magazine
• Resolviendo problemas comunes multiplataforma cuando se trabaja con Flutter, Smashing Magazine