Una introducción simplificada a Dart y Flutter

Programación

Un poco de historia

Todo comenzó en 2011: Xamarin, ahora una empresa propiedad de Microsoft, ideó una solución para aplicaciones móviles híbridas a través de su producto estrella, Xamarin SDK con C #. Y así comenzó la revolución de las aplicaciones móviles híbridas, la facilidad para escribir un código base para muchas plataformas.

Ionic surgió en 2013 con su primer lanzamiento de Drifty Co. Ionic ayudó a los desarrolladores web a utilizar sus habilidades existentes en la creciente industria de aplicaciones móviles. En 2015, Facebook usó React.js para reinventarlo para desarrolladores de aplicaciones móviles. Nos dieron React Native, una base de código completamente JavaScript basada en SDK nativos.

Y estos no son los únicos, sino algunos de los muchos marcos móviles híbridos. Encuentra más información aquí.

Ahora podemos ver el turno de Google de meter los dedos en el pastel con Flutter.

¿Qué es Dart?

Google tuvo su primer lanzamiento de Flutter 1.0 en diciembre pasado, después de tenerlo en modo beta durante más de 18 meses. Dart es el lenguaje de programación utilizado para codificar aplicaciones Flutter. Dart es otro producto de Google y lanzó la versión 2.1, antes de Flutter, en noviembre. Como está comenzando, la comunidad de Flutter no es tan extensa como ReactNative, Ionic o Xamarin.

Hace un tiempo, descubrí el gusto por JavaScript. Estaba encantado de trabajar en una aplicación móvil ReactNative para mi pasantía. También disfruto codificando aplicaciones móviles híbridas, así que quería probar Flutter, como hice con Xamarin el año pasado.

En mi primera mirada a Flutter (y Dart), me sentí confundido y parecía que no podía entender nada. Incluso tenían una sección en sus documentos para desarrolladores que pasaban de React Native. Entonces, me dediqué a profundizar en todas las cosas de Dart.

Dart se parece un poco a C y es un lenguaje de programación orientado a objetos. Por lo tanto, si prefiere los lenguajes C o Java, Dart es el indicado para usted, y probablemente lo dominará.

Dart no solo se utiliza para el desarrollo de aplicaciones móviles, sino que es un lenguaje de programación. Aprobado como estándar por Ecma (ECMA-408), se usa para construir casi cualquier cosa en la web, servidores, escritorio y, por supuesto, aplicaciones móviles (sí, las mismas personas que estandarizaron nuestros favoritos ES5 y ES6).

Dart, cuando se usa en aplicaciones web, se transpila a JavaScript para que se ejecute en todos los navegadores web. La instalación de Dart también viene con una máquina virtual para ejecutar los archivos .dart desde una interfaz de línea de comandos. Los archivos de Dart utilizados en las aplicaciones de Flutter se compilan y empaquetan en un archivo binario (.apk o .ipa) y se cargan en las tiendas de aplicaciones.

¿Cómo se ve la codificación en Dart?

Como la mayoría de los lenguajes ALGOL (como C # o Java):

  1. El punto de entrada de una clase de Dart es el main()método. Este método también actúa como punto de partida para las aplicaciones de Flutter.
  2. El valor predeterminado de la mayoría de los tipos de datos es null.
  3. Las clases de Dart solo admiten herencia única. Puede haber solo una superclase para una clase en particular, pero puede tener muchas implementaciones de interfaces.
  4. El control de flujo de ciertas declaraciones, como las condiciones if, los bucles (for, while y do-while), las declaraciones switch-case, break y continue son iguales.
  5. La abstracción funciona de manera similar, permitiendo clases e interfaces abstractas.

A diferencia de ellos (y a veces un poco como JavaScript):

  1. Dart tiene inferencia de tipos. No es necesario declarar explícitamente el tipo de datos de una variable, ya que Dart "inferirá" lo que es. En Java, una variable debe tener su tipo explícitamente dado durante la declaración. Por ejemplo String something;,. Pero en Dart, la palabra clave se usa como tal var something;,. El código trata la variable de acuerdo con lo que contenga, ya sea un número, cadena, bool u objeto.
  2. Todos los tipos de datos son objetos, incluidos los números. Por lo tanto, si no se inicializa, su valor predeterminado no es 0, sino nulo.
  3. No se requiere un tipo de retorno de un método en la firma del método.
  4. El tipo numdeclara cualquier elemento numérico, tanto real como entero.
  5. La super()llamada al método está solo al final del constructor de una subclase.
  6. La palabra clave newutilizada antes del constructor para la creación de objetos es opcional.
  7. Las firmas de métodos pueden incluir un valor predeterminado para los parámetros pasados. Entonces, si uno no está incluido en la llamada al método, el método usa los valores predeterminados en su lugar.
  8. Tiene un nuevo tipo de datos incorporado llamado Runas, que se ocupa de los puntos de código UTF-32 en una cadena. Para ver un ejemplo simple, consulte emojis e íconos similares.

Y todas estas diferencias son solo algunas de las muchas que puede encontrar en el recorrido de Dart Language, que puede consultar aquí.

Dart también tiene bibliotecas incorporadas instaladas en el SDK de Dart, siendo las más utilizadas:

  1. dardo: núcleo para la funcionalidad básica; se importa en todos los archivos de dardos.
  2. dart: async para programación asincrónica.
  3. dardo: matemáticas para funciones matemáticas y constantes.
  4. dart: convierte para convertir entre diferentes representaciones de datos, como JSON a UTF-8.

Puede encontrar más información sobre las bibliotecas de Dart aquí.

Usando Dart en Flutter

Flutter tiene más bibliotecas específicas de aplicaciones, más a menudo en elementos de la interfaz de usuario como:

  1. Widget: elementos comunes de la aplicación, como Text o ListView.
  2. Material: contiene elementos que siguen al diseño de materiales, como FloatingActionButton.
  3. Cupertino: contiene elementos que siguen los diseños actuales de iOS, como CupertinoButton.

Puede encontrar bibliotecas específicas de Flutter aquí.

Configurando Flutter

Entonces, para poner esto en marcha, sigue los documentos de Flutter. Proporciona detalles sobre la instalación del Flutter SDK y la configuración de su IDE preferido; el mío sería el código VS. La configuración del código VS con la extensión Flutter es útil. Viene con comandos incorporados, en lugar de usar el terminal.

Siga los documentos nuevamente para crear su primera aplicación. En mi caso, ejecute el comando de extensión Flutter: New Project. Luego, escriba el nombre del proyecto y elija la carpeta de destino.

Si prefiere usar el terminal, muévase a la carpeta de destino de la aplicación. Entonces usa el comandoflutter create me> to create the app folder. This generates the entire app folder, including the Android and iOS project folder. To open these folders, use Android Studio and XCode, for building the app.

In the root of the project, you find pubspec.yaml. This file contains the app's dependencies. This includes both external libraries/modules and assets like images and config files. It works like a package.json, containing all external modules of the app. To install these packages, enter the package name and version under the dependencies: section of the pubspec.yaml. Run the command flutter packages get. Include the assets of the app inside the flutter: section of the same file.

The entry point of the app is main.dart, found inside the lib folder. This folder also contains all Dart classes (app pages or reusable components). On creation of the app, the main.dart file comes with a simple pre-written code. Before running this code, a device is either connected to the PC, with USB debugging enabled. Afterward, run the command flutter run on the terminal.

A First Look at the Flutter App

The app currently looks like this now:

Original text

Contribute a better translation

Building the user interface of a Flutter app makes use of Widgets.

Widgets work in a similar way to React. A widget uses different components to describe what the UI should look like. They can be either Stateful or Stateless. In Stateful components, the widget rebuilds due to state changes, to accommodate the new state.

When we look at the current code for the Home page, we see that it’s a Stateful page. If the counter variable increases, the framework tries to find the least expensive way to re-render the page. In this case, find the minimal difference between the current widget description and the future one. It takes into account the changed state.

The Scaffold class is a material design layout structure and is the main container for the Home page. The AppBar, also a material design element is the title bar found at the top of the page. All other components, like the floating button and two text tags, fall under the body of the page. The Center class is a layout class that centers its child components vertically and horizontally.

The Column class, another layout widget, lists each child element vertically. Each of its child elements is added to an array and put underneath the children: section.

The two texts speak for themselves. The first displays the text ‘You have pushed.’ The second one displays the current value in the _counter variable.

The FloatingActionButton is part of the Material design widgets. It displays a + icon and triggers the increment of the _counter variable.

Hot Reloading

Another plus point of using Flutter is the hot reloading feature. It lets you see changes made to the code in real time, without restarting the build process. Type ‘r’ on the same console that you ran the flutter run command.

Altering the current code

As we can see, when you click the button, the _counter variable value increases. This re-renders the page and the new value is displayed on the body of the page.

I’m going to change that up a bit. For every button click, we will display a custom Card component with the item number.

Creating the Custom Card Component

So, to start off, we make a new .dart file inside the lib folder. I created mine in a subfolder commonComponents and named it customCard.dart.

import 'package:flutter/material.dart'; class CustomCard extends StatelessWidget { CustomCard({@required this.index}); final index; @override Widget build(BuildContext context) { return Card( child: Column( children: [Text('Card $index')], ) ); } }

This component will be a stateless widget and will only display the value that we send to it, in the Text widget.

Displaying a List of Custom Cards

Import the above component to the main.dart like so:

import 'commonComponents/customCard.dart';

I then replace the code of the home page body, from the one above to this:

body: Center( child: Container( child: ListView.builder( itemCount: _counter, itemBuilder: (context, int index) { return CustomCard( index: ++index, ); }, ) ), ),

It now displays a List of CustomCard elements, up to the number of times the button is clicked. The itemCount is used to define the number of elements the ListView must display. The itemBuilder returns the actual item that is displayed.

And that’s a simple example of using Flutter.

In conclusion…

Before my interest turned to JavaScript, I worked with Java. If I had encountered Dart around that time, I might have been able to understand it easier than I did now. All in all, It wasn’t too difficult but took a bit of time to get the hang of it. I could see myself using it in time.

Find the code repo, here.

Find the commit for this post, here.