Llevamos tiempo viviendo con frameworks para el desarrollo mobile como React Native, Nativescript o incluso Ionic. Estos frameworks han conseguido abaratar costes en el desarrollo de apps al tener una app para iOS y otra para Android con prácticamente el mismo código, por otro lado, desarrolladores de Javascript se han podido reciclar y pasarse al desarrollo móvil sin necesidad de tener grandes conocimientos sobre el desarrollo nativo en móvil.
Por supuesto, Google no ha querido quedarse atrás y para ello han creado Flutter. El propio Google describe Flutter como el SDK para aplicaciones nativas que te permite crear interfaces de alta calidad en un tiempo récord.
Primeros pasos con Flutter
Flutter usa Dart otro lenguaje creado por Google que, recientemente, ha sacado su versión 2.0 para mejorar la versión anterior e intentar darle la popularidad que no obtuvieron con la versión 1.0 del lenguaje. Dicho esto, puede parecer que Dart no sea una buena opción, pero la realidad es que no tiene una curva de aprendizaje muy difícil y si sabes algo de Java y/o Javascript no vas a necesitar más que un par de días para empezar a sentirte cómodo con el lenguaje, y, si a eso le sumas la posibilidad de desarrollar para web, móvil o línea de comandos, hace que este lenguaje sea bastante interesante.
Flutter nos proporciona la posibilidad de aplicar los estilos de Material y de Cupertino en nuestra app, lo que nos da la posibilidad de obtener una aplicación con estilo Material, en el caso de Android, y una aplicación para iOS con los estilos propios de Cupertino.
Instalación
Para empezar a usar Flutter lo primero que tenemos que hacer es abrir nuestra terminal y situarnos en la carpeta donde queramos tener nuestro SDK, para después, clonar el repositorio oficial con el siguiente comando:
$ git clone https://github.com/flutter/flutter.git
Para poder usar la herramienta de la línea de comandos debemos exportar el path a nuestro SDK:
$ export PATH=`pwd`/flutter/bin:$PATH
Una vez hecho esto ya podemos usar el comando ‘flutter’ en la línea de comandos y el siguiente paso sería:
$ flutter doctor
Este comando lo que hace es analizar nuestra instalación de Flutter y nos ayudará a finalizar nuestra instalación con éxito.
Cómo crear nuestra primera app con Flutter
Para crear una app tenemos que ejecutar el comando:
$ flutter create <nombreDeNuestraApp>
Una vez la tengamos creada, abrimos la carpeta que se acaba de crear con el nombre de nuestra app con nuestro IDE. Flutter en su web oficial especifica dos IDE para programar nuestra app, Visual Studio Code y Android Studio, ambos IDEs tienen un plugin para trabajar con Flutter que hacen bastante sencillo el desarrollo.
Al abrir nuestro proyecto veremos que tenemos varias carpetas pero, ahora mismo, sólo nos interesa la carpeta lib, que es donde está el código Dart de nuestra app.
Si abrimos el archivo main.dart de la carpeta lib y sustituimos el código ahí presente por este:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'JustCodeIt',
home: Scaffold(
appBar: AppBar(
title: Text('JustCodeIt'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
}
A continuación ejecutamos en nuestra terminal el siguiente comando para lanzar nuestra aplicación:
Se abrirá nuestro simulador de iOS o Android y podremos ver cómo sólo con esas líneas de código tenemos nuestra aplicación Material con un appBar y nuestro texto centrado.
Conclusión
Como hemos podido ver en este ejemplo, tras dar nuestros primeros pasos con Flutter, vemos que nos proporciona una manera sencilla de desarrollar apps nativas móviles pudiendo aplicar estilos de manera muy simple. Cabe destacar la facilidad con la que puedes usar código nativo en tus aplicaciones gracias a los Channels y, que al ser un producto de Google, está bastante bien mantenido y hay muchos plugins para integrar nuestra app con Firebase y todo lo que este servicio nos proporciona.
Para finalizar, decir que Flutter todavía está en beta pero es bastante estable y está recibiendo bastante apoyo de la comunidad impulsado por Google, prueba de ello son las 36.922 estrellas que tiene actualmente el proyecto en Github, casi la mitad de las que tiene un framework consolidado como React Native y superando con bastante margen a otro framework como es Nativescript.
“Full stack developer reconvertido a data scientist. Instructor en Bootcamp Desarrollo Web de KeepCoding y alumno en mis ratos libres. Tengo una gran afición por iOS y por Kaggle que me hace perder alguna hora de sueño. ”
Si tienes algo que deseas compartir o quieres formar parte de KeepCoding, escríbenos a [email protected]
