Antes de comenzar, vamos a introducir rápidamente que es Flutter.
Flutter es el framework de Google para la creación de aplicaciones para Android e iOS, dejando por fuera a las apps para Windows en dispositivos móviles; la política de Flutter es similar a la de otros framework como Xamarin en el cual podemos crear dos aplicaciones para plataformas distintas como lo son Android e iOS con un solo proyecto.
Un punto fuerte que tiene Flutter es que es rápido al momento de desarrollar aplicaciones para dispositivos móviles, además de esto, permite crear aplicaciones nativas para estas plataformas y no de tipo webapps, como ocurre con Ionic; y por esto tenemos aplicaciones con mejor acabado.
Otro punto importante es el lenguaje de programación que emplea Flutter; Flutter emplea Dark, por lo tanto tenemos que aprender este lenguaje de programación orientado a objetos, por lo tanto podemos crear clases, en archivos diferentes y relacionarlas entre ellos.
Otro punto importante es que Flutter emplea el Material Design; por lo tanto vas a ver que cuanto creemos componentes desde nuestra aplicación, esto automáticamente toman el diseño del Material Design.
Instalar Flutter en nuestra computadora
Para instalar Flutter lo primero que debemos hacer es ir al sitio oficial y descargar el instalador para tu sistema operativo Install Flutter.
En la siguiente página te detallan los pasos para instalar Flutter correctamente en tu computadora; en el caso de Windows:
Extensión de Flutter para Android Studio y Visual Studio Code
Debes de decidir qué IDE vas a emplear si Android Studio o Visual Studio Code; en ambos IDEs puedes instalar Flutter y empezar a crear tus aplicaciones; si no quieres complicarte mucho podría emplear Android Studio, ya que al instalar este ya tienes accesos a los Simuladores en Android de manera automática desde el mismo IDE.
De igual, para ambos IDEs, una vez instalado Flutter en tu computadora, debes de instalar la extensión para poder crear proyectos con este Framework para el Material Design en aplicaciones móviles en Android e iOS.
Crear nuestra primera aplicación: Turorial
Una vez que tengas listo tu ambiente para trabajar el Flutter; como hablamos un poco en la sección anterior; vamos a empezar a trabajar con Flutter; vamos a emplear Android Studio y con esto estamos listos para seguir con nuestro pequeño curso o guía de Flutter; ahora le toca el turno para empezar nuestra aplicación.
Lo primero que haremos será abrir el IDE que tengas seleccionado; en mi caso será Android Studio que como ya vimos nos sirve para mucho más que Kotlin y Android.
Ya en este punto estamos listos para empezar a crear nuestra aplicación; para eso vamos a File - New - New Flutter Project:
Y seleccionamos la opción que nos dice Flutter Application:
Luego tendremos la ventana típica para definir los parámetros de nuestra aplicación; el nombre, ubicación, de la SDK, del proyecto que vamos a crear y poco más:
Una vez hecho esto, le das a siguiente hasta que Android Studio termine de configurar tu proyecto.
Una vez que esté lista intenta ejecutar la aplicación en un simulador verás el siguiente mensaje que te arroja el Android Studio:
Cómo ves, no nos da la opción para ejecutar el Android Virtual Device o AVD por sus siglas ni nada, solo nos funciona si conectamos un dispositivo con Android a nuestra PC el cual ya esté correctamente configurado para dispositivo de desarrollo; sin embargo existe un "truco" por llamarlo de alguna manera para poder emplear nuestros dispositivos virtuales de Android Studio.
Ejecutando nuestro emulador Android para depurar en Flutter
Así como indicamos vas a ir a AVD Manager y luego lanzas tu simulador de Android que tengas seleccionado:
Ya con esto, esperas a que inicie y cargue el simulador y podrás ejecutar tu aplicación Android que será como la siguiente:
Aunque también recuerda que puedes emplear un dispositivo físico si así lo deseas en vez de uno virtual; esto es útil cuando no tienes un equipo de muchas prestaciones.
Los widget en Flutter para todo
Luego ejecutas la aplicación en el simulador que ya lanzaste en los pasos anteriores y verás una aplicación como la siguiente:
Cómo ves es una especie de contador; la interfaz consta del toolbar (1), el cuerpo central (2) y botón (3) y un texto (4); aquí es donde entramos con la explicación de los widget; los widget son la pieza fundamental en el desarrollo de aplicaciones para Flutter.
Todas estas numeraciones que te señalamos anteriormente, son bloques que corresponden a un Widget, que los puedes ver como pequeñas aplicaciones que conforman tu aplicación; y no solo eso, cada uno de los 4 componentes anteriores, internamente son compuestos por más widgets; por ejemplo, en el caso del botón flotante, que por su naturaleza en un widget, internamente tiene un componente imagen, para definir el + que ves en el mismo, que como puedes adivinar, es un widget; en resumen; todo es un widget hasta el elemento base que puede ser un texto o una imagen.
Los widget son un mecanismo que nos permiten desarrollar los distintos componentes; en Flutter todo es un widget; y si TODO; si analizamos la imagen anterior que nos lanzó nuestro emulador; cada uno de los elementos que resaltamos es un widget; existe un componente para las cosas más fundamentales que podemos hacer; inclusive toda esa interfaz que señalamos está contenido en un gran widget que es nuestra aplicación:
El MaterialApp para definir como base o home de nuestra aplicación
Lo primero que vamos ha hacer es borrar todo el contenido de nuestro main.dart que como puedes suponer es el primer archivo en ejecutarse, es el que busca la SDK de Flutter al momento de ejecutar nuestra aplicación; la misma debe de retornar una clase especial llamada MaterialApp que espera como parámetro, lo que puedes suponer, un Widget, el cual vamos a implementar a continuación.
Vamos a implementar nuestra primera aplicación en una clase aparte; que es la mejor forma que tenemos para desarrollar nuevos componentes; en otras palabras, desarrollar nuestros propios Widgets, es decir, nuestra aplicación:
Lo primero que vamos ha hacer es crear una clase en nuestro mismo archivo main, para eso empleamos la palabra reservada class seguido del nombre de la clase, que es nuestro caso será MiPrimeraApp:
class MyApp
De momento hemos hecho realmente poco, apenas definir una clase, pero como ya debes de sabes a este punto, esta clase necesita un cuerpo, y no un cuerpo cualquiera; las clases que emplean componentes de interfaces visuales, en otras palabras nuestros widgets necesitan de algo en especial, un tipado de la clase que nos ofrezca elementos que podamos reutilizar para desarrollar nuestros componentes, y un punto de arranque de nuestra código (el método build); para ello debemos de extender nuestra clase de una clase que nos permita dibujar nuestro árbol de widgets! ; para eso podemos emplear la clase StatelessWidget que es una de las más simples que hay:
class MyApp extends StatelessWidget {
}
Cuando hagamos esto, el compilador nos dará un error indicando que espera algo más, debemos definir nuestro método de arranque, algo similar cuando estamos programando en Android Studio nuestras aplicaciones para esta plataforma debemos de indicarle (una vez definido nuestra appcompatactivity) los métodos de nuestro ciclo de vida de una app para Android; aquí debemos de definir un método build; asi de simple:
class MyApp extends StatelessWidget {
build(context) {
}
}
El mismo como vez recibe un parámetro pero esto lo veremos más adelante...
Este es un método especial en donde podemos construir nuestro widget; viene siendo además como nuestro método main de nuestra clase, ya que en ningún momento vamos a llamarlo nosotros si no lo hará internamente la SDK de flutter al momento de la ejecución de nuestra aplicación.
Por supuesto este método llamado build de la SDK de Flutter, tiene que hacer algo, debe de definir algo interesante para nuestra aplicación; lo primero que vamos a hacer es definir un método elemental, que en realidad es un Widget, como todo aquí en Flutter; dicho método o Widget se llama MaterialApp al cual le podemos definir un atributo home para que nos quede de la siguiente forma:
class MyApp extends StatelessWidget {
build(context) {
home: XXX
}
}
Este atributo como debes de suponer, recibe un Widget, que en este caso será uno llamado Scaffold que simplemente nos pinta una pantalla en blanco como la siguiente:
class MyApp extends StatelessWidget {
build(context) {
home: Scaffold
}
}
Este Widget Scaffold nos permite definir el cuerpo de nuestra aplicación, toda la pantalla la podemos definir mediante este contenedor; en otras palabras, podemos definir la cabecera o el appBar y el cuerpo o body; lo primero que vamos a definir es el AppBar:
class MyApp extends StatelessWidget {
build(context) {
home: Scaffold(
appBar: AppBar(
title: Text("MiLista"),
),
);
}
}
Como puedes ver, simplemente definimos un nuevo atributo llamado title que como puedes suponer recibe un Widget que puede ser cualquier cosa pero lo tradicional sería un texto como el que definimos aquí.
Por supuesto, el build espera retornar algo, y ese algo debe ser nuestro MaterialApp con todo lo que definimos anteriormente:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('MiLista'),
),
),
);
}
}
También recuerda colocar el main que es fundamental para ejecutar nuestra aplicación; ya que todo parte de aquí.
Ya en este punto puedes ejecutar tu aplicación y verás el siguiente resultado:
Creando una carta o tarjeta en Flutter
Lo siguiente que vamos a definir será el cuerpo de nuestra aplicación, la cual es contenida en nuestro Widget llamado Scaffold; vamos a crear una de estas tarjetas que son tan chulas en Android, una de las mejores cosas que nos trajo el Material Design que adoptó Google con Android 5 y adelante llamados Card Views; para eso vamos a emplear un Widget como ya debes saber que se llama Card:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('MiLista'),
),
),
);
}
}
Cómo ya puedes ir dándote cuenta, ya todo va teniendo como qué más orden, todo tiene más sentido y una estructura de tipo Pila, en donde vamos agregando nuevos componentes; como ya seguramente te aventuraste, nuestro Widget Card tiene algunos atributos que podemos llenar, que sería el título y la imagen; para que sepas cómo trabajar con las imágenes en Flutter desde tu carpeta assets puedes irte al último punto en este artículo:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('MiLista'),
),
body: Card(
child: Column(
children: <Widget>[
Image.asset('assets/codeigniter.png'),
Text("Curso en CodeIgniter")
],
),
),
),
);
}
}
Aquí empleamos un nuevo componente o widget, en este caso es el de las imágenes; es un simple widget que especifica la imagen que importamos en la carpeta assets.
Además de esto, creamos una widgets para poder colocar una pila de widgets, para eso es el Column helpers que como puedes ver implementa una colección de widgets mediante un array de widgets.
Finalmente, cuando ejecutes tu aplicación; obtendrás:
Habilitando nuestra carpeta assets
Para poder emplear recursos en nuestro proyecto Flutter, tenemos que ir a pubspec.yaml y descomentar las siguientes líneas:
Tienes que tener cuidado con los tabs ya que los mismos son empleados ya que con ellos se define el nombre de la carpeta que vas a crear para arrojar recursos en tu proyecto que en nuestro caso se llama assets:
Con el paso anterior cubierto, puedes crear una carpeta llamada assets o el nombre que definieras en la raíz de tu proyecto y arrojar tu imagen en la misma.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter