Flutter para desarrolladores web front-end | consejos CSS

Comencé como desarrollador web front-end y luego me convertí en desarrollador de Flutter. Creo que algunos conceptos me ayudaron a adoptar Flutter más fácilmente. También hubo algunos conceptos nuevos que eran diferentes.

En este artículo, quiero compartir mi experiencia e inspirar a cualquiera que se sienta paralizado por elegir un ecosistema sobre otro, mostrando cómo se transfieren los conceptos y se puede aprender cualquier concepto nuevo.

Conceptos que han sido transferidos

Esta sección muestra dónde se parecen el desarrollo web front-end y Flutter. Explica las habilidades que ya tienes y que son una ventaja para ti si inicias Flutter.

1. Implementación de interfaces de usuario (UI)

Para implementar una interfaz de usuario determinada en la web front-end, debe componer elementos HTML y aplicarles estilo con CSS. Para implementar interfaces de usuario en Flutter, compones artilugio y péinalos con Propiedades.

Al igual que CSS, el Color la clase en Dart funciona con "rgba" y "hex". Al igual que CSS, Flutter usa píxeles para las unidades de espacio y tamaño.

En Flutter, tenemos clases y enumeraciones de Dart para casi todas las propiedades de CSS y sus valores. Por ejemplo:

Flutter también tiene Column y Row widgets Estos son los equivalentes de Flutter para display: flex en CSS. Configurar justify-content y align-items estilos, usas MainAxisAlignment y CrossAxisAlignment Propiedades. Para ajustar el flex-grow estilo, envuelva los widgets secundarios relevantes del Column/Rowen un Expanded Dónde Flexible.

Para interfaces de usuario avanzadas, Flutter tiene la CustomPaint clase - es para Flutter lo que el Canvas API está en desarrollo web. CustomPaint te da un pintor para dibujar cualquier interfaz de usuario como desees. Usualmente usarás CustomPaint cuando quieres algo realmente complejo. También, CustomPaint es la solución ideal cuando una combinación de widgets no funciona.

2. Desarrollar para muchos Resoluciones de pantalla

Los sitios web se ejecutan en navegadores y las aplicaciones móviles se ejecutan en dispositivos. Como tal, al desarrollar para cualquiera de las plataformas, debe tener en cuenta la plataforma. Cada plataforma implementa las mismas características (cámara, ubicación, notificaciones, etc.) de diferentes maneras.

Como desarrollador web, piensa en la capacidad de respuesta de su sitio web. Utiliza consultas de medios para administrar cómo se ve su sitio web en pantallas más pequeñas y más grandes.

Al pasar del desarrollo web móvil a Flutter, tienes la MediaQuery clase auxiliar. los MediaQuery la clase te da el dispositivo actual orientation (paisaje o retrato). También te da la ventana actual. sizela devicePixelRatio, entre otra información del dispositivo. Juntos, estos valores le brindan una descripción general de la configuración del dispositivo móvil. Puede usarlos para cambiar el aspecto de su aplicación móvil en diferentes tamaños de pantalla.

3. Trabaje con depuradores, editores y herramientas de línea de comandos

Los navegadores de escritorio tienen herramientas para desarrolladores. Estas herramientas incluyen un inspector, una consola, un monitor de red, etc. Estas herramientas mejoran el proceso de desarrollo web. Flutter también tiene sus propias DevTools. Cuenta con su inspector de widgets, depurador, monitor de red, entre otras características.

El soporte de IDE también es similar. Visual Studio Code es uno de los IDE más populares para el desarrollo web. Hay muchas extensiones web para VS Code. Flutter también es compatible con VS Code. Por lo tanto, durante la transición, no necesita cambiar de IDE. Hay extensiones Dart y Flutter para VS Code. Flutter también funciona bien con Android Studio. Android Studio y VS Code son compatibles con Flutter DevTools. Estas integraciones IDE completan las herramientas de Flutter.

La mayoría de los marcos de JavaScript front-end vienen con su interfaz de línea de comandos (CLI). Por ejemplo: Angular CLI, Create React App, Vue CLI, etc. Flutter también viene con una CLI exclusiva. La CLI de Flutter le permite compilar, crear y desarrollar proyectos de Angular. Tiene comandos para analizar y probar proyectos de Flutter.

Conceptos que eran nuevos

Esta sección analiza los conceptos específicos de Flutter que son más fáciles o inexistentes en el desarrollo web. Explica las ideas que debe tener en cuenta al ingresar a Flutter.

Cómo manejar el desplazamiento

Al desarrollar para la web, el comportamiento de desplazamiento predeterminado lo manejan los navegadores web. Sin embargo, puede personalizar el desplazamiento con CSS (usando overflow).

Este no es el caso en Flutter. Los grupos de widgets no se desplazan de forma predeterminada. Cuando sienta que los grupos de widgets podrían desbordarse, debe configurar el desplazamiento de manera proactiva.

En Flutter, configuras el desplazamiento usando widgets particulares que permiten el desplazamiento. Por ejemplo: ListView, SingleChildScrollView, CustomScrollView, etc. Estos widgets desplazables le brindan un gran control sobre el desplazamiento. Con CustomScrollViewpuede configurar mecanismos de desplazamiento expertos y complejos dentro de la aplicación.

En el lado de Flutter, usando ScrollViews es inevitable. Android e iOS tienen ScrollView y UIScrollView para gestionar el desplazamiento. Flutter necesita una manera de unificar la experiencia de renderizado y desarrollo usando su ScrollViewstambién.

Puede ser útil dejar de pensar en el flujo de la estructura del documento y, en su lugar, pensar en la aplicación como un lienzo abierto para los mecanismos de pintura nativos de un dispositivo.

2. Configuración de su entorno de desarrollo

Para crear el sitio web más simple, puede crear un archivo con un .html extensión y ábralo en un navegador. Flutter no es tan simple. Para usar Flutter, debe tener instalado el SDK de Flutter. y ha configurado Flutter para un dispositivo de prueba. Entonces, si desea codificar Flutter para Android, debe configurar el SDK de Android. También deberá configurar al menos un dispositivo Android (un emulador de Android o un dispositivo físico).

Este es el mismo caso para los dispositivos Apple (iOS y macOS). Después de instalar Flutter en una Mac, aún necesita configurar Xcode antes de continuar. También necesitará al menos un simulador de iOS o un iPhone para probar Flutter en iOS. Flutter para escritorio también es una configuración considerable. En Windows, debe configurar el SDK de desarrollo de Windows con Visual Studio (no VS Code). En Linux, instalará más paquetes.

Sin configuración adicional, Flutter funciona en todos los navegadores. Por lo tanto, puede omitir la configuración adicional para los dispositivos de destino. En la mayoría de los casos, usará Flutter para el desarrollo de aplicaciones móviles. Por lo tanto, querrá configurar al menos Android o iOS. Flutter viene con el flutter doctor ordenado. Este comando informa el estado de su configuración de desarrollo. De esta manera, sabrá en qué trabajar, en la configuración, si es necesario.

Eso no significa que el desarrollo de Flutter sea lento. Flutter viene con un potente motor. los flutter run El comando permite la recarga en caliente del dispositivo de prueba durante la codificación. Pero luego tendrás que presionar R para recargar en caliente. Esto no es un problema. La extensión VS Code de Flutter permite la recarga automática en caliente en los cambios de archivos.

3. Empaquetado y despliegue

La implementación de sitios web es más económica y sencilla que la implementación de aplicaciones móviles. Cuando implementa sitios web, accede a ellos a través de nombres de dominio. Estos nombres de dominio generalmente se renuevan anualmente. Sin embargo, son opcionales.

Hoy en día, muchas plataformas ofrecen alojamiento gratuito.

Por ejemplo: DigitalOcean te ofrece un subdominio gratis en .ondigitalocean.com.

Puede utilizar estos dominios si está creando un sitio web de documentación. También puedes usarlos cuando no te importa la marca.

En el mundo de Flutter con aplicaciones móviles, generalmente implementas tu aplicación en dos lugares en la mayoría de los casos.

Debe crear una cuenta de desarrollador en cada una de estas plataformas. Registrar una cuenta de desarrollador requiere una tarifa o suscripción y verificación de identidad.

Para la App Store, debe unirse al Programa de desarrolladores de Apple. Debe mantener una suscripción anual de $99. Para Google Play, debe realizar un pago único de $25 por la cuenta.

Estas tiendas revisan cada aplicación revisada antes de que se publique.

También tenga en cuenta que los usuarios no consumen fácilmente las actualizaciones de la aplicación. Los usuarios deben actualizar explícitamente las aplicaciones instaladas. Esto contrasta con la web, donde cualquiera puede ver la última versión implementada de un sitio web.

Administrar aplicaciones implementadas es relativamente más exigente que administrar sitios web implementados. Sin embargo, eso no debería asustarte. Después de todo, se implementan millones de aplicaciones en cualquiera de las dos tiendas, por lo que también puede agregar las suyas propias.

Pensamientos adicionales sobre la flotación

Flutter es una herramienta multiplataforma para crear aplicaciones de escritorio, móviles o web. Las aplicaciones Flutter son perfectas en píxeles. Flutter pinta la misma interfaz de usuario en todas las aplicaciones, independientemente de la plataforma de destino. Esto se debe a que cada aplicación Flutter contiene el motor Flutter. Este motor representa el código de la interfaz de usuario de Flutter. Flutter proporciona un lienzo para cada dispositivo y te permite pintar de la forma que quieras. El motor se comunica con la plataforma de destino para manejar eventos e interacciones.

Flotar es efectivo. Tiene altos niveles de rendimiento. De hecho, está construido con Dart y aprovecha las características de Dart.

Con todas estas ventajas, Flutter es una buena opción para muchas aplicaciones. Las aplicaciones multiplataforma ahorran tiempo y dinero durante la producción y el mantenimiento. Sin embargo, Flutter (y las soluciones multiplataforma) pueden no ser una opción óptima en algunos casos.

No use Flutter si desea que los usuarios usen herramientas de desarrollo de plataforma con su aplicación. Las herramientas de desarrollador de plataforma aquí significan herramientas específicas del dispositivo, como las opciones de desarrollador de Android. También incluye herramientas para desarrolladores de navegadores.

No use Flutter para la web si espera que las extensiones del navegador interactúen con el sitio web.

Además, no uses Flutter para sitios web con mucho contenido.

Conclusión

Fue una revisión de habilidades que van desde el desarrollo web front-end hasta el uso de Flutter. También discutimos los conceptos de desarrollo de aplicaciones que necesita aprender como desarrollador web.

Flutter es más simple para los desarrolladores web, ya que ambos implican la implementación de interfaces de usuario. Si inicia Flutter, encontrará que le brinda una buena experiencia de desarrollador. ¡Prueba Flutter! Úselo para crear aplicaciones móviles y, por supuesto, muestre lo que crea.

¡Salud!

Si quieres conocer otros artículos parecidos a Flutter para desarrolladores web front-end | consejos CSS puedes visitar la categoría Estilo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas