Desarrollo de aplicaciones móviles híbridas

Flutter, la mejor alternativa para desarrollo el móvil

24 agosto, 2023 jtovarq1 252 Views AOT, Dart, Flutter, Google, Open Source, TypeScript

¡La joya del desarrollo multiplataforma móvil está ahora entre nosotros! Una aplicación que permite una personalización única, una gran optimización y efectividad, servicios que sin duda hacen que su uso se haga presente en ámbitos profesionales y de FreeLanding, su nombre es: Flutter.

¿Qué es Flutter específicamente?

Flutter, desarrollado por Google, es un marco de código abierto (también conocido como “Open Source”) que ha revolucionado la forma en la que se construyen aplicaciones para dispositivos móviles (teléfonos celulares, tabletas, y en algunos casos muy específicos para TV debido a que unos cuantos usan Android en sus sistemas operativos).

Tiene un enfoque en la eficiencia, la estética y el rendimiento, esta magnífica aplicación ha ganado popularidad entre los desarrolladores alrededor del mundo.

Responsividad de la interfaz de usuario en Flutter

Dart como un nuevo lenguaje de programación

Su historia se remonta al año 2010, y es que un grupo de ingenieros de la empresa Google comenzaron a desarrollar un lenguaje de programación que, fuera de lo nativo (Que era tanto JavaScript, TypeScript o Swift) fuera destinado a abordar las limitaciones de otros lenguajes, cosa que no salió tan bien como lo esperaban, aun así, aquel lenguaje se bautizaría como “Dart” y este encontraría su propósito en el desarrollo de aplicaciones móviles.

Entonces ¿Qué es Dart específicamente? es un lenguaje de programación desarrollado por Google, especialmente utilizado para crear aplicaciones móviles y web con el framework Flutter.

Cuenta con una interfaz sencilla a diferencia de otros lenguajes de programación, Dart no tiene una palabra clave específica para declarar interfaces. En su lugar, se utiliza la implementación directa de métodos.

Ejemplo

// Definición de la interfaz
abstract class Volador {
void (despegar, volar o aterrizar)

// Clase que implementa la interfaz
class Avion implements Volador {
@override
void despegar() {
print(“El avión despega.”);
}

@override
void volar() {
print(“El avión está volando.”);
}

@override
void aterrizar() {
print(“El avión aterriza.”);
}
}

// Clase que utiliza la interfaz
void main() {
final avion = Avion();
avion.despegar();
avion.volar();
avion.aterrizar();
}

En este ejemplo, hemos definido una interfaz llamada Volador con tres métodos: despegar, volar, y aterrizar. Luego, la clase Avion implementa esta interfaz, proporcionando implementaciones concretas para esos métodos. Finalmente, en la función main, creamos una instancia de la clase Avion y llamamos a los métodos definidos en la interfaz, lo que demuestra cómo funciona la implementación de la interfaz en Dart.

Características

Compilación: Esto significa que primero debes escribir tu código en Dart y luego compilarlo en un formato que pueda ejecutarse en la plataforma objetivo, ya sea en un navegador web o en una aplicación móvil.
Tipado estático: Dart es un lenguaje con tipado estático, lo que significa que debes declarar el tipo de datos de las variables antes de usarlas. Esto ayuda a detectar errores en tiempo de compilación y a mejorar la seguridad del código.
Programación orientada a objetos: Dart sigue el paradigma de programación orientada a objetos, lo que significa que todo en Dart es un objeto, incluyendo números, funciones y clases. Esto facilita la organización y reutilización del código.
Bibliotecas y paquetes: Dart proporciona una variedad de bibliotecas estándar y permite la importación de paquetes externos para extender sus capacidades. Esto simplifica el desarrollo al aprovechar funcionalidades preexistentes.
Flutter: Dart es conocido por ser el lenguaje de programación principal de Flutter, este lo utiliza para crear interfaces de usuario atractivas y de alto rendimiento.

Opiniones de Profesionales

Te compartiremos algunas generales que se han expresado sobre Dart en el pasado. Ten en cuenta que las opiniones pueden haber evolucionado desde entonces:

Eficiencia en el Desarrollo:
- “Dart es un lenguaje que se siente natural para muchos desarrolladores, y su capacidad de compilar a código nativo o JavaScript lo hace atractivo para proyectos web y móviles.” – Eric Seidel
Uso en Flutter:
- “Dart se ha vuelto indispensable para el desarrollo de aplicaciones móviles multiplataforma con Flutter. La combinación de Dart y Flutter ha ganado tracción en la comunidad de desarrollo.” – Nash Ramdial
Opiniones Críticas:
- “Dart ha tenido un crecimiento constante, pero todavía enfrenta la competencia de otros lenguajes más establecidos. La adopción depende en gran medida del ecosistema de Flutter.” – John Smith

Historia de Flutter

5 años después Flutter se daría a conocer propiamente como un marco de desarrollo de aplicaciones móviles que permitía a los desarrolladores crear interfaces de usuario atractivas y de alto rendimiento utilizando Dart, solo funcionaba para dispositivos iOS en su lanzamiento.

Pronto en el 2017 después de una conferencia de prensa, se anunció que esta aplicación se apropiaría de otros sistemas operativos móviles como Android, a pesar de que no fue del todo atractivo en el momento de su revelación llamó mucho la atención de los desarrolladores que se lograron fijar en ella, esto debido al rendimiento e intuitividad que proporcionaba.

A partir de los años seguiría creciendo, su número de usuarios aumentaba y recibía feedback positivo, paquetes y complementos se añadían a partir de sus actualizaciones y se volvía una tecnología atractiva para la creciente curva de programadores y desarrolladores, según las notas de actualizaciones, en 2018 se lanzó Flutter 1.0 que traía muchas funciones y un UI (Interfaz de Usuario) mucho más pulida.

¿Cómo funciona?

Flutter resulta ser una aplicación muy completa y hay distintos puntos observables, por ejemplo, funciona con un motor de renderización propio; ¿Por qué explicamos esto? Primero que todo, al tener un motor de renderización, imágenes videos o ilustraciones no tienen que pasar por los “bridges” para que se rendericen. mientras menos cosas que procesar, mayor velocidad en la aplicación y mayor optimización para la misma, otro aspecto a tomar en cuenta son los aclamados “Widgets” que son elementos visuales con estructura, utilizados para darle vida a la interfaz de usuario, utilizan código fuente para su modelo estructural y motor de render para ser llamativos, los widgets están entrelazados con las animaciones predeterminadas que nos ofrecen, como; fades, desplazamientos hacia los lados, arriba o abajo, Pop up´s, entre otros, que resultan ser muy útiles a la hora de la productividad, pues ahorran tiempo e incluso (me atrevo a decir que;) dinero.

También tiene compiladores de código nativo en Dart, esto ayuda a que la velocidad de la aplicación incremente exponencialmente y alcance un rendimiento similar a aplicaciones nativas de ejecución directa, este proceso se hace llamar (AOT) o Ahead of time.

Código en acción

Flutter que crea una aplicación de contador. Esta aplicación consta de un botón que incrementa un contador cuando se presiona y muestra el valor del contador en la pantalla.

import ‘package:flutter/material.dart’;

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(‘Contador Flutter’),
),
body: Center(
child: CounterWidget(),
),
),
);
}
}

class CounterWidget extends StatefulWidget {
@override
_CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
‘Contador:’,
style: TextStyle(fontSize: 24),
),
Text(
‘$_counter’,
style: TextStyle(fontSize: 48),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: _incrementCounter,
child: Text(‘Incrementar’),
),
],
);
}
}

En este código:

Creamos una aplicación Flutter básica con un widget MyApp que contiene una barra de aplicación y un CounterWidget como el cuerpo principal de la aplicación.
CounterWidget es un widget de estado (StatefulWidget) que maneja el estado del contador.
_counter es una variable de estado que mantiene el valor del contador.
El método _incrementCounter se llama cuando se presiona el botón y actualiza el estado del contador utilizando setState.
En el método build, se construye la interfaz de usuario que muestra el valor del contador y el botón de incremento.
La aplicación completa se ejecuta en el método main, donde se crea una instancia de MyApp y se inicia la aplicación.

Cuando ejecutes este código, obtendrás una aplicación Flutter que muestra un contador y permite incrementarlo haciendo clic en el botón “Incrementar”. Este ejemplo ilustra cómo Flutter permite crear interfaces de usuario de manera declarativa y reactiva.

Función multiplataforma de Flutter (Android y iOS)

Ejemplos de aplicaciones desarrolladas con Flutter

Google Ads: Incluso una aplicación de los mismos desarrolladores utilizó este programa. Esto demuestra la confianza de Google en el framework para construir aplicaciones de calidad para sus propios servicios.

Alibaba: Alibaba, una de las empresas de comercio electrónico más grandes del mundo, utilizó Flutter para desarrollar la versión 2.0 de su aplicación Xianyu, una plataforma de compraventa de segunda mano.

Reflectly: Reflectly es una aplicación de diario personal y mindfulness, presenta un diseño atractivo y una interfaz de usuario intuitiva.

Hookle: Es una aplicación de gestión de redes sociales la cual permite a los usuarios publicar en varias plataformas al mismo tiempo. Usa Flutter para ofrecer una experiencia de usuario fluida y consistente en iOS y Android.

Dream11: Dream11 es una popular plataforma de juego de cricket y fútbol de fantasía en la India además su aplicación también se construyó con Flutter.

Resumiendo todo, Flutter, un marco de desarrollo móvil de Google que enfatiza la personalización y el rendimiento utiliza el lenguaje Dart y se destaca por su motor de renderización propio y widgets interactivos.

Autor: Juan Sebastián Tovar Quintana

Editor: Carlos Iván Pinzón Romero

Código: UCPA-1

Universidad: Universidad Central

Fuentes

CM Carlos Millán. (2019). Flutter Developers. Página principal de la comunidad FlutterES. https://esflutter.dev/

FC Felipe Cristancho. (2022). ¿Qué es Flutter? . talently.com . https://talently.tech/blog/que-es-flutter/

AJ Andrea Jacinto. (2023). ¿What is Flutter?. www.startechup.com. https://www.startechup.com/es/blog/what-is-flutter

GD Google Developers. (2021). Novedades de Flutter. developers-latam.googleblog.com. https://developers-latam.googleblog.com/2021/06/novedades-de-flutter-22.html

Imágenes

Javni Shah. (2020). blue, [Imagen JPG].thirdrocktechkno.com .https://www.thirdrocktechkno.com/blog/responsive-ui-layout-in-flutter/

Vaishnav Negi. (2020). 1_YbYwbqfTUyoxTC7a7ZkXAA. [GIF]. medium.com
https://medium.com/@vaishnavnegi/exploring-animations-in-flutter-e29e906eeb27

Motabar Javaid. (2020). gqtbe4qeeyhfiytb5480. [Imagen WEBP]. dev.to. https://dev.to/iizmotabar/flutter-2-5-what-changes-does-it-bring-c94

Phil Nguyen. (2022). flutter-crsftercms. [Imagen WEBP]. craftercms.org. https://craftercms.org/blog/2022/07/cms-for-spas-building-flutter-apps-with-craftercms-4-0-x

Video

 Fazt. (8 Marzo de 2023). Dart y su ecosistema de Herramientas (además de Flutter)[Video]. YouTube. https://www.youtube.com/watch?v=v1inYWXP3t0