Los de­sa­rro­lla­do­res de software lo saben: ya no basta con de­sa­rro­llar un programa solo para Windows. Hoy en día, si quieres que tu programa sea un éxito, también tiene que funcionar en di­s­po­si­ti­vos Android y iOS, así como en na­ve­ga­do­res.

Para conseguir este resultado, antes había que adaptar y compilar el código para cada una de estas pla­ta­fo­r­mas. A veces, incluso hacían falta cambios más im­po­r­ta­n­tes para tener en cuenta las pa­r­ti­cu­la­ri­da­des de cada sistema operativo y aplicar el diseño y la fu­n­cio­na­li­dad de las in­te­r­fa­ces de usuario conocidas en la propia apli­ca­ción. Flutter si­m­pli­fi­ca el de­sa­rro­llo para varias pla­ta­fo­r­mas ya que se usa la misma base de código para todas ellas.

¿Qué es Flutter?

Flutter es un framework para de­sa­rro­llar apli­ca­cio­nes para di­fe­re­n­tes pla­ta­fo­r­mas elaborado por Google y publicado por primera vez como proyecto de código abierto a finales de 2018. Este kit de de­sa­rro­llo ofrece un gran número de bi­blio­te­cas para elementos estándar de la interfaz de usuario de Android y iOS, pero también sirve para de­sa­rro­llar apli­ca­cio­nes web de es­cri­to­rio. Las apli­ca­cio­nes de­sa­rro­lla­das con Flutter tienen el aspecto normal de las apli­ca­cio­nes en cada sistema y se comportan como se espera de ellas en todos ellos sin que los pro­gra­ma­do­res tengan que prestar atención a las pa­r­ti­cu­la­ri­da­des de cada sistema.

¿Para qué se usa Flutter?

Flutter se usa pri­n­ci­pa­l­me­n­te para de­sa­rro­llar apli­ca­cio­nes de Android y iOS sin necesidad de escribir un código base propio para cada uno de estos sistemas, co­m­ple­ta­me­n­te di­fe­re­n­tes entre sí. En este contexto, las apli­ca­cio­nes móviles se ejecutan como au­té­n­ti­cas apli­ca­cio­nes nativas en los di­s­po­si­ti­vos. Antes de su pu­bli­ca­ción, se compilan para la pla­ta­fo­r­ma co­rre­s­po­n­die­n­te, de manera que no necesitan un módulo runtime ni un navegador. Sobre la misma base de código, se pueden crear apli­ca­cio­nes web para na­ve­ga­do­res y programas nativos para Windows, Linux y macOS.

Google usa Flutter, por ejemplo, para distintos módulos de Google Assistant y la interfaz de usuario de Google Home Hub. También hay distintos pro­vee­do­res de eCommerce, como eBay, Groupon o el Alibaba Group, que usan Flutter para que sus apli­ca­cio­nes web y móviles tengan un aspecto y carácter uniformes.

¿Qué lenguaje de pro­gra­ma­ción usa Flutter?

El SDK (kit de de­sa­rro­llo de software) de Flutter se basa en el lenguaje de pro­gra­ma­ción Dart, también de­sa­rro­lla­do por Google con el fin de co­n­ve­r­ti­r­se en un sucesor del clásico Ja­va­S­cri­pt que, igual que este, se ejecuta di­re­c­ta­me­n­te en el navegador. En un servidor, los programas Dart se pueden ejecutar de forma directa; en un navegador, se ejecutan en Ja­va­S­cri­pt mediante el tra­n­s­co­m­pi­la­dor Dart2js. Las apli­ca­cio­nes para la nueva pla­ta­fo­r­ma Fucsia de Google se de­sa­rro­llan con Dart, un lenguaje que a nivel es­tru­c­tu­ral se parece mucho a los lenguajes orie­n­ta­dos a objetos como Java o C#.

Consejo

En nuestro detallado tutorial sobre pro­gra­ma­ción Dart te ex­pli­ca­mos cómo se programa con el lenguaje de Google.

Todo es un widget: el principio básico de Flutter

La es­tra­te­gia de Flutter, todo es un widget, sigue las bases de la pro­gra­ma­ción orientada a objetos hasta la interfaz de usuario: la interfaz del programa consta de di­fe­re­n­tes widgets que pueden estar anidados entre ellos. Cada botón y texto mostrado es un widget. Estos cuentan con di­fe­re­n­tes pro­pie­da­des que se pueden modificar.

Pueden in­ter­ac­tuar entre sí y reac­cio­nar a cambios de estado externos mediante sus funciones in­te­gra­das. Todos los elementos im­po­r­ta­n­tes de la interfaz de usuario incluyen widgets que se co­rre­s­po­n­den con los diseños de Android y iOS o las apli­ca­cio­nes web co­n­ve­n­cio­na­les. Si se desea, estos widgets se pueden ampliar con funciones adi­cio­na­les o se pueden crear widgets propios que se pueden combinar fá­ci­l­me­n­te con los ya exi­s­te­n­tes.

En co­m­pa­ra­ción con otros SDK, los widgets ofrecen una mayor fle­xi­bi­li­dad, pero cuentan con la de­s­ve­n­ta­ja de que forman parte del código fuente del programa, por lo que el código queda muy anidado y puede resultar confuso.

Flutter: ejemplos sencillos

Para facilitar el arranque, los de­sa­rro­lla­do­res aportan numerosos ejemplos de Flutter. Un proyecto tan simple como “Hola mundo” ya permite observar la es­tru­c­tu­ra básica de un programa con un widget y una sencilla función void Main() que inicia el programa.

// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'package:Flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
		return MaterialApp(
			title: 'Welcome to Flutter',
			home: Scaffold(
			appBar: AppBar(
				title: Text('Welcome to Flutter'),
			),
			body: Center(
				child: Text('Hello World'),
			),
	),
		);
	}
}

En un sma­r­t­pho­ne o una si­mu­la­ción, el programa muestra, en la parte superior, la barra de título “Welcome to Flutter” del elemento AppBar() del widget. En el espacio de pantalla vacío que hay debajo y que en Flutter se denomina como body, aparece, en este caso, el texto “Hello World” en posición centrada.

Imagen: Aplicación “Hello World” con Flutter
Un programa “Hello World” sencillo en Flutter

Otros ejemplos in­ter­ac­ti­vos muestran las apli­ca­cio­nes de Flutter en el navegador junto con el código fuente Dart. Cuando se modifica, se puede observar el efecto en la apli­ca­ción en directo.

Imagen: Ejemplo de Flutter en el navegador
Programas de prueba sencillos con Flutter en el navegador

Flutter Gallery muestra el uso de distintos tipos de widgets estándar mediante algunas apli­ca­cio­nes de ejemplo. Las ca­te­go­rías de los elementos para las in­te­r­fa­ces de usuario evitan co­n­s­cie­n­te­me­n­te, tal y como estamos aco­s­tu­m­bra­dos en los proyectos de código abierto, los nombres co­me­r­cia­les de Android y iOS y, en su lugar, usan las de­no­mi­na­cio­nes “Material” (de acuerdo con el lenguaje de diseño de Google) y “Cupertino” (por la sede co­r­po­ra­ti­va de Apple).

Imagen: Flutter Gallery: vista general
Flutter Gallery con ejemplos para el uso de elementos de interfaz de usuario
Consejo

En GitHub el equipo de Flutter reúne numerosas apli­ca­cio­nes de de­sa­rro­lla­do­res y tu­to­ria­les para facilitar la in­tro­du­c­ción a la pro­gra­ma­ción con Flutter.

¿Qué hace falta para programar con Flutter?

Todas las bi­blio­te­cas y he­rra­mie­n­tas de líneas de comando im­po­r­ta­n­tes para el de­sa­rro­llo de software están en el SDK Flutter, el kit de de­sa­rro­llo de software que se puede descargar gra­tui­ta­me­n­te en la página web oficial.

Aunque no dispone de un entorno gráfico de de­sa­rro­llo integrado propio, para escribir el código fuente puedes usar cualquier editor de texto. Google re­co­mie­n­da instalar Android Studio para que la pro­gra­ma­ción sea más cómoda. Flutter pro­po­r­cio­na plugins para Android Studio para integrar las bi­blio­te­cas de manera más sencilla y permitir la sintaxis resaltada en el editor. También existen plugins para la pla­ta­fo­r­ma de de­sa­rro­llo de Microsoft, Visual Studio Code.

Nota

Puedes consultar más in­fo­r­ma­ción sobre la in­s­ta­la­ción y pro­gra­ma­ción con Flutter en nuestro tutorial de Flutter.

Ventajas y de­s­ve­n­ta­jas de Flutter

Cada SDK y lenguaje de pro­gra­ma­ción tiene sus ventajas y sus in­co­n­ve­nie­n­tes. Pero, haciendo balance, se podría decir que las ventajas de Flutter frente a otros sistemas parecidos pesan mucho más que las de­s­ve­n­ta­jas.

Ventajas de Flutter

  • Una única base de código para las pri­n­ci­pa­les pla­ta­fo­r­mas de destino.
  • Lenguaje de pro­gra­ma­ción Dart fácil de aprender.
  • El paradigma todo es un widget ofrece numerosas po­si­bi­li­da­des.
  • Ejecución potente de las apli­ca­cio­nes nativas en los sma­r­t­pho­nes.
  • Bi­blio­te­cas amplias con elementos de interfaz gráfica pre­fa­bri­ca­dos.
  • Im­ple­me­n­ta­ción sencilla de flujos de datos para pro­po­r­cio­nar in­fo­r­ma­ción actual a todos los usuarios.
  • Hot Reload acelera las pruebas durante el de­sa­rro­llo.

De­s­ve­n­ta­jas de Flutter

  • El código del programa puede volverse confuso al integrar los widgets.
  • En caso de ac­tua­li­zar aspectos del diseño en los sistemas ope­ra­ti­vos, hay que ac­tua­li­zar los módulos Flutter. Como los módulos se integran en el programa de manera fija, también hay que compilar el programa e in­s­ta­lar­lo en los di­s­po­si­ti­vos.
  • Todavía es un lenguaje nuevo y poco extendido, cuenta con una comunidad reducida.
Ir al menú principal