Desarrollando con Flutter

image
Flutter

Desarrollando con Flutter

Flutter es el framework de Google para el desarrollo de aplicaciones móviles nativas desde una sola base de código . No es la única herramienta que existe en el mercado, pero nosotros estamos convencidos de que va a ser el referente durante los próximos años.

Hoy vamos a revisar desde un punto de vista técnico las características más interesantes de este potente framework.

Lo básico

Flutter está desarrollado con Dart, un lenguaje de programación open source desarrollado también por Google. Podemos conocer un poco más de él aquí. Flutter se presentó en 2015 y el pasado 4 de Diciembre de 2018 se presentó su primera versión estable. La versión actual es la 1.2.1. Desde entonces la comunidad de desarrolladores entorno a esta tecnología ha crecido exponencialmente.

Nuestra primera app

Nos vamos a Android Studio donde tenemos configurado el entorno de desarrollo para Flutter y creamos nuestra primera App. Al crear una nueva aplicación, el framework genera una app de ejemplo en la que combina los componentes básicos para el desarrollo de aplicaciones móviles.

Proyecto de ejemplo desplegado en el simulador

A la izquierda podemos ver la estructura de carpetas de proyecto Flutter. En la carpeta /lib tendremos todo el código de nuestra aplicación. Podemos ir organizando los ficheros .dart que vayamos generando según nuestra organización y arquitectura. A nivel de proyecto el fichero más importante es pubspec.yaml. En el definiremos las dependencias con librerías de terceros o plugins para acceder al hardware del dispositivo móvil. También será el lugar para definir los assets de nuestro proyecto.

Volviendo al código, toda aplicación tendrá un fichero llamado main.dart que será el encargado de iniciar nuestra aplicación. Si abrimos el fichero de nuestra aplicación de ejemplo podremos ver la siguiente linea:

void main() => runApp(MyApp());

Esta linea es la que arranca nuestra aplicación invocando al widgets principal. Pero ¿Qué es un widget? Un widget es el objeto que representa un componentes del framework. En Flutter todo es un widget, incluso las interfaces. Aquí no hay ficheros xml o StoryBoards, todas las interfaces se programan mediante composición de widgets.

Composición de Widgets

Si observamos la clase MyApp vemos que es un objeto que hereda de StatelessWidget, es decir, es un widget. En este caso es un widget que representa la aplicación. Flutter nos provee un widget de este tipo, MaterialApp, con una serie de propiedades que nos ayudan a customizarlo.

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}

Podemos añadir el título de la app, el theme (En otro artículo hablaremos de como homogeneizar el estilo de nuestra app) y la primera pantalla que se tiene que mostrar al usuario, en este caso MyHomePage, que es otro widget. En este caso un widget con estado.

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;

void _incrementCounter() {
setState(() {
_counter++;
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

StatelessWidgets vs StatefullWidgets

En Flutter tenemos widgets sin estado, una vez que se renderizan no cambian durante su ciclo de vida, y los widgets con estado. Estos últimos pueden modificar su estado inicial debido a la interacción del usuario o por algún evento externo. Flatter es un framework reactivo, por lo que si cambia el estado de un widget, este se renderiza completamente de nuevo con la información del nuevo estado. Un widget con estado tiene que implementar el método createState() que devuelve un objeto que representa el estado de dicho widget. Este objeto contiene la información del estado y la representación gráfica del widget. Para modificar el estado de un widget hay que invocar el método setState(()=>{}) el cual recibe una función que es la que modifica el estado del widget. En nuestro ejemplo, se actualiza el contador de la pantalla principal.

Componentes básicos

Tanto para un widget sin estado como para uno con estado, normalmente existe un método build que hay que reimplementar y que devuelve el widget que representa ese componente en sí. Puede ser una pantalla completa como en el caso de MyHomePage o un simple botón. Si vemos el método build de MyHomePage vemos como lo que devuelve es un widget que a su vez está compuesto por otros widgets (Composición de widgets)

Uno de los componentes principales es Scaffold. Representa una pantalla e internamente podemos definir la appBar, el body, un floatingActionButton o el bottomNavigationBar. En el body, que representa el cuerpo de la pantalla, podremos utilizar la composición de diferentes widgets para implementar la UI que nuestro diseñador o nosotros mismos hemos definido.

Entre los widget básicos tenemos:

  • Row: Representa un listado de widget organizados horizontalmente
  • Column: Representa un listado de widget organizados verticalmente
  • Text: Representa un texto con formato
  • Stack: Representa una pila de widgets que podemos colocar en la posición que nosotros queramos.

Existen una gran variedad de widgets que podemos encontrar en el catálogo de Flutter.

Hot Reloading

Una de las características más potentes del framework es la carga en caliente. Podemos realizar modificaciones de nuestro código fuente y ver el resultado sin necesidad de reiniciar la app. Además conserva el estado por lo que podemos probar y corregir casos de uso de nuestra aplicación sin necesidad de iniciar el caso de uso desde el principio. Estas característica aumenta la velocidad de desarrollo y agiliza las pruebas y correcciones de las funcionalidades de la app a desarrollar.

Rendimiento Nativo

Dart es compilado por adelantado en código nativo a multiples plataformas. Esto permite a Flutter comunicarse con Android e iOS sin pasar por un puente de JavaScript, como en otras tecnologías, y ofrecer un rendimiento prácticamente nativo.

Puedes revisar algunas de las apps que se han desarrollado con Flutter en este enlace.

Packages y Plugins

La comunidad de desarrolladores está creciendo rápidamente y podemos encontrar una gran variedad de librerías que nos ayudan a resolver esos problemas comunes en cualquier desarrollo de aplicaciones móviles. Conexión con APIs, gestión de estado de la app, acceso a la cámara, google maps, etc. Todas estas librerías y plugins podemos encontrarlos en este repositorio.

Flutter ha llegado al mercado con argumentos bastante potentes para ser un referente en el desarrollo de aplicaciones móviles nativas desde una sola base de código. Por eso desde Código Base ofrecemos un servicio de desarrollo de apps basado en esta tecnología unido a una metodología ágil centrada en la comunicación con el cliente y en aportar valor al producto final.

Déjanos un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Suscríbete a nuestra Newsletter