Introduccion a Flutter y Dart

DART

Dart es el lenguaje de programación que junto al

sdk Flutter o framework como lo llaman algunos,
ha llamado la atención de toda la comunidad de
desarrollo de software, puesto que promete que
desde una misma base de código se pueden
desarrollar aplicaciones tanto para android, ios
como para Google fuchsia; De una manera sencilla,
rápida y totalmente nativa.

2
 Dart es un lenguaje open source desarrollado
por Google, inicialmente fue creado como una
alternativa a javascript, sin embargo pese a la
intención de su creador por hacerlo estándar
para la web, los demás navegadores no lo
incorporaron a su core.

3
Dart es un lenguaje open source desarrollado
por Google, inicialmente fue creado como una
alternativa a javascript, sin embargo pese a la
intención de su creador por hacerlo estándar
para la web, los demás navegadores no lo
incorporaron a su core.

4
Dart es una alternativa moderna a Javascript la
cual fue presentada el 10 de octubre de 2011
en Aarhus Dinamarca, la cual en su momento
no pretendía ser un sustituto a Javascript,
puesto que este transpila al lenguaje estándar
en los navegadores. En la ya mencionada
presentación El ingeniero de Google Lars Bak,
describe a Dart “como lenguaje estructurado
pero flexible para la programación Web”

5
Dart admite clases, mixins, tipado estático, clases
abstractas, herencia e interfaces, en general un
código seguro y con mucha capacidad para el
desarrollo de grandes proyectos y recordemos que
Javascript introdujo clases en ECMAScript 2015,
desde antes se utilizaban pero por medio de
prototipos y aun hoy en día ya implementada dicha
característica, según el portal web caniuse este
presenta problemas de uso en cuanto al estándar
de los diferentes navegadores, claro esta que para
los mas utilizados no hay problema aunque se
recomienda implementarlo en su modo estricto. 6
  ¿Qué es Flutter y qué lo hace tan especial?

Flutter es un kit de desarrollo de software (sdk)

open source para la construcción de aplicaciones
android, ios y Google fuchsia desde una única
base de código y aunque si bien hoy en día hay
muchas alternativas para lograr este resultado
como lo son nativescript, react native, xamarin,
weex, entre otros; a mi en lo personal me parece
muy fácil de aprender tanto Dart como Flutter
incluso mas que nativescript y weex resaltando
que para ese entonces cuando me di a la tarea de
aprender los dos últimos mencionados ya tenia
conocimientos en Javascript. 7
 Razones de peso para usar Flutter:
 Widgets ya construidos: Flutter viene con un
grupo de widgets ya establecidos los cuales
funcionan a la perfección en las diferentes
plataformas a las que esta dirigida, lo que
hace mas rápido el diseño de la interfaz de
usuario y complementándolo lo hace muy
eficiente porque este acepta los patrones de
diseño de material desing y cupertino..

8
 Razones de peso para usar Flutter
(Cont…):
 Hot reload: Este hace muy interesante a Flutter
puesto que el desarrollo de aplicaciones, nos
permite ver cambios al instante en el emulador
(Dependiendo de la capacidad de tu
computadora), para ser mas especifico, si
vienes del desarrollo web o tiene conocimiento
en su funcionamiento es muy similar a la hora
de efectuar cambios y observarlos en el
navegador en conclusión mas eficiencia.

9
 Razones de peso para usar Flutter
(Cont…):
 Clases: Casi todo esta basado en la
orientación a objetos, entonces por un lado es
muy semejante a Java y por otro lado es muy
afín al desarrollo web con html5

10
 Codificando una App Android Con Flutter y Dart .

 Para crear un nuevo proyecto Flutter, presiona

el botón Crear Nuevo Proyecto en la pantalla
de bienvenida. En el diálogo Nuevo Proyecto,
elige Flutter y presiona Siguiente.

 Ahora puedes darle un nombre significativo a

tu proyecto y presionar Terminar.

11
 Codificando una App Android Con Flutter y Dart .

 Una vez que el proyecto ha

sido generado, sugiero que
presiones el
botón Ejecutar para
asegurar que el SDK Dart,
los complementos y el
framework Flutter están
todos configurados
correctamente. Si lo están,
después de varios
segundos, deberías ver la
siguiente pantalla en tu
dispositivo o emulador:
12
 Nota qué, desde este punto, no necesitas
presionar el botón Ejecutar de nuevo incluso
después de hacer cambios de código. Flutter
soporta recarga en vivo, una característica que
te permite empujar inmediatamente
actualizaciones a la app sin reiniciarla.

13
 Creando Widgets

Los Widgets son la piedra angular de Flutter, definen las

vistas que conforman la pantalla que se muestra al usuario,
es decir construyen la UI de la app.

14
 Stateless Widget

 Es el widget más básico que puedes crear,

estos no guardan un estado, es decir, una vez
fueron creados no cambiarán su definición. Se
dice que son un tipo de widget inmutable.
class MyStatelesWidgetExample
extends StatelessWidget {

@override
Widget build(BuildContext context) {
// Logic here!
}

}
15
 Stateless Widget

 .

class MyStatelesWidgetExample
extends StatelessWidget {

@override
Widget build(BuildContext context) {
// Logic here!
}

}
16
 Stateless Widget

 Para crear un Stateless Widget únicamente

debes hacer extender la clase
de StatelessWidget y sobrescribir el
método build, debe retornar un widget, para el
siguiente ejemplo se devuelve un texto plano:
class MyStatelesWidgetExample extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new Text("Hello Flutter");
}

}
17
El objeto Text a su vez es otro stateless
widget, en cuyo constructor le pasamos el
texto que quedará como atributo interno e
inmodificable.
RESULTADO:

18
 El texto que contiene nuestro nuevo widget se pintaba
en las coordenadas (0,0) en pantalla, y quedaba
tapado por la status bar del dispositivo. He optado
por añadir otro widget más (Center) para centrar en
pantalla el texto.
void main() {
runApp(new MyStatelesWidgetExample());
}

class MyStatelesWidgetExample extends StatelessWidget {

@override
Widget build(BuildContext context) {
return new Center(
child: new Text("Hello Flutter")
);
} 19
 Stateful Widget

 En la otra cara de la moneda tenemos los

stateful widgets, los cuales se diferencian por
poder cambiar su definición una vez creados.
Se dice que son widgets mutables

20
 Stateful Widget

class MyStatefulWidgetExample extends StatefulWidget {

@override
MyStatefulWidgetState createState() => new MyStatefulWidgetState();

class MyStatefulWidgetState extends State<MyStatefulWidgetExample> {

@override
void initState() {
super.initState();
// Initialize dependencies here
}

@override
Widget build(BuildContext context) {
// Logic here
}

} 21
Al extender la clase de StatefulWidget es
necesario sobreescribir el
método createState, que recibe el State el cual
gestionará el widget. Para hacer un código más
limpio el State que recibe el widget lo podemos
poner en una clase aparte, y ésta sobreescribe el
método build (funciona igual que en el stateless
widget).

22
 Además (aunque no es necesario) es posible
sobreescribir el método initState, método que
es llamado al iniciarse el State del widget, lo
podemos aprovechar para inicializar las
dependencias que tengamos.
 Una imagen vale más que mil palabras, así
que adjunto una imagen con el ciclo de vida de
un State:

23
24
 Material Design Widgets
 Una de las cosas destacadas de Flutter es que
trae ya implementados una colección de
widgets con los que poder crear vistas
basadas en las guías de estilo Material Design
que, sinceramente, son realmente útiles.
Podemos hacer una app realmente atractiva
sólo llamando a esta colección de widgets.
 Para poder llamar a los widgets material
design es necesario importálos:

import 'package:flutter/material.dart';
25
 Scaffold
‘Implements the basic material design visual
layout structure.’
Es el más básico para dibujar interfaces, sería
como nuestro lienzo en blanco. Podemos
empezar a dibujar en él pasándole un widget a
su parámetro body.
Además cuenta con varios parámetros más a los
que les podemos pasar
una appBar (Toolbar), backgroundColor,
una navigation drawer, o incluso
un floatingActionButton. 26
 AppBar
‘A material design app bar.’
No tiene mucha ciencia, es una toolbar que se
ajusta al ancho de la pantalla por defecto y
podemos, al igual que con el widget anterior,
jugar con varios de sus parámetros para
conseguir un diseño a nuestro gusto.

27
 FloatingActionButton
‘A material design floating action button.’
Es un botón circular que contiene un icono y
realiza una acción considerada la principal en
esa pantalla, suele usarse para el botón de
‘crear’, ‘compartir’, ‘buscar’.

28
import 'package:flutter/material.dart';

void main() {
runApp(new MyStatefulWidgetExample());
}

class MyStatefulWidgetExample extends StatefulWidget {

@override
MyStatefulWidgetState createState() => new MyStatefulWidgetState();

class MyStatefulWidgetState extends State<MyStatefulWidgetExample> {

var _counter = 0;

@override
void initState() {
super.initState();
// Initialice
}

@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(child: new Text("Counter: $_counter")),
appBar: new AppBar(
title: new Text("My Flutter App Example <3")
),
floatingActionButton: new FloatingActionButton(
child: new Icon(Icons.add),
onPressed: () => setState(() {
_counter++;
})
)
);
}

29
30
Crear un app calculadora de propinas con los siguientes widgets:

un TextField para aceptar una cuenta

•

un TextField para aceptar un porcentaje de propina

•

un RaisedButton que el usuario puede presionar para calcular la propina

•

Cada widget de Flutter puede ser un StatelessWidget o un StatefulWidget. Como su

nombre sugiere, un StatefulWidget tiene un objeto de State asociado con él, que le
permite no solo almacenar datos, sino también reaccionar a cambios en los
datos.

Un StatelessWidget, por otro lado, es un objeto más simple, no diseñado para

almacenar persistentemente cualquier dato. Para mantener corto este
tutorial, estaremos creando nuestra calculadora de propinas como
un StatelessWidget. Así pues, abre main.dart, quita todos sus contenidos, y agrega
el siguiente código a el:
1import 'package:flutter/material.dart';
2 
3class TipCalculator extends StatelessWidget {
4 
5} 31
En el código anterior, la línea import es importante
porque material.dart es la librería que contiene todos los
widgets Material Design que estaremos usando en esta app.

Para almacenar la cantidad de la cuenta y el porcentaje de

propina, agrega dos variables miembro a la clase.
double billAmount = 0.0;
double tipPercentage = 0.0;

Para comenzar a crear la interfaz de usuario de la app, anula el

método build().

@override
Widget build(BuildContext context) {
    // More code goes here
}

32
Creemos ahora los dos
widgets TextField. Mientras lo
hacemos, podemos especificar
detalles tales como las etiquetas que
queremos asociar con los widgets y
los tipos de teclados virtuales que
deben ser mostrados cuando están
enfocados.
Debido a que no podemos recolectar
directamente los contenidos de un
widget TextField, debemos también
asociar un evento
manejador onChanged con este. Dentro
del manejador, que recibe un
objeto InputValue, podemos actualizar
los contenidos de nuestras variables
de miembro de la clase.
En consecuencia, agrega el siguiente
código dentro del método build():
01// Create first input field
02TextField billAmountField = new TextField(
03  labelText: "Bill amount(\$)",
04  keyboardType: TextInputType.number,
05  onChanged: (InputValue value) {
06    try {
07      billAmount = double.parse(value.text);
08    } catch (exception) {
09      billAmount = 0.0;
10    }
11  }
12);
13 
14// Create another input field
15TextField tipPercentageField = new TextField(
16  labelText: "Tip %",
17  keyboardType: TextInputType.number,
18  hintText: "15",
19  onChanged: (InputValue value) {
20    try {
21      tipPercentage = double.parse(value.text);
22    } catch (exception) {
23      tipPercentage = 0.0;
24    }
25  }
26);
33
 puedes ver que estamos usando el método parse() para
convertir cada texto de contenido del widget TextField a un
objeto double. Debido a que el método parse() puede arrojar
un FormatException, también está rodeado por un bloque try...catch.

Crear un widget RaisedButton es mucho como crear un

widget TextField. Sin embargo, para asignar una etiqueta a este,
debes crear un nuevo widget Text y agregarlo como su child.

1// Create button

2RaisedButton calculateButton = new RaisedButton(
3    child: new Text("Calculate"),
4    onPressed: () {
5        // More code goes here
6    }
7);

34
Dentro del evento manejador onPressed del botón, calcularemos
la propina y la cantidad total a ser pagada, y mostraremos
ambos en un diálogo modal. Para crear el diálogo, podemos
usar la clase AlertDialog. Una vez creada, el diálogo puede ser
mostrado pasándolo como un argumento al
método showDialog().

En consecuencia, agrega el siguiente código dentro del

evento manejador onPressed:
01// Calculate tip and total
02double calculatedTip = billAmount * tipPercentage / 100.0;
03double total = billAmount + calculatedTip;
04 
05// Generate dialog
06AlertDialog dialog = new AlertDialog(
07content: new Text("Tip: \$$calculatedTip \n"
08    "Total: \$$total")
09);
10 
11// Show dialog
12showDialog(context: context, child: dialog); 35
 Una interfaz de usuario Material Design no está completa sin una barra de app. Así
pues, crea una ahora usando el widget AppBar.

1AppBar appBar = new AppBar(title: new Text("Tip Calculator"));

Los diseños conteniendo barras de app y contenedores son tan comunes que
Flutter ofrece un widget Scaffold para ayudarte a establecer rápidamente una relación
entre estos.
1Scaffold scaffold = new Scaffold(appBar: appBar,
2                                 body: container);

Con el widget Scaffold en su raíz, nuestro árbol de widgets está ahora listo. Puedes continuar y usar el
widget Scaffold como el valor de regreso del método build().

1return scaffold;
36
Nuestro archivo Dart necesita una función main() como su punto de entrada. Dentro de este, debemos llamar la
función runApp() para inflar realmente y generar el árbol de widgets que creamos en el paso anterior.

De manera adicional, nuestro widget TipCalculator debería ser colocado dentro de un widget MaterialApp para que un

tema Material Design y esquema de color puedan ser aplicados a este. Así pues, agrega el siguiente código
a main.dart:

1void main() {
2  runApp(new MaterialApp(
3    title: 'Tip Calculator',
4    home: new TipCalculator()
5  ));
6}

Puedes ahora presionar

el botón Hot Reload
App para comenzar a
usar la app en tu
dispositivo.
https://code.tutsplus.com/es/tutorials/developing-an-android-app-with-flutter--cms-28270

38