Advertisement
  1. Code
  2. Flutter

4 widgets de Flutter gratuitos que debes conocer

Spanish (Español) translation by Carlos (you can also view the original English article)

El desarrollo con Flutter ha experimentado un crecimiento sin precedentes durante el último año. No solamente se ha expandido como un canal para que los desarrolladores amplíen sus habilidades en Dart, sino que también les ha permitido disfrutar de las ventajas de una única base de código. Si estás creando un widget en Flutter o si estás buscando un widget que pueda hacer la diferencia en tu aplicación, ¡has llegado a la página correcta!

2020 fue el año del desarrollo de aplicaciones móviles. El año que permitió a las personas ejecutar algunas de las mejores ideas que quizá tenían, mientras que algunos desarrolladores decidieron explorar nuevas vías para expandir sus habilidades. En este ambiente de cambio, Flutter fue una distracción bienvenida.

Google creó el framework de UI (interfaz de usuario) gratuito y de código abierto, siendo una solución conveniente para muchos problemas que pudiera tener un desarrollador. Lanzado en 2017, Flutter es un framework relativamente nuevo que ha ido ganando una cantidad constante de estudiantes debido a sus soluciones económicas.

No solo es gratuito, sino que también ahorra el tiempo que generalmente se invierte al escribir dos bases de código diferentes para Android e iOS.

¿Qué hace que Flutter sea diferente?

Antes todo, Flutter es un kit de desarrollo de software (SDK, por sus siglas en inglés) que está basado en código de máquina nativo. Este SDK hace que el desarrollo de la interfaz de usuario sea sencillo y fluido. Flutter también ofrece una colección de bibliotecas de IU basadas en widgets para elementos reutilizables como entradas de texto, botones, sliders y cualquier otro widget que puedas necesitar.

Flutter también incluye el lenguaje de programación Dart, creado por Google en 2011 y perfeccionado a lo largo de los años. Dart es un lenguaje de programación tipado orientado a objetos. No requiere experiencia con ningún otro lenguaje de programación, aunque su sintaxis es cercana a JavaScript.

4 widgets de Flutter gratuitos que debes conocer

Aplicaciones como KlasterMe y Square han sido creadas en Flutter debido a las ventajas de poder compartir una base de código para aplicaciones en Android e iOS. Sin embargo, ya que la plataforma es tan nueva, puede ser difícil encontrar recursos para los desarrolladores. Pensando en ello, he recopilado algunos de los mejores widgets de Flutter.

Estos son los cuatro widgets principales que hacen de Flutter una opción ideal para el desarrollo de aplicaciones móviles. He incluido un widget para cada aspecto de la interfaz de usuario y espero que te ayude a llenar algunos de los vacíos del código.

Widget SafeArea

En pocas palabras, el Widget SafeArea informa a tu scaffold sobre el espacio más seguro para establecer los elementos como textos, colores, gráficos visuales, etc.

Este widget de Flutter es una red de seguridad para las dimensiones de la pantalla de una aplicación. Puesto que las pantallas ya no son rectángulos planos, el widget SafeArea te ayuda a tratar todas las curvas y bordes en la pantalla de la aplicación que no son visibles en las orillas.

Permite que tu scaffold permanezca limitado a las dimensiones donde se ven los elementos, en vez de esparcir elementos visuales por todas partes. Mientras que otras plataformas imponen a los desarrolladores a crear un nuevo contenedor para tales especificaciones, ¡Flutter ya ofrece este widget en un paquete listo para usar!

Flutter SafeArea WidgetFlutter SafeArea WidgetFlutter SafeArea Widget

Así es como se escribe:

Widget Wrap

Este widget de Flutter simplifica el proceso de localizar botones en la pantalla de tu aplicación.

Cuando tienes tres botones en una pantalla vertical y necesitas añadir un cuarto, el diseño de tu aplicación probablemente mostrará un error de espacio e indicará que no puede colocar ningún otro botón ahí.

No obstante, si añades el widget Wrap, el espacio acomodará automáticamente el control en el eje horizontal o vertical, como se especifica. Esta herramienta de alineación funciona idealmente para chips y botones de diálogo.

Aquí hay una representación visual de los botones alineados verticalmente:

Wrap Widget vertical alignmentWrap Widget vertical alignmentWrap Widget vertical alignment

Y así es como se escribe esta alineación:

Si quieres alinear los botones horizontalmente, se cambia  direction a Axis.horizontal en el código anteriormente mencionado y se vería de esta manera:

Wrap Widget horizontal alignmentWrap Widget horizontal alignmentWrap Widget horizontal alignment

Widget RichText

En síntesis, el widget RichText te ayuda a personalizar tu texto, y si estás desarrollando una aplicación, debes conocer lo útil que podría ser este widget de Flutter.

Ya que la lectura es una parte esencial del uso de una aplicación, la tipografía desempeña un papel fundamental en la visibilidad y la interacción con el contenido de la aplicación. Tradicionalmente, un widget de texto sería suficiente para todas las necesidades de la aplicación, como estilos, fuentes y tamaños.

Cuando necesites personalizar un bloque de texto dentro de una  fracción de texto más significativa, ¡RichText es tu recurso!

El widget RichText funciona con árboles TextSpan para formar una jerarquía de texto que te ayuda a priorizar palabras y frases que necesiten ser resaltadas en la aplicación. Ya sea que desees utilizar texto en negrita para un nodo o cambiar su color, este widget puede ayudarte a lograrlo. El reconocimiento de gestos y la alineación de la línea de base también se envuelven en este widget de Flutter.

Flutter RichText WidgetFlutter RichText WidgetFlutter RichText Widget

Cuando divides el texto en varios TextSpans, puedes personalizar cada etiqueta por separado de esta forma.

Dado que las aplicaciones son un medio visual, puedes redirigir fácilmente la atención del usuario a las cosas que importan.

En pocas palabras, el widget RichText te permite usar varios estilos en una sola frase. Esta herramienta puede aportar valor a la estética de tu aplicación debido a su importante rol en la tipografía.

Widget Hero

Las transiciones de hero se consideran una práctica común de IU en el desarrollo de Flutter. Se usan para indicar un cambio de pantallas en la aplicación mientras el frente y el centro de la interacción permanecen enfocados.

El widget marca a su elemento child como capaz de realizar animaciones hero, pues el contenido de una pantalla es reemplazado cuando aparece una nueva ruta de página. Los elementos de la página «vuelan» en el navegador a medida que las pantallas están en transición.

Dichas transiciones de la superposición deben estar envueltas en un widget Hero en Flutter. Estas navegaciones encuentran sus rutas mediante HeroController. Técnicamente, cada par de transiciones con la misma etiqueta activa una animación hero.

Cuando las animaciones hero ya están en proceso, las animaciones de vuelo se dirigen directamente al nuevo destino. La transición en vuelo toma así la ruta del elemento child de Hero. Para activar una navegación hero, debe existir en el primer fotograma de la animación en la nueva página.

Veamos una imagen en la parte lateral de la pantalla:

Fluttter Hero WidgetFluttter Hero WidgetFluttter Hero Widget

Ahora digamos que queremos que haga la transición al centro con la animación así:

Hero Widget center alignmentHero Widget center alignmentHero Widget center alignment

Con este código lograrías la acción completa:

Reflexiones finales

Flutter ayuda a simplificar los procesos de escritura de código al ofrecer rutas alternativas para cada práctica tradicional que carecía de simplicidad en el pasado. Los widgets de Flutter son una de esas herramientas que ayudan a simplificar y mejorar el proceso. Ya sea que se quiera colocar fácilmente un botón en una aplicación o de una simple transición entre pantallas, estos cuatro widgets son los primeros de muchos que se pueden analizar y usar para crear experiencias brillantes para el usuario final sin agotar al desarrollador en absoluto.

Si estás empezando a desarrollar aplicaciones en Flutter, este artículo te dará una idea sobre el desarrollo de aplicaciones con este framework.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.