Una buena forma de aprender una nueva tecnología es hacer un pequeño programa que muestre el texto «hola mundo». Vamos a ver cómo hacerlo con Flutter.
¿Qué es eso de «hola mundo»? si eres programador no te estoy contando nada nuevo, pero si estas empezando en el mundillo del software, lo típico cuando aprendemos un nuevo lenguaje o tecnología es crear un primer programa muy sencillo que simplemente sea capaz de pintar esas dos palabras. Las puede pintar por consola, por pantalla… depende de la tecnología que estemos probando. Es una forma de empezar a crear un primer proyecto.
En el caso Flutter, tenemos una tecnología para hacer apps, así que lo más lógico sería crear una primera app muy básica que muestre el texto por pantalla. Vamos a hacer eso, pero creo que primero podemos comenzar con otro «hola mundo» aún más básico.
Flutter utiliza el lenguaje de programación «Dart», un lenguaje muy interesante pero muy poco conocido a día de hoy. Si este es tu primer programa con Flutter lo más probable es que también sea tu primer programa con Dart, así que antes de pintar nada en pantalla usando las herramientas gráficas que nos proporciona flutter, pintaremos un texto por consola utilizando Dart, puro y duro.
Crear el proyecto
Lo primero que debemos hacer es crear un nuevo proyecto de Flutter con nuestro IDE preferido. En mi caso utilizo Android Studio.
¿No te aparece la opción de Flutter en tu Android Studio?, ¿no tienes Flutter instalado en tu equipo? Antes de seguir deberías instalar Flutter y el plugin de Android Studio correspondiente (o de tu IDE preferido). Está todo muy bien explicado en la página de Flutter, así que creo que no aporto nada nuevo si lo explico también por aquí, pero si tienes cualquier duda pregunta por si te puedo echar una mano.
En el siguiente paso seleccionamos «Flutter Application».
En el siguiente paso nos piden algunos datos. Por un lado el nombre del proyecto, que yo he llamado «flutter_hello_world» pero que tú puedes llamar como quieras. Por otro lado nos pide que indiquemos la localización del SDK de Flutter, si no hay ningún problema, esta localización debería estar completada por defecto y no haría falta que cambies nada. También nos pide dónde queremos alojar el proyecto y una breve descripción del mismo.
Por último tenemos un cuarto paso donde nos preguntan por nuestro dominio. Esto se usa en ocasiones como nombre raíz de los paquetes de nuestro proyecto, de esta forma la estructura de paquetes es única y diferente de otros proyectos. De momento esto no es importante, si no tienes dominio o no tienes claro bajo qué dominio quieres programar este tipo de aplicaciones, da igual, de momento estamos haciendo ejercicios así que puedes poner algo así como «example.org».
También nos preguntan si queremos incluir soporte para Kotlin o Swift, de momento no lo necesitamos.
¡Ya tenemos nuestro proyecto creado y listo para empezar a programar! Dentro de la carpeta lib, hay un fichero llamado main.dart que es donde escribiremos nuestro código. Por defecto encontramos un código de ejemplo, lo borramos para empezar desde cero con nuestro pequeño programa de «hola mundo».
¡Hola mundo Dart!
Sobre el fichero en blanco lo primero que tenemos que hacer es escribir una función main, es una función especial de dart que será lo primero que ejecute el programa. Un programa en Dart siempre buscará la función main para saber por donde tiene que empezar. Todas las aplicaciones deben tener una función main.
En este caso vamos a usar la función main para que nuestro programa imprima por consola el texto «Hola mundo», usando para ello la función print de Dart.
2
3
print('Hola mundo');
}
Si ejecutamos el programa no veremos nada parecido a una aplicación en nuestro teléfono o emulador, pero si nos fijamos en la consola veremos que efectivamente el texto se está imprimiendo:
Ahí lo tenemos, nuestro primer hola mundo con Dart.
¡Hola mundo Flutter!
Ahora vamos a hacer algo un poco más interesante, vamos a mostrar el texto en la pantalla de nuestro móvil.
Lo primero que debes saber para comenzar a crear la App es que en Flutter todos los elementos que vamos a mostrar en la pantalla son widgets. Incluso la propia pantalla entera también será un widget.
Lo segundo que debes saber es que para «arrancar» la aplicación y que se empiecen a mostrar widgets debemos llamar a la función»runApp». A esta función le pasaremos la pantalla que queremos mostrar como parámetro, es decir, le pasaremos un widget.
2
3
4
5
6
print('Hola mundo');
}
class MyApp extends StatelessWidget {
}
Para que se ejecute la función runApp, la hemos puesto en el método main, así se ejecutará al arrancar nuestra aplicación, igual que ha pasado antes con nuestro primer «Hola mundo».
Hemos creado una clase llamada «MyApp» y hacemos que sea un widget heredando de la clase StatelessWidget (existen varios tipos de widget, pero eso lo dejamos para otro día)
Si intentamos ejecutar esto tendremos algunos errores. El primero de ellos es que tenemos que importar una librería para que nuestra aplicación entienda tanto la función runApp como la clase StatelessWidget, así que añadimos la librería de flutter «material.dart»:
2
3
4
5
6
7
8
9
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
}
Otra cosa que tenemos que hacer es implementar algunos métodos de la clase StatelessWidget que debemos implementar obligatoriamente si queremos heredar de esta clase. El método que debemos implementar se llama «build» y es el que se encarga de devolver el widget que defina su contenido.
2
3
4
5
6
7
8
9
10
11
12
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
}
}
Llegados a este punto, ya no hay errores en el código y podemos ejecutar la aplicación, pero si lo hacemos veremos una pantalla con errores en nuestro móvil:
Si leemos el texto del error nos dice claramente lo que está pasando. «Una función build está devolviendo null, el widget afectado es MyApp. Las funciones build nunca deben devolver null…». Más claro que el agua.
Hemos dicho que la función build tenía que devolver un widget que defina el contenido de la pantalla, pero no hemos escrito ni una línea de código dentro. Vamos a hacer que la función devuelva un widget especial que se llama «MaterialApp».
El widget MaterialApp define una pantalla de aplicación y tiene los atributos «title» y «home», a los que tenemos que dar valor. Title simplemente debe ser un texto, el título de la aplicación. Por su parte, home debe ser otro widget que será lo que se muestre en la pantalla. Para este primer ejemplo podemos definir que home sea un simple widget de texto, el widget «Text».
2
3
4
5
6
7
8
9
10
11
12
13
14
15
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My app title',
home: Text('My app content!')
);
}
}
Si ejecutamos la aplicación veremos que ya se muestre nuestro contenido en pantalla, aunque es terriblemente feo.
Esto lo vamos a solucionar muy rápido. En lugar de usar un widget Text como contenido para home, vamos a usar un widget especial que ya viene preparado para mostrarlo todo bonito, al más puro estilo material design. Hablamos del widget «Scaffold». Este widget tiene un par de propiedades estupendas: «appBar» y «body».
En la propiedad appBar definiremos la barra superior que tenemos siempre presente en las aplicaciones (con el título, elementos de menú…) y para ello tenemos que pasarle un widget «AppBar».
Por su parte, body contiene el bloque de contenido principal de la aplicación y para definirlo podemos pasarle el widget que queramos. En este caso la pasaremos un Widget «Center» para que el contenido del mismo quede centrado en el bloque:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My app title',
home: Scaffold(
appBar: AppBar(
title: Text('My app bar title')
),
body: Center(
child: Text('Hola mundo!')
)
)
);
}
}
¡Ahora sí! Ya tenemos un hola mundo más que decente en una pantalla de app con aspecto profesional. Como veis, crear una pantalla de app ha sido algo muy rápido, con MaterialApp y Scaffold lo tenemos en un momento. El trabajo realmente está en el contenido de «body», pero eso ya lo veremos más adelante.
Espero que este pequeño post os resulte de utilidad para dar vuestros primeros pasos en Flutter.
¡Hasta pronto!