Flutter I: Instalación e Introducción — [ Flutter 1.0]

5 min readAug 30, 2016

Flutter es una nueva herramienta que nos ofrece Google para poder construir aplicaciones que se puedan ejecutar en distintas plataformas, como Android o iOS, con un solo código base. Hoy día se encuentra en la versión alpha:0.0.20, una versión muy temprana pero que ya nos permite construir interfaces complejas, peticiones a la red e incluso trabajar con ficheros.

Actualizado a Flutter 1.0 — Diciembre 2018

Índice

Flutter no funciona como otros frameworks multi-plataforma como puede ser Cordova. A diferencia de Cordova, Flutter no se ejecuta sobre un WebView ejecutando HTML, CSS y Javascript. Flutter utiliza solo Dart como lenguaje de programación, un lenguaje bastante sencillo de aprender y si es el caso y sabes Java puedes aprender el ~75% de Dart en uno o dos días.

Pero nuestra app no ejecutará el código en Dart sino que cuando compilamos nuestra app en modo release se compila a código nativo por lo que obtenemos un mayor rendimiento y una mejor respuesta de la interfaz de usuario. Si estamos en modo debug para poder comprobar posibles errores en la fase de desarrollo Flutter realiza varias comprobaciones, comprobaciones que pueden hacer que la app pueda ir un poco más lenta. Si estamos en esta situación Flutter nos lo indica con una cinta en la esquina superior derecha de nuestra app con el texto “Debug”.

¿Por qué aprender/usar Flutter?

Flutter no solo nos permite crear apps para Android e iOS con un solo proyecto sino que además se necesita muy poco código para realizar cosas en comparación si la hiciéramos en nativo en Android o iOS. Otra ventaja es que está orientado a Material Design ofreciéndonos muchas de las sus especificaciones.

Incluso Google está utilizando Flutter para crear el System UI de su nuevo sistema operativo Fuchsia, como podemos ver en su propio repo.

Instalación

La forma más rápida y actualizada de hacer la instalación la encontrarás en la propia web de Flutter https://flutter.io/docs/get-started/install.

Para trabajar con Flutter puedes usar múltiples opciones como IntelliJ o VS Code. En caso de no tener IntelliJ instalado os recomiendo usar el plugin de Flutter de VS Code al ser más ligero, bastante completo y la forma más rápida de iniciarnos en Flutter.

Primeros Pasos (App, ¡Hola Mundo!)

Veamos ahora cómo crear un nuevo proyecto y algunos ejemplos sencillos de cómo funciona Flutter, en los sucesivos post iremos viendo cosas más complejas.

Para crear un proyecto vamos en VS Code podemos abrir la paleta de comandos y selecionar Flutter: New Project . Al crear el proyecto nos crea un archivo dentro de la carpeta lib llamado main.dart, lo abrimos y para empezar borramos todo su contenido.

En Dart el código se inicia desde una función llamada main la cual debemos crear dentro de este archivo main.dart

void main() { }

Ahora necesitamos importar la librería Material de dart que nos proporciona una función para lanzar una app.

import ‘package:flutter/material.dart’;

Esta función se llama runApp y debemos pasarle un widget, un widget para hacernos una idea es parecido a un View en Android o en iOS con algunos detalles que lo diferencian. En Flutter toda la parte de UI se construyen a base de Widgets y se hace todo en Dart y no como en Android que las vistas las declaramos mayormente en un xml.

Para un primer ejemplo podemos utilizar el widget Text que es el que debemos utilizar si queremos mostrar texto en una app.

Ahora podremos ejecutar la app, desde VS Code presionas F5 y esto nos lanzará la aplicación en el emulador activo o en dispositivo un dispositivo conectado.

Al lanzar la app obtenemos este resultado, como vemos el texto se pone justo donde está el status bar porqué es donde una app en Flutter tiene su punto [0, 0]

Por ejemplo, añadamos un poco de padding a la parte superior de nuestro texto para que no se vea encima del status bar. Como hemos comentado la UI en Flutter se hace mediante widgets y el padding es otro widget. Esto es posible que os llame la atención si estáis acostumbrados a Android o a iOS en donde el padding es un atributo más de una vista. En Flutter no es así, en Flutter lo que tenemos que hacer para añadir un padding a un widget es poner dentro de un widget Padding nuestro widget, en nuestro ejemplo quedaría de la siguiente forma.

Hemos creado un widget Padding, este tiene un atributo padding al cual le pasamos un EdgeInsets con un valor para el el padding top de 24 y como hijo del padding le hemos puesto nuestro texto, si lo ejecutamos veremos como ahora nuestro texto aparece más abajo.

Nota: Si vienes de Java aunque no lo parezca esta instrucción const EdgeInsets.only(top: 24.0) es la llamada a un constructor de EdgeInsets llamado only y devuelve una instancia que es una constante en tiempo de compilación. Esta en una diferencia de Dart con respecto a Java, aquí puedes encontrar más información acerca de constructores en Dart

Si quisiéramos centrar el texto en la pantalla tenemos al igual que el padding un widget específico, Center. Center nos centra el widget y para centrar el texto dentro del widget Text usamos el atributo textAlign con TextAlign.center.

Si os habéis fijado existe una similitud entre el Center y el Padding y es que ambos tiene el child, esto es una de las cosas que hace tan potente a Flutter. Cada widget tiene su propio child que nos permite encadenar widgets, por ejemplo, tener un Text dentro de un Padding dentro de un Center.

Conclusión

En este primer post sobre Flutter hemos visto lo fácil que es crear una app y mostrar un texto apenas con unas pocas líneas de código. En los sucesivos posts sobre Flutter iremos aumentando la complejidad de nuestras interfaces y en donde podréis comprobar lo simple comparado con Android o iOs que son implementarlas.