1 Flutter-For-Dummies - Compress-001-061-.En - Es

Traducido del inglés al español - www.onlinedoctranslator.
com
Aleteo
®
Aleteo
®
por Barry Burd, PhD

Aleteo®Para Dummies®
Publicado por:John Wiley & Sons, Inc.,111 River Street, Hoboken, Nueva Jersey 07030-5774,www.wiley.com
Copyright © 2020 por John Wiley & Sons, Inc., Hoboken, Nueva Jersey
Publicado simultáneamente en Canadá
Ninguna parte de esta publicación puede ser reproducida, almacenada en un sistema de recuperación o transmitida de ninguna forma
o por ningún medio, ya sea electrónico, mecánico, fotocopiado, grabado, escaneado o de otro modo, excepto según lo permitido por
las Secciones 107 o 108 de la Ley de derechos de autor de los Estados Unidos de 1976. Acto, sin el permiso previo por escrito del Editor.
Las solicitudes de permiso al editor deben dirigirse al Departamento de permisos, John Wiley & Sons, Inc., 111 River Street, Hoboken,
NJ 07030, (201) 748-6011, fax (201) 748-6008, o en línea enhttp://www.wiley.com/go/permissions.
Marcas registradas:Wiley, For Dummies, el logotipo de Dummies Man, Dummies.com, Making Everything Easier y la imagen
comercial relacionada son marcas comerciales o marcas comerciales registradas de John Wiley & Sons, Inc. y no se pueden usar sin
permiso por escrito. Flutter es una marca registrada de Google, LLC. Todas las demás marcas comerciales son propiedad de sus
respectivos dueños. John Wiley & Sons, Inc. no está asociado con ningún producto o proveedor mencionado en este libro.
LÍMITE DE RESPONSABILIDAD/RENUNCIA DE GARANTÍA: EL EDITOR Y EL AUTOR NO OFRECEN DECLARACIONES NI GARANTÍAS

CON RESPECTO A LA EXACTITUD O INTEGRIDAD DEL CONTENIDO DE ESTE TRABAJO Y RECHAZAN ESPECÍFICAMENTE TODAS
LAS GARANTÍAS, INCLUYENDO SIN LIMITACIÓN LAS GARANTÍAS DE IDONEIDAD PARA UN PROPÓSITO PARTICULAR. NINGUNA
GARANTÍA SE PUEDE CREAR O EXTENDER POR VENTAS O MATERIALES PROMOCIONALES. LOS CONSEJOS Y ESTRATEGIAS
CONTENIDOS EN ESTE DOCUMENTO PUEDEN NO SER ADECUADOS PARA CADA SITUACIÓN. ESTA OBRA SE VENDE EN EL
ENTENDIMIENTO DE QUE EL EDITOR NO SE DEDICA A PRESTAR SERVICIOS LEGALES, CONTABLES U OTROS SERVICIOS
PROFESIONALES. SI SE REQUIERE ASISTENCIA PROFESIONAL, SE DEBEN SOLICITAR LOS SERVICIOS DE UN PROFESIONAL
COMPETENTE. NI EL EDITOR NI EL AUTOR SERÁN RESPONSABLES DE LOS DAÑOS DERIVADOS DEL PRESENTE. EL HECHO DE
QUE UNA ORGANIZACIÓN O SITIO WEB SE HAGA REFERENCIA EN ESTE TRABAJO COMO UNA CITA Y/O UNA FUENTE POTENCIAL
DE INFORMACIÓN ADICIONAL NO SIGNIFICA QUE EL AUTOR O EL EDITOR APRUEBE LA INFORMACIÓN QUE LA ORGANIZACIÓN
O EL SITIO WEB PUEDE PROPORCIONAR O LAS RECOMENDACIONES QUE PUEDE HACER. ADEMÁS, LOS LECTORES DEBEN SER
CONSCIENTE DE QUE LOS SITIOS WEB DE INTERNET MENCIONADOS EN ESTE TRABAJO PUEDEN HABER CAMBIADO O
DESAPARECER ENTRE CUANDO SE ESCRIBIÓ ESTE TRABAJO Y CUANDO SE LEÍDO.
Para obtener información general sobre nuestros otros productos y servicios, comuníquese con nuestro Departamento de atención al cliente
dentro de los EE. UU. al 877-762-2974, fuera de los EE. UU. al 317-572-3993 o al fax 317-572-4002. Para soporte técnico, por favor visite
https://hub.wiley.com/community/support/dummies.
Wiley publica en una variedad de formatos impresos y electrónicos y por impresión bajo demanda. Es posible que parte del material incluido
con las versiones impresas estándar de este libro no se incluya en los libros electrónicos o en la impresión bajo demanda. Si este libro hace
referencia a medios como un CD o DVD que no está incluido en la versión que compró, puede descargar este material en
http://booksupport.wiley.com.Para obtener más información sobre los productos Wiley, visitewww.wiley.com.
Número de control de la Biblioteca del Congreso: 2020935615
ISBN: 978-1-119-61258-2; 978-1-119-61261-2 (ebk); 978-1-119-61262-9 (ebk)
Fabricado en los Estados Unidos de América
10 9 8 7 6 5 4 3 2 1
Contenido de un vistazo
Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Parte 1: Preparándose . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
CAPÍTULO 1: ¿Qué es Flutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Configuración
CAPITULO 2: de su computadora para el desarrollo de aplicaciones móviles . . . . . . . . . . . . 29
Parte 2: Flutter: una vista de Burd's-Eye . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

CAPÍTULO 3: "Hola" de Flutter. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Hola de
CAPÍTULO 4: nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Hacer que
CAPÍTULO 5: las cosas sucedan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131 Disposición
CAPÍTULO 6: de las cosas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Parte 3: Detalles, Detalles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

CAPÍTULO 7: Interactuando con el Usuario. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
CAPÍTULO 8: Navegación, listas y otras ventajas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Moviéndose
CAPÍTULO 9: a la derecha a lo largo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Parte 4: La parte de las decenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

CAPÍTULO 10:Diez maneras de evitar errores. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
CAPÍTULO 11:Diez maneras de mejorar su carrera de desarrollo de aplicaciones. . . . . . . . . . . . . . 327
CAPÍTULO 12:Diez capítulos sobre el desarrollo de aplicaciones de Flutter. . . . . . . . . . . . . . . . . . . . 331
Parte 5: Apéndices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

APÉNDICE:Aplicación de citas de Doris. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Índice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Tabla de contenido
INTRODUCCIÓN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Como usar este libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Convenciones utilizadas en este libro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Lo que no tienes que leer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
suposiciones tontas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Cómo
está organizado este libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
Parte 1, “Preparándose” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Parte
2, “Flutter: una vista panorámica” . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Parte 3,
“Detalles, Detalles” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Parte 4, “La
parte de los diez” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 ¡Más en la
web! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 iconos utilizados en
este libro. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Más allá del
libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Dónde ir desde
aquí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
PARTE 1: PREPARÁNDOSE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
CAPÍTULO 1: ¿Qué es Flutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Hardware y software (cosas que quizás ya sepa) . . . . . . . . . . .10 ¿Dónde
encaja Flutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Desarrollo multiplataforma. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15 Un ciclo
de desarrollo rápido y fácil . . . . . . . . . . . . . . . . . . . . . . . . .17 Una gran manera
de pensar en el desarrollo de aplicaciones . . . . . . . . . . . . . . . . . .25 ¡Basta de
nueva terminología! ¿Que sigue? . . . . . . . . . . . . . . . . . . . . . . . . .28
CAPITULO 2: Configuración de su computadora para

Desarrollo de aplicaciones móviles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Las cosas que necesitas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30
Qué hacer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32
Obtener e instalar las cosas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .32 Solo para
usuarios de Mac . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34
Configuración de Android Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .35
Ejecutando su primera aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.36 Tratar con los Detalles del Diablo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43
Sobre la instalación de Android Studio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43 Al
iniciar Android Studio por primera vez . . . . . . . . . . . . . . . . .44 Sobre la instalación
del complemento Flutter de Android Studio . . . . . . . . . . . . . . . . . . .44 Acerca de
agregar dispositivos virtuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46 Sobre la
instalación de Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50
Tabla de contenido viii

División entre dispositivos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .52
Ejecutar aplicaciones en un dispositivo Android. . . . . . . . . . . . . . . . . . . . . . . . . .52
Probar aplicaciones en un dispositivo físico . . . . . . . . . . . . . . . . . . . . . . . . . . . .53
Uso de Android Studio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59
Empezando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59 La ventana
principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60 Ejecución de los
programas de ejemplo de este libro . . . . . . . . . . . . . . . . . . . . . . . . . .63
Disfrutando de las reposiciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65 Si
eres quisquilloso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65 ¿Fueron
divertidos estos pasos de configuración o qué? . . . . . . . . . . . . . . . . . . . . . . . . . .66
PARTE 2: FLUTTER: UNA VISTA DE BURD'S EYE . . . . . . . . . . . . . . . . . . . . . . . 67
CAPÍTULO 3: "Hola" de Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Lo primero es lo primero . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69
¿De que trata todo esto? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .72
Los parámetros de un constructor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75
Una nota sobre la puntuación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .76 No
se aplaque, simplemente sangre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .77
Clases, objetos y widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .79
Un breve tratado sobre la "interioridad". . . . . . . . . . . . . . . . . . . . . . . . . . . . .81
La documentación es tu amiga . . . . . . . . . . . . . . . . . . . . . . . . . . .82 Hacer que
las cosas se vean mejor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
Creando un andamio. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86 Adición de
retoques visuales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .88 Función de
enumeración de Dart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89 ¡Hola desde
la soleada California! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89 Adición de otro
widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91 Centrar el texto (Parte 1)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Centrar el texto (Parte 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Mostrar una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Oye, espera un minuto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
CAPÍTULO 4: Hola de nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

Creación y uso de una función. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106
La declaración de la función. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 Una
llamada de función . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Parámetros y valor de retorno . . . . . . . . . . . . . . . . . . . . . . . . . . .108
Programación en Dart: Pequeñas cosas . . . . . . . . . . . . . . . . . . . . . . . . . .112
Declaraciones y declaraciones. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .112
Función de escritura de Dart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
Literales, variables y expresiones . . . . . . . . . . . . . . . . . . . . . . . . .114
viii Aleteo para tontos

Dos por el precio de uno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .117 Palabra
clave var de Dart . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .119 Tipos
incorporados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121 Tipos que no
están incorporados . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123 Uso de
declaraciones de importación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
Variaciones sobre un tema de Die Flutter Mouse . . . . . . . . . . . . . . . . . .124
Escriba los nombres en las declaraciones de funciones. . . . . . . . . . . . . . . . . . . . . . .
.127 Nombrando sus parámetros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128
¿Qué pasa con la función de construcción? . . . . . . . . . . . . . . . . . . . . . . . . . . . . .129
¡Más diversión por venir! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
Hacer que las cosas sucedan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

CAPÍTULO 5:
Presionemos todos un botón de acción flotante. . . . . . . . . . . . . . . . . . . . . . . . .132

Widgets sin estado y widgets con estado. . . . . . . . . . . . . . . . . . . . . . .134
Los widgets tienen métodos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.135 No prestes atención al marco detrás de la cortina. . . . . . . . .139
Mejora de su aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .146
Más parámetros, por favor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 La
anotación de anulación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
¿Qué significa <Widget>? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152
Funciones anónimas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 Qué
pertenece a dónde . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156
Nombres que comienzan con un guión bajo . . . . . . . . . . . . . . . . . . . . . . .
.160 ¡Uf! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .162
CAPÍTULO 6: Colocar las cosas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

El panorama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .164
Creación de fragmentos de código del tamaño de un bocado. . . . . . . . . . . . . . . . . . . . . . . . . . .
.167 Creación de una lista de parámetros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169 Color
vivo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .170 Adición de
relleno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .171 Su humilde servidor, el widget
Columna . . . . . . . . . . . . . . . . . . . .173 El widget
SizedBox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .175 Tu amigo, el widget
Contenedor . . . . . . . . . . . . . . . . . . . . . . . . . . .176 Anidamiento de Filas y
Columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181 Más niveles de
anidamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183 Uso del widget
ampliado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Ampliado frente a no ampliado El. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
widget ampliado salva el día . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Flexionando algunos músculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196

¿Qué tan grande es mi dispositivo? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199
Tabla de contenido ix
PARTE 3: DETALLES, DETALLES . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
CAPÍTULO 7: Interactuando con el Usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Un Cambio Sencillo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208
La palabra clave const de Dart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.211 Compatible o NO? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
¡Espéralo! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .214 ¿Cuánto
te gusta Flutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .217 Manejo de campos de
texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220
Llamadas 1 y 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .223
Llamada 3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Llamada 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226
Llamada 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Creación de botones de opción. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230

Creación de una enumeración. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
Construyendo el grupo de radio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .233
Visualización de la elección del usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .235
Creación de un botón desplegable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239
Construyendo el botón desplegable. . . . . . . . . . . . . . . . . . . . . . . . . . . . .242 El
pequeño botón Reset . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244 Elaboración
de un mapa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .245 Hacia
adelante y hacia arriba . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .246
CAPÍTULO 8: Navegación, listas y otras ventajas . . . . . . . . . . . . . . . 247

Ampliación de una clase Dart. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.248 De una página a otra . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251
Un icono en un botón. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .254
Empujar y hacer estallar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255
Transferencia de datos del origen al destino . . . . . . . . . . . . . . . . . . . . . . .256
Pasar datos de regreso a la fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261
Las palabras clave async y await de Dart. . . . . . . . . . . . . . . . . . . . . . . . . . .264
Tomar el control del botón Atrás de la barra de aplicaciones . . . . . . . . . . . . . . . . .
.266 Pasar datos en ambas direcciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .267
Creación de rutas con nombre . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272
Creación de una lista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276
El widget ListView. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279 Creación
de elementos de lista uno por uno . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .285
Otra característica nueva del lenguaje Dart . . . . . . . . . . . . . . . . . . . . . . . . .288
Obtención de datos de Internet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .290
Usando una API pública. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293
Envío de una URL a un servidor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295
Dar sentido a una respuesta JSON . . . . . . . . . . . . . . . . . . . . . . . . . .296 ¿Qué
sigue? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296
X Aleteo para tontos

Moviéndose a la derecha a lo largo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
CAPÍTULO 9:
Preparando el escenario para la animación Flutter. . . . . . . . . . . . . . . . . . . . . . . . .297

Moviéndose a lo largo de una línea recta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303
Rebotando . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .308 Animación de
cambios de tamaño y color . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310 Moviéndose a lo
largo de una curva . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .312 Arrastrando
Cosas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .314 Dónde ir desde
aquí . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319
PARTE 4: LA PARTE DE LAS DIEZ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

CAPÍTULO 10: Diez maneras de evitar errores . . . . . . . . . . . . . . . . . . . . . . . . . . 323
Ponga letras mayúsculas donde correspondan. . . . . . . . . . . . . . . . . . . . . . . . .323 Use
paréntesis cuando (y solo cuando) sean apropiados . . . . .323 Limitar el acceso a las
variables. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324 Llamar a establecer
Estado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .324 Realización de
ajustes para índices que comienzan en cero . . . . . . . . . . . . . . . . . . .324 Usar el widget
ampliado . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325 Agregar itemCount a su
ListView .builder . . . . . . . . . . . . . . . . . . . . . . . .325 Agregue importaciones cuando sea
necesario . . . . . . . . . . . . . . . . . . . . . . . . . . .325 Declarar activos y dependencias en
pubspec .yaml . . . . . . . . . . . . . . 325 Aplique sangría a su código de acuerdo con las
pautas del lenguaje Dart . . . . . . . . .326
CAPÍTULO 11: Diez formas de mejorar su aplicación

Carrera de desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327
¡Práctica! ¡Práctica! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327
Critique su propio código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .328 Haga
que otros revisen su código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .328 Averigüe
qué tecnologías utilizan sus empresas cercanas . . . . . . .328 Asistir a reuniones
de grupos de usuarios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .328 Haga
preguntas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329 Pregúntese
si realmente entiende . . . . . . . . . . . . . . . . . . . .329 Aprenda cosas que tal vez
nunca necesite saber . . . . . . . . . . . . . . . .329 Haz lo que te gusta
hacer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 Duerma lo
suficiente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .330
CAPÍTULO 12: Diez capítulos sobre el desarrollo de aplicaciones de Flutter . . . . 331

Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .331 ¿Qué es
Flutter? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .331 Configuración
de su computadora para el desarrollo de aplicaciones móviles . . . . . . . . . .332
'Hola' de Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332 Hola de
nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332 Hacer que las
cosas sucedan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332
Tabla de contenido xi
Poner las cosas fuera. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332
Interactuando con el Usuario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332
Navegación, listas y otras ventajas . . . . . . . . . . . . . . . . . . . . . . . . . . .333 Moviéndose a
lo largo de la derecha . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .333
PARTE 5: APÉNDICES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

APÉNDICE: Aplicación de citas de Doris . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
ÍNDICE . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
xi Aleteo para tontos

Introducción
O
l 5 de diciembre de 2018, en un evento anual de desarrolladores en Londres,
Google anunció el lanzamiento de Flutter 1.0. Entre el 5 de diciembre y finales de
diciembre, el número de visitas a la página del sitio web oficial de flutter.io
saltó de 2,3 millones a 4,7 millones. En el año siguiente, la cantidad de publicaciones sobre
Flutter en el sitio web de desarrolladores de Stack Overflow aumentó en un 70 por ciento,
superando la cantidad de publicaciones sobre React Native, la alternativa más popular a Flutter.
Empresas como Capital One, Alibaba, Groupon y Philips Hue usan Flutter para desarrollar
aplicaciones móviles. La aplicación oficial del musical.hamiltonestá escrito usando Flutter. El
próximo sistema operativo móvil de Google, cuyo nombre en código es Fuchsia, se basa en
Flutter. Se estima que 200 millones de usuarios ejecutan aplicaciones escritas en Flutter. Más de
250 000 desarrolladores escriben código de Flutter y Google Play Store tiene más de 3000
aplicaciones de Flutter.
¿Estás interesado en desarrollar aplicaciones de Flutter? Si es así, estás en buena compañía.
Como usar este libro

Puedes atacar este libro de dos maneras: Ir de tapa a tapa o hurgar de un capítulo a otro.
Incluso puedes hacer ambas cosas. Comience desde el principio y luego salte a una
sección que le interese particularmente. Este libro fue diseñado para que los temas
básicos sean lo primero y los temas más complicados los sigan. Pero es posible que ya se
sienta cómodo con algunos conceptos básicos, o que tenga objetivos específicos que no
requieran que sepa sobre ciertos temas.
En general, mi consejo es este:
»Si ya sabes algo, no te molestes en leer al respecto.

»Si tiene curiosidad, no tenga miedo de adelantarse. Siempre puedes echar un vistazo a
un capítulo anterior, si es necesario.
Introducción 1
Las convenciones usadas en este libro
Casi todos los libros de temática técnica comienzan con una pequeña leyenda tipográfica, y
Aleteo para tontosno es una excepción. Lo que sigue es una breve explicación de los tipos de
letra utilizados en este libro:
»Se establecen nuevos términos encursiva.
»Si necesita escribir algo que se mezcle con el texto normal, los caracteres
escribe aparecen en negrita. Por ejemplo: “TipoMiNuevoProyectoen el campo de texto.”
»Tu también ves estoinformaticofuente. yo sueloinformaticopara el código Flutter,

nombres de archivos, mensajes en pantalla y otros textos similares. Además, si algo que necesita
escribir es muy largo, aparece en fuente informática en su propia línea (o líneas).
»Es posible que deba cambiar ciertos caracteres cuando los escriba por su cuenta
teclado. Por ejemplo, puedo pedirle que escriba
cadena finalcualquier nombre;
lo que significa que escribescadena final, y luego un nombre que inventes por tu cuenta, y
luego un punto y coma. Las palabras que necesita reemplazar con sus propias palabras se
establecen encursiva informática.
Lo que no tienes que leer

Elija el primer capítulo o sección que tenga material que aún no conozca y comience a
leer allí. Por supuesto, puede que odies tomar decisiones tanto como yo. Si es así, aquí
hay algunas pautas que puede seguir:
»Si ya sabes que tipo de animal es Flutter y no te importa

qué sucede detrás de escena cuando se ejecuta una aplicación Flutter:Omita el Capítulo 1 y
vaya directamente al Capítulo 2. Créame, no me importará.
»Si ya sabe cómo ejecutar una aplicación Flutter:Omita la Parte 1 y comience

con la Parte 2.
»Si ya ha jugado con algunas aplicaciones simples de Flutter:Pasar rozando

Capítulo 1, y luego vaya a la Parte 3. El Capítulo 1 reúne los fragmentos que ha
leído sobre Flutter, y la Parte 3 lo lleva más allá de lo básico.
»Si tienes experiencia escribiendo aplicaciones de Flutter:ven a mi casa y ayuda

yo escriboAleteo para tontos, 2ª edición.
Si desea omitir las barras laterales y los párrafos con íconos de Material técnico, hágalo.
De hecho, si quieres saltarte algo, siéntete libre.
2 Aleteo para tontos

suposiciones tontas
En este libro, hago algunas suposiciones sobre usted, el lector. Si una de estas suposiciones es
incorrecta, probablemente esté bien. Si todas estas suposiciones son incorrectas. . . Bueno,
compre el libro de todos modos:
»Supongo que tienes acceso a una computadora.El acceso a un teléfono inteligente es

útil pero no absolutamente necesario. Todo el software que necesita para probar las aplicaciones
Flutter en una computadora portátil o de escritorio está disponible gratuitamente. Simplemente
descargue, instale y comience.
»Supongo que puede navegar por los menús comunes de su computadora y

Cuadros de diálogo.No es necesario que sea un usuario avanzado de Windows o Macintosh,
pero debería poder iniciar un programa, encontrar un archivo, colocar un archivo en un
directorio determinado, ese tipo de cosas. La mayor parte del tiempo, cuando sigue las
instrucciones de este libro, está escribiendo código en el teclado, no apuntando y haciendo clic
con el mouse.
En aquellas ocasiones en las que necesite arrastrar y soltar, cortar y pegar o conectar y usar, lo
guío cuidadosamente a través de los pasos. Pero su computadora puede estar configurada de
varios miles de millones de formas, y es posible que mis instrucciones no se ajusten a su situación
especial. Cuando llegue a una de estas tareas específicas de la plataforma, intente seguir los pasos
de este libro. Si los pasos no encajan del todo, consulte un libro con instrucciones adaptadas a su
sistema. Si no puede encontrar un libro así, envíeme un correo electrónico. (Mi dirección aparece
más adelante en la introducción).
»Supongo que puedes pensar lógicamente.Eso es todo lo que hay para la aplicación.
desarrollo — pensar lógicamente. Si puedes pensar lógicamente, lo tienes hecho. Si
no cree que puede pensar lógicamente, siga leyendo. Puede que te sorprendas
gratamente.
»Hago muy pocas suposiciones sobre la programación de su computadora

experiencia (o su falta de dicha experiencia).Al escribir este libro, he tratado de hacer lo
imposible: hacer que el libro sea interesante para programadores experimentados pero
accesible para personas con poca o ninguna experiencia en programación. Esto significa
que no asumo ningún conocimiento de programación en particular de su parte. Si nunca
has escrito ningún código, está bien.
Por otro lado, si ha hecho algo de codificación (tal vez en Java, Python o C++), descubrirá
algunos giros de trama interesantes en Dart, el lenguaje que se usa para desarrollar
aplicaciones de Flutter. Los creadores de Dart tomaron las mejores ideas de la
programación orientada a objetos y la programación funcional, las simplificaron, las
modificaron y las reorganizaron en una forma simple pero poderosa de pensar en los
problemas. Disfrutarás programando en Dart.
Introducción 3
Cómo está organizado este libro
Este libro está dividido en subsecciones, que se agrupan en secciones, que se unen para
formar capítulos, que finalmente se agrupan en cuatro partes (como una de esas
matrioskas rusas). Las partes del libro se describen aquí.
Parte 1, “Preparándose”
La Parte 1 cubre todas las tuercas y tornillos. Le presenta las ideas principales detrás del
desarrollo de aplicaciones móviles y lo guía a través de la instalación de los productos de
software necesarios.
Las instrucciones de estos capítulos cubren tanto las computadoras con Windows como las Macintosh.
Abarcan muchas configuraciones informáticas con todo tipo de software ya instalado. Pero agregar
nuevo software siempre es complicado y es posible que tenga algunos obstáculos que superar. Si es
así, consulte el final de este capítulo para encontrar formas de comunicarse conmigo (el autor) y
obtener algunos consejos rápidos. (Sí, respondo correos electrónicos, tweets, publicaciones de
Facebook y notas enviadas por palomas mensajeras).
Parte 2, "Flutter: una vista de Burd's-Eye"

Los capítulos 3 y 4 cubren los componentes básicos de Flutter. Estos capítulos describen algunas
aplicaciones sencillas de Flutter y presentan los fundamentos del lenguaje de programación Dart.
Si ha creado aplicaciones específicamente para Android o iOS, es posible que parte del material
de la Parte 2 le resulte familiar. Si es así, puede omitir secciones o leer este material
rápidamente. Pero no lea demasiado rápido. Flutter es diferente de la mayoría de los otros
marcos de desarrollo, y vale la pena señalar las diferencias de Flutter.
Parte 3, “Detalles, Detalles”

Si ha probado un poco de Flutter y quiere más, puede encontrar lo que necesita en la Parte 3 de este
libro. Los capítulos de esta parte cubren los componentes básicos de una aplicación sólida y útil:
tareas como responder a la entrada del usuario, diseñar los componentes de su aplicación, navegar de
una página a otra, obtener datos de Internet y más.
Parte 4, “La parte de los diez”

En The Part of Tens, que es una pequeña tienda de golosinas Flutter, puedes encontrar listas:
listas de consejos para evitar errores, rastrear recursos y encontrar todo tipo de golosinas
interesantes.

¡Más en la web!
Has leído elAleteo para tontoslibro, visto elAleteo para tontospelícula, usó elAleteo para
tontoscamiseta, y se comió laAleteo para tontosdulce. ¿Qué más hay que hacer?
Eso es fácil. Simplemente visite el sitio web de este libro:www.allmycode.com/Flutter.Allí puede

encontrar actualizaciones, comentarios, información adicional y respuestas a las preguntas más
frecuentes de los lectores. También puede encontrar una pequeña aplicación de chat para enviarme
preguntas rápidas cuando estoy en línea. (Cuando no estoy en línea, puede comunicarse conmigo de
otras formas. Consulte el final de este capítulo para obtener más información).
Iconos utilizados en este libro
Si pudieras verme escribir este libro, me verías sentado frente a mi computadora, hablando
conmigo mismo. Digo cada oración en mi cabeza. La mayoría de las frases las murmuro varias
veces. Cuando tengo un pensamiento adicional, un comentario adicional o algo que no
pertenece a la corriente normal, giro un poco la cabeza. De esa manera, quienquiera que me
esté escuchando (generalmente, nadie) sabe que me estoy yendo por la tangente
momentánea.
Por supuesto, impreso, no puedes verme torciendo la cabeza. Necesito alguna otra forma de dejar un
pensamiento secundario en un rincón por sí mismo. Yo lo hago con iconos. Cuando vea un icono de
Sugerencia o un icono de Recordar, sabrá que me estoy desviando rápidamente.
Aquí hay una lista de íconos que uso en este libro:
Un consejo es una pieza adicional de información, un consejo útil que los otros libros pueden
olvidar decirle.
Todos cometemos errores. Dios sabe que he hecho algunos en mi tiempo. De todos modos, cuando
creo que las personas son especialmente propensas a cometer un error, marco el texto con un icono
de Advertencia.
Puedes pensar en la palabraRecuerdaen dos contextos diferentes. Un contexto es:

"Recuerde hacer esto bueno en su código y recuerde no hacer eso malo en su código".
Otro contexto es: “Cuando se dé cuenta de que no está haciendo algo bueno o que está
haciendo algo malo, recuerde que puede leer sobre ello en la sección que contiene este
ícono”. Personalmente, prefiero el último contexto porque reconoce que todo el mundo
olvida cosas. Cuando olvide algo, simplemente regrese y búsquelo.
Introducción 5
“Si no recuerdas lo que significa tal o cual cosa, consulta bla, bla, bla” o “Para obtener más
información, lee bla, bla, bla”.
Este ícono llama la atención sobre material útil que puede encontrar en línea. (No tiene
que esperar mucho para ver uno de estos íconos. ¡Uso uno al final de esta introducción!)
De vez en cuando, me encuentro con un dato técnico. El dato puede ayudarlo a

comprender lo que pensaban las personas detrás de escena (las personas que crearon
Java). No tienes que leerlo, pero puede que te resulte útil. También puede encontrar útil el
dato si planea leer otros libros (más geek) sobre Flutter.
Más allá del libro

Además de lo que está leyendo en este momento, este libro viene con una hoja de trucos de acceso
gratuito en cualquier lugar que contiene un código que puede copiar y pegar en su propio programa
Flutter. Para obtener esta hoja de trucos, simplemente vaya awww.dummies.comy tipoHoja de
referencia de Flutter para Dummiesen el cuadro de búsqueda.
A dónde ir desde aquí

Si has llegado hasta aquí, estás listo para empezar a leer sobre el desarrollo de aplicaciones de
Flutter. Piense en mí (el autor) como su guía, su anfitrión, su asistente personal. Hago todo lo
que puedo para mantener las cosas interesantes y, lo más importante, para ayudarte a
entender.
Si te gusta lo que lees, envíame una nota. Mi dirección de correo electrónico, que creé solo para
comentarios y preguntas sobre este libro, esflutter@allmycode.com. Si el correo electrónico y
el chat no son tus favoritos, puedes contactarme en Twitter (@todomicódigo) y en facebook (/
todomicódigo).Y no se olvide: para obtener las últimas actualizaciones, visite el sitio web de
este libro. La dirección directa del sitio eswww.allmycode.com/flutter. Alternativamente,
puede visitarwww.allmycode.comy encontrar enlaces a todas las páginas web de mis libros.
¡Basta ya de introducción! Adelante a Flutter. . . .

1
preparándose
EN ESTA PARTE . . .
Trabajando a través de los aspectos prácticos del desarrollo de
aplicaciones móviles
Preparando su computadora de desarrollo
Ejecución de programas de muestra

EN ESTE CAPÍTULO
»Lo que hace genial a Flutter
»Alternativas a Flutter
»Algo de terminología aburrida :-(
Capítulo1
¿Qué es Flutter?
S
Hace varios años, gané un teléfono inteligente en una rifa en una conferencia de
desarrolladores de aplicaciones. ¡Qué alegría fue ganar algo! La experiencia me hizo sentir que
todo el cosmos me favorecía. Cada vez que usaba ese teléfono, me sentía como un pez gordo.
Eventualmente, la batería del teléfono se debilitó tanto que tuve que cargarla cada hora. No me
di cuenta de que el teléfono todavía estaba en garantía, así que traté de reemplazar la batería
del teléfono yo mismo. Compré una batería nueva de un proveedor en línea. Las instrucciones
me decían cómo desarmar la caja, desenganchar las conexiones del circuito y quitar la batería
vieja de su soporte.
Todo salió bien hasta la parte de quitar la batería vieja. Las instrucciones decían que tirara de
una pequeña pestaña, pero no pude encontrar una pestaña. Entonces, intenté durante varios
minutos controlar la batería.
La batería no se movía, así que encontré un pequeño destornillador e intenté sacar la batería
de su apretado entorno. Fue entonces cuando escuché un estallido, olí humo y me di cuenta de
que la batería del teléfono se había incendiado.
Avance rápido a la tarde siguiente. Pasaba por delante de una tienda de electrónica, así
que entré y pregunté si el comerciante podría arreglar mi teléfono. "Sí", dijo. “Tráelo la
próxima vez que estés en el vecindario. Puedo arreglar cualquier teléfono.
CAPÍTULO 1¿Qué es Flutter? 9

Deberías haber visto la mirada en el rostro del comerciante cuando, más tarde ese día,
traje el teléfono carbonizado, doblado y apenas reconocible. Habría incluido una foto en
este libro pero, por desgracia, no pude tomar una foto. No tenía teléfono.
Todavía recuerdo esta historia de la batería del teléfono de principio a fin. Recuerdo la alegría de
ganar un teléfono gratis, la conmoción de verlo arder en llamas y la mirada de horror en el rostro del
comerciante. Pero mi recuerdo más poderoso proviene del momento en que abrí la carcasa del
teléfono: dentro de esa pequeña carcasa, vi suficientes circuitos para marearme. Habiendo hecho
algunos trabajos eléctricos en mi propia casa, había manejado cables gruesos de calibre 10 y
conectores pesados de 220 voltios. Reemplacé las tarjetas de sonido de las computadoras de
escritorio, los discos duros de las computadoras portátiles y el SSD dentro de una MacBook Air muy
apretada. Pero este teléfono inteligente fue increíble. La placa de circuito parecía un microchip por
derecho propio. Los conectores eran tan pequeños que me preguntaba cómo las señales podían pasar
a través de ellos de manera confiable.
No hay duda al respecto: los teléfonos móviles son bestias complicadas. Asique, como trabajan? ¿Qué
los hace funcionar? ¿Qué está pasando dentro de cada uno de esos aparatos extraordinarios?
Hardware y software (cosas que

quizás ya sepa)
Un teléfono móvil es realmente una pequeña computadora. Y, como cualquier computadora, un
teléfono móvil opera en varias capas. La Figura 1-1 le muestra algunas de esas capas.
Hardwarees lo que puedes tocar. Es la capa inferior del diagrama de la Figura 1-1. El
hardware consta de elementos como los circuitos, la memoria y la batería.
Las señales eléctricas que viajan a lo largo de los circuitos del hardware hacen que el hardware haga
lo que usted quiere que haga. Estas señales codifican instrucciones. En su conjunto, estas
instrucciones se denominansoftware.
Cuando las personas crean software, no describen cada señal eléctrica que viaja a través
de los circuitos del hardware. En cambio, la gente escribecódigo fuente— instrucciones
que se parecen a las instrucciones en inglés. Una instrucción de código fuente puede ser
una abreviatura de cientos o miles de señales eléctricas.
Una colección de instrucciones de código fuente que realizan una tarea particular (procesamiento de
textos, navegación web, administración de un termostato inteligente o lo que sea) se denomina
programa. Una persona que escribe estas instrucciones es unprogramadoro, un término que suena
más elegante, undesarrollador. La persona que ejecuta un programa en su propio dispositivo es un
usuario.
10 PARTE 1preparándose
FIGURA 1-1:
un concepto
vista de tu
teléfono móvil.
Así como las personas se comunican usando muchos lenguajes hablados, los programadores
escriben código fuente usando muchoslenguajes de programación. Si crea aplicaciones para
iPhone, probablemente escriba código en el lenguaje Swift o en el lenguaje Objective-C. Si crea
aplicaciones de Android, es probable que escriba código en Kotlin o Java.
Cuando crea una aplicación Flutter, escribe código en el lenguaje de programación Dart. Aquí
hay un programa completo de lenguaje Dart:
main() => print('Hola');
Este programa muestra la palabraHolaen la pantalla. No es muy útil, pero tenga

paciencia. ¡Este es solo el Capítulo 1!
La Figura 1-1 distingue entre dos tipos de software:
»Sistema operativo(OS) se ejecuta cada vez que se enciende el dispositivo.

El software del sistema operativo administra el dispositivo y proporciona formas para que el usuario
interactúe con el dispositivo. Los dispositivos fabricados por Apple, como iPhones y iPads, ejecutan el
iOSsistema operativo. Los teléfonos y tabletas Android ejecutan elAndroidesistema operativo (por
supuesto).

»Programas de aplicaciónhacer el trabajo que los usuarios quieren que se haga.
Las aplicaciones para realizar llamadas telefónicas, las aplicaciones para leer el correo electrónico, las aplicaciones
de calendario, los navegadores web y los juegos son ejemplos de programas de aplicación. Como desarrollador de
Flutter, su trabajo es crear programas de aplicación.
Según una estimación, el popular sistema operativo llamado Linux consta de casi 28 millones
de instrucciones. Nadie puede lidiar con tanto código, por lo que los sistemas operativos se
dividen en capas propias. La figura 1-1 muestra solo cuatro de las muchas capas de un sistema
operativo típico:
»Anúcleorealiza las tareas más fundamentales del sistema operativo.

El kernel programa la ejecución de las aplicaciones, administra la memoria y los archivos de un
dispositivo, brinda acceso a la entrada y la salida, y realiza muchas otras tareas esenciales.
»Atiempo de ejecuciónes un montón de código que hace un trabajo adicional en segundo plano
mientras se ejecuta su programa de aplicación.
Los tiempos de ejecución vienen en muchas formas y tamaños. Un tiempo de ejecución para el lenguaje
de programación C consta de una cantidad de código relativamente pequeña. Por el contrario, un tiempo
de ejecución del lenguaje Java (unMáquina virtual de Java,oJVM) es una gran pieza de software con muchas
partes móviles.
Cuando ejecuta una aplicación de iOS, la aplicación utiliza eltiempo de ejecución de Objective-C. Cuando ejecuta una aplicación
de Android, esa aplicación utiliza elTiempo de ejecución de Android, también conocido comoARTE.
»UnInterfaz de programación de aplicaciones(API) es un montón de código que la aplicación

los desarrolladores usan una y otra vez.
Por ejemplo, la API de Android tiene algo llamadoa Mayúsculas.si aplicas

aMayúsculasa "aleteo para tontos",usted obtiene "FLUTTER PARA DUMMIES".No tienes que
escribir tu propio código para cambiar cada una de las letras. La API de Android proporciona
esta funcionalidad para usted. Todo lo que tienes que hacer es decirle a la API de Android que
aplique suaMayúsculascaracterística, y luego ya está todo listo.
He aquí alguna terminología útil: en lugar de decirle a una API que "aplique su
aMayúsculascaracterística”, ustedllamara Mayúsculas.Este uso de la palabrallamar se
remonta al lenguaje de programación FORTRAN de la década de 1950.
Los sistemas operativos no han acaparado el mercado de las API. Todos los tipos de
software vienen con API. Flutter y Dart tienen sus propias API.
La API de Dart tiene cosas de propósito general, comoen mayúsculas, es en el mismo

momento que, y un montón de otros. La API de Flutter tiene funciones que se aplican a
aplicaciones orientadas visualmente. Por ejemplo, cuando desea mostrar un cuadro donde el
usuario puede escribir texto, no tiene que describir todos los aspectos de la apariencia y el
comportamiento del cuadro. En su lugar, puede llamar a las APICampo de textoconstructor y haz
que Flutter haga el trabajo duro por ti.
A veces me refiero a una API comobiblioteca. Toma prestados libros de una
biblioteca pública y toma prestado el código existente de las API de Dart y Flutter.
En la terminología de programación de Dart, la palabrabibliotecatiene un significado ligeramente

diferente. No tienes que preocuparte por eso todavía.
A lo largo de la mayor parte de este libro, describo partes de las API de Dart y Flutter y
luego la forma en que usa esas partes para crear programas de Flutter.
Una API típica tiene miles de piezas. Nadie los memoriza todos. Cuando desee agregar una
imagen a su aplicación, abra la documentación de Flutter y busque la palabraImagen.la
documentacionImagenpágina le dice cómo mostrar una imagen, cómo cambiar el
tamaño de una imagen, cómo colocar una imagen en mosaico y cómo hacer todo tipo de
otras cosas buenas.
»losinterfaz de usuario del sistema operativoes el área que incluye la pantalla de inicio, el
íconos de lanzamiento, un explorador de archivos y cualquier otra cosa que los usuarios vean cuando no
están trabajando con un programa de aplicación en particular.
En su computadora portátil, probablemente tenga unescritorioen lugar de una pantalla de inicio. De
una forma u otra, el sistema operativo presenta opciones para ayudar a los usuarios a iniciar
programas de aplicación y realizar otras tareas de mantenimiento. Estas opciones forman parte de la
interfaz de usuario del sistema operativo.
Cada capa en la Figura 1-1 contiene una colección de componentes relacionados. Esto
ayuda a los programadores a centrarse en los componentes que más les preocupan, por
ejemplo:
»La API tiene código para ayudar a los desarrolladores a escribir programas de aplicación.
Un desarrollador que está creando una aplicación de compras en línea busca componentes en la
API.
»La capa Runtime tiene código para ejecutar programas de manera eficiente.
Para hacer que el código de todos se ejecute más rápido, los ingenieros de Apple realizan mejoras en la capa de
tiempo de ejecución de iOS.
Además de separar partes del código entre sí, las capas forman rutas organizadas de
comunicación entre partes del sistema. En general, el código de una capa se comunica solo con
las capas inmediatamente superiores e inferiores. Por ejemplo, un usuario toca un botón que
pertenece a una aplicación meteorológica. La aplicación responde recurriendo a la
funcionalidad proporcionada por la API. La comunicación se abre camino hacia abajo en el
diagrama de la Figura 1-1 hasta que llega al hardware, que responde cambiando los píxeles en
la pantalla del dispositivo. Un usuario nunca se comunica directamente con la API y los
programas de aplicación no tienen acceso directo al kernel del sistema operativo.

CÓDIGO QUE PUEDE UTILIZAR
A principios de la década de 1980, mi primo político, Chris, trabajaba para una empresa de software informático. La
empresa escribió el código para las máquinas de procesamiento de textos. (En ese momento, si quería redactar
documentos sin una máquina de escribir, compraba una “computadora” que no hacía nada más que
procesamiento de textos). Chris se quejó de que le pedían que escribiera el mismo código una y otra vez. “Primero,
escribo un programa de búsqueda y reemplazo. Luego escribo un corrector ortográfico. Luego escribo otro
programa de búsqueda y reemplazo. Luego, un tipo diferente de corrector ortográfico. Y luego un mejor programa
de búsqueda y reemplazo”.
¿Cómo se las arregló Chris para mantenerse interesado en su trabajo? ¿Y cómo se las arregló el
empleador de Chris para mantenerse en el negocio? Cada pocos meses, Chris tenía que reinventar la
rueda: desechar el viejo programa de buscar y reemplazar y escribir un nuevo programa desde cero.
Eso es ineficiente. Lo que es peor, es aburrido.
Durante años, los profesionales de la informática buscaban el santo grial: una forma de escribir software
para que fuera fácil de reutilizar. No escriba y reescriba su código de búsqueda y reemplazo. Solo divide la
tarea en pedazos pequeños. Una parte del código busca un solo carácter, otra parte busca espacios en
blanco y una tercera parte sustituye una letra por otra. Cuando tenga todas las piezas, simplemente
ensamble estas piezas para formar un programa de búsqueda y reemplazo. Más adelante, cuando piense
en una nueva función para su software de procesamiento de textos, vuelva a ensamblar las piezas de una
manera ligeramente diferente. Es sensato, rentable y mucho más divertido.
A fines de la década de 1980, se produjeron varios avances en el desarrollo de software y, a principios de la década de 1990,
se estaban escribiendo muchos proyectos de programación importantes a partir de componentes prefabricados. Para un
proyecto en particular o un lenguaje de programación en particular, estos componentes prefabricados formaron una
biblioteca de código reutilizable. Este fue el nacimiento de la API moderna.
Cuando crea una aplicación Flutter, utiliza el lenguaje de programación Dart. Dart y Flutter
tienen API separadas:
• La API de Dart se ocupa de las tareas que todo lenguaje de programación debería poder
realizar, sin importar lo que los programadores quieran hacer con ese lenguaje.
Por ejemplo, la API de Dart ayuda a los programadores a redondear un número, recortar una cadena
de caracteres, describir un intervalo de tiempo, invertir una lista, etc.
• La API de Flutter se ocupa de la presentación de componentes e imágenes en la pantalla

de un dispositivo.
Una parte de la API de Flutter se ocupa de los botones, campos de texto, casillas de verificación y
similares. Otra parte maneja los gestos de un usuario. Otro cubre la animación.
Cada programa de Dart, incluso el más simple, recurre al código de la API de Dart, y cada
aplicación de Flutter recurre a las API de Dart y Flutter. Estas API son útiles y formidables. Son
útiles por todas las cosas que puede hacer con el código API. Son formidables porque ambas API
son extensas. Nadie memoriza todas las funciones disponibles gracias a las API de Dart y Flutter.
Los programadores recuerdan las funciones que usan con frecuencia y buscan las funciones que
necesitan en un apuro. Buscan estas características en un sitio web llamadoDocumentación de
referencia de la API de Flutter.
La documentación de la API (verhttps://.api.flutter.dev)describe las características

de las API de Dart y Flutter. Como desarrollador de Flutter, consulta esta
documentación de la API a diario. Puede marcar el sitio web y volver a visitarlo cada
vez que necesite buscar algo.
¿Dónde encaja Flutter?

El corazón de Flutter es una API para crear aplicaciones. La mayoría de las aplicaciones de Flutter se ejecutan en
dispositivos móviles, pero las aplicaciones de Flutter también se pueden ejecutar en computadoras portátiles y de
escritorio. Flutter ciertamente no fue la primera API para dispositivos móviles, entonces, ¿por qué alguien debería
considerar usar Flutter para crear aplicaciones?
Desarrollo multiplataforma
Mi hamburguesería favorita anunció una nueva aplicación de pedidos móviles. Necesitaba la
aplicación para poder bajar rápidamente de un tren suburbano, tomar una hamburguesa y correr a
una reunión técnica cercana. Hice esto varias veces cada mes. Pero tenía un problema: la aplicación
solo se ejecutaba en iPhones y yo tenía un teléfono con Android.
Detrás de escena, los desarrolladores de aplicaciones de la hamburguesería trabajaron

arduamente para convertir su aplicación para iPhone en una aplicación para Android.
Esta no fue una tarea menor, porque la API de Android no reconoce los mismos
comandos que la API de iPhone. Pasar de una API a otra no es sencillo. No se trata de
hacer cambios de código de rutina. Para convertir de un tipo de teléfono a otro, los
desarrolladores reescriben miles (y tal vez incluso millones) de líneas de código. El
proceso es lento y costoso.
Así que esperé y esperé a que el restaurante tuviera una aplicación para Android. Estaba tan
desesperado por una deliciosa hamburguesa con queso que finalmente me derrumbé y compré un
segundo teléfono. Pero resultó ser una mala idea. Tan pronto como llegó mi nuevo iPhone, la
hamburguesería lanzó su nueva y brillante aplicación para Android.

Toda la historia se reduce a cosas llamadas plataformas. La gente lanza la palabraplataforma
como si la palabra significara todo y nada. Pero en mi opinión, un plataformaes un sistema
operativo particular junto con el hardware en el que se ejecuta el sistema operativo.
¿Qué hace que la plataforma Android sea diferente de su contraparte iOS? Para crear
botones de radio en la API de Android, escribe código del siguiente tipo:
<Grupo de radio>
<Botón de opción
android:id="@+id/radioButton1"
android:text="Rojo"
android:onClick="onRadioButtonClicked"/>
<Botón de opción
android:text="Amarillo"
<Botón de opción
android:text="Verde"
</Grupo de radio>
Intenta convertir ese código para que funcione en un iPhone. La API de iOS no tiene botones de
opción, por lo que, para adaptar una aplicación de Android con botones de opción para iOS, debe
escribir código para que parezcan botones de opción. También codifica reglas para que sigan los
botones de radio, reglas como "solo se puede seleccionar un botón a la vez". Si no desea crear
botones de radio desde cero, puede reemplazar los botones de radio de Android con un componente
de selección de iOS, algo que se parece a un viejo odómetro de automóvil. De una forma u otra,
reemplazar los componentes de una aplicación lleva tiempo y cuesta dinero.
Algunas empresas se dan por vencidas y crean aplicaciones para una sola plataforma: iPhone o
Android. Otras empresas contratan dos equipos de programadores, uno para el desarrollo de
iPhone y otro para el desarrollo de Android. Otras empresas tienen un equipo de
programadores que trabajan en ambas versiones del código. Para los directivos de las
empresas, el problema es desesperante. ¿Por qué gastar casi el doble de dinero y crear dos
aplicaciones que hacen casi las mismas cosas?
La comunidad de desarrolladores tiene nombres para esta desagradable situación:
»El software escrito para una plataforma no escompatiblecon otras plataformas.
dieciséis PARTE 1preparándose

»El campo de la telefonía móvil sufre defragmentación: El mercado está dividido
entre dos sistemas operativos diferentes, y la mitad de Android se divide entre los
teléfonos de muchos proveedores.
Un programa que hace uso directo de la API de Android o iOS se llamacódigo nativoy el código nativo
escrito para Android no se puede ejecutar en un dispositivo iOS. De la misma manera, el código nativo
escrito para iOS no tiene sentido para un dispositivo Android. ¿Qué debe hacer un desarrollador?
Un marco es una API de segundo nivel. ¿Qué diablos significa eso? Aestructuraes una API
que sirve como intermediario entre el desarrollador y alguna otra API. Si el uso directo de
la API de Android o iOS es problemático, cambie a la API de un marco. La API del marco se
enfrenta directamente a los problemas de Android e iOS.
Frameworks como Flutter ofrecen una alternativa al desarrollo de aplicaciones nativas. Cuando
escribe un programa Flutter, no escribe código específicamente para Android o iOS. En su
lugar, escribe código que se puede traducir a las llamadas a la API de cualquiera de los
sistemas. Así es como se crean botones de radio en el marco Flutter:
Radio(
valor: TrafficLight.Red,
valor de grupo: _trafficLightValue,
onChanged: _updateTrafficLight,
),
Radio(
valor: TrafficLight.Yellow,
),
Radio(
valor: TrafficLight.Green,
)
Su computadora traduce el código de este tipo en llamadas a la API de Android o llamadas a la API de
iOS, o ambas. ¡Eso es genial!
Un ciclo de desarrollo rápido y fácil

Es posible que haya escuchado historias sobre los primeros días de la programación de computadoras.
Trabajé durante algunos veranos en el departamento de Física de la Universidad de Pensilvania. Escribí
programas FORTRAN y los escribí yo mismo en una gran baraja de tarjetas perforadas. Un programa de 600
líneas pesaba alrededor de 1400 gramos (aproximadamente 3 libras).

UNA BREVE HISTORIA
Hace 130.000 años:Los humanos primero caminan por la tierra.
Hace 10.000 años:Los humanos comienzan a cultivar.
1752:Ben Franklin descubre la electricidad.
1760:Comienza la Revolución Industrial.
10 de marzo de 1876:Alexander Graham Bell hace la primera llamada telefónica.
3 de abril de 1973:Martin Cooper hace la primera llamada de teléfono móvil.
16 de agosto de 1994:BellSouth Cellular lanza IBM Simon, el primer teléfono inteligente.
29 de junio de 2007:Apple lanza el primer iPhone.
5 de noviembre de 2007:Google lanza la primera beta pública de Android.
Tanto iOS como Android son tecnologías de desarrollo nativas. Con el desarrollo nativo, el
programador realiza llamadas directamente a la API del sistema.
diciembre de 2007:Artículos y publicaciones de blogs sobre fragmentación en tecnologías de telefonía móvil
comienzan a aparecer en grandes cantidades.
13 de marzo de 2009:Nitobi Software presenta un marco que utiliza HTML, CSS y JavaScript para
crear aplicaciones para teléfonos móviles.
4 de octubre de 2011:Adobe adquiere Nitobi, cambia el nombre de su marco con el nombre

PhoneGap y crea una versión de código abierto que finalmente se convierte en Apache Cordova.
Cordova y sus primos son marcos de desarrollo de aplicaciones híbridas. Condesarrollo de aplicaciones
hibridas, una aplicación se ejecuta en una ventana que es esencialmente un navegador web. Debido a que la
tecnología de navegador web es estándar en todas las plataformas, una aplicación híbrida puede ejecutarse
en dispositivos Android e iOS, o incluso en una computadora de escritorio.
¿Qué hay de "híbrido" en las aplicaciones híbridas? El código para mostrar texto e imágenes en un
navegador web no varía mucho de un entorno a otro, por lo que una página del navegador en un iPhone
se parece más o menos a la misma página en un teléfono Android. Pero comunicarse con dispositivos de
hardware, como el receptor GPS y el motor de vibración, es otra historia completamente diferente.
Las páginas web no están diseñadas para comunicarse directamente con el hardware de un dispositivo. De hecho,
no quieres visitarwww.awfulwebsite.comy haga que el código del sitio tome fotografías en silencio con la cámara
integrada de su computadora portátil. Para hacer que una aplicación híbrida interactúe con el hardware, debe
retroceder y realizar llamadas a la API del iPhone, la API de Android o cualquier otra API que pueda usar. Es por
eso que frameworks como Apache Cordova tienencomplementos—programas adicionales cuyo código es
específico para iOS o Android. La conclusión es que una aplicación híbrida típica hace parte de su trabajo en un
navegador web y el resto del trabajo con llamadas API nativas.
¿Cuál es el inconveniente de las aplicaciones híbridas? Los marcos como Apache Cordova son como intérpretes de
idiomas extranjeros: mientras se ejecuta la aplicación, el dispositivo debe traducir constantemente las
instrucciones del navegador web en instrucciones de código nativo. Cuando habla a través de un intérprete, la
conversación puede volverse lenta. Las aplicaciones híbridas no siempre son tan receptivas como las aplicaciones
nativas. Además, las aplicaciones híbridas no pueden hacer todo lo que pueden hacer las aplicaciones nativas. Es
lo mismo cuando hablas a través de un intérprete de idioma extranjero. Puede decir la mayoría de las cosas que
quiere decir, pero algunas ideas simplemente no se pueden traducir.
Volviendo a la lección de historia. . .
Verano 2013:Un hackathon para empleados de Facebook da a luz areaccionar nativo—

un marco multiplataforma basado en el marco de JavaScript React.js.
24 de febrero de 2016:Microsoft adquiere Xamarin, un marco de desarrollo móvil

multiplataforma basado indirectamente en el propio marco .NET de Microsoft.
Con unmarco multiplataforma, un programador escribe un programa que no se dirige ni a

iOS ni a Android. Cuando el programador dice: "Pruebe este código", el marco traduce todo
el programa en código nativo para Android o iOS, cualquiera que sea la plataforma que elija
el programador. Cuando el programa está listo para su distribución pública, el marco lo
traduce en dos aplicaciones nativas diferentes: una para iOS y otra para Android.
Pero ¿por qué detenerse allí? Si puede traducir el código a aplicaciones de iOS y Android, puede
traducir el código a páginas web y aplicaciones de escritorio. Un desarrollador puede crear una
pieza de código y ejecutarla en todo tipo de teléfonos, tabletas, PC, Mac, relojes, tostadoras o lo
que sea.
Esto me lleva al tema de mi libro:
4 de diciembre de 2018:Google anuncia Flutter 1.0 para el desarrollo multiplataforma.
(continuado)

(continuado)
Flutter se diferencia de Xamarin y React Native en algunos aspectos significativos. En primer

lugar, Xamarin no es completamente gratuito. Usar Xamarin para proyectos profesionales cuesta
entre $300 y $1900 al año, dependiendo del tamaño y alcance de los proyectos en desarrollo.
Además, la forma en que Flutter muestra los componentes es diferente a la de React Native y Xamarin.
Cuando ejecuta una aplicación React Native en un iPhone, la aplicación recurre a la API de iOS para crear
botones, campos de texto y otros componentes visuales de iOS. Lo mismo es cierto para el desarrollo de
Android. React Native obtiene la API de Android para mostrar componentes específicos de Android. Los
componentes creados por las API de iOS y Android no se parecen. Las dos API usan diferentes formas,
diferentes paletas de colores y diferentes esquemas de navegación. Las diferencias pueden conducir a
resultados inesperados y, en ocasiones, pueden sabotear todo el esfuerzo de desarrollo multiplataforma.
Flutter no recurre a las API de iOS o Android para mostrar los componentes de una aplicación. En
cambio, Flutter especifica todos los píxeles diminutos necesarios para dibujar un botón o un campo de
texto y llama a la API de iOS o Android para pintar esos píxeles. Si desea que una aplicación se vea igual
en dispositivos iOS y Android, Flutter es su elección natural.
¿Qué sucede si desea que su aplicación tenga ese aspecto especial de iPhone cuando se ejecuta en
dispositivos iOS? ¿Puedes hacer eso con Flutter? Por supuesto que puede. (No haría la pregunta si la
respuesta fuera "No"). El marco Flutter tiene dos bibliotecas especiales: una para Android y otra para iOS.
La biblioteca Material Design de Flutter dibuja elementos que parecen componentes de Android, y la
biblioteca Cupertino de Flutter hace que los objetos parezcan componentes de iOS. Este libro enfatiza la
biblioteca Material, pero casi todo en él tiene una contraparte de Cupertino.
Termino esta barra lateral con un turrón histórico más:
10 de mayo de 2239:La historiadora de tecnología Alice Touge publica un artículo sobre el origen de la palabra
teléfono,que en latín significa "sonido". Ella explica que los teléfonos del siglo 23 provenían de dispositivos cuyo
propósito original era únicamente transmitir sonido. Este hecho sorprendente se vuelve viral en todos los
medios de transmisión directa a la mente.
Llevaba mi programa de la máquina de tarjetas perforadas al mostrador del operador de la computadora,

donde un operador permanentemente malhumorado me informaba sobre el tiempo inusualmente largo de
entrega del trabajo.
Cuatro horas más tarde, recibía una pila de papel de una pulgada de grosor con un
mensaje de error en algún lugar en el medio. Volvería a la máquina de tarjetas
perforadas, haría otra tarjeta con una coma añadida en la columna 23 y haría todo el
trabajo de nuevo.
No hay duda al respecto: un ciclo de desarrollo largo y arduo obstaculiza la productividad.
En estos días, reducir unos segundos el tiempo de respuesta puede marcar una gran
diferencia.
Esto es lo que sucede cuando crea una aplicación para dispositivos móviles:
1.Escribes algún código, o modificas algún código existente.

No escribe código de Android o iOS en un teléfono de ningún tipo. Los teléfonos no son lo suficientemente
potentes para toda la edición y otras cosas que necesitas hacer. En su lugar, crea el código de una
aplicación en una computadora portátil o de escritorio. Esta computadora portátil o de escritorio se llama
sucomputadora de desarrollo.
2.Emite un comando para que su computadora de desarrollo construya el código.

La construcción del código se lleva a cabo en varias etapas, una de las cuales se llamacompilando.
Compilandosignifica traducir automáticamente su programa desde el código fuente que escribió
a instrucciones detalladas del código objeto. Piense en el código objeto como un montón de ceros
y unos. Es muy detallado y extremadamente poco intuitivo. Los humanos casi nunca leen o
escriben código objeto pero, en el fondo, los procesadores responden solo a las instrucciones del
código objeto.
Para obtener una visión detallada de la compilación de código, consulte "¿Qué es un compilador?" de esta sección. barra
lateral
Además del paso de traducción, el proceso de compilación conecta el programa que

escribió con código adicional que su programa necesita para ejecutarse. Por ejemplo, si su
programa accede a Internet, el proceso de compilación integra su código con el código de
red existente.
¿Qué pasa después?
3.La computadora de desarrollodespliegasu código a un dispositivo de destino.

Este llamado "dispositivo" puede ser un teléfono real conectado a su computadora o una
imagen de un teléfono en la pantalla de su computadora. De una forma u otra, su programa
comienza a ejecutarse.
4.Presiona botones, escribe texto y, de lo contrario, prueba su aplicación para averiguar si está
haciendo lo que usted quiere que haga.
Por supuesto, no es hacer todas esas cosas. Así que regresa al Paso 1 y sigue intentándolo.
Los pasos 2 y 3 pueden ser dolorosamente lentos. Para algunas aplicaciones simples de iPhone y Android,
observé durante varios minutos mientras mi computadora preparaba el código para la próxima ejecución del
programa. Esta lentitud reduce considerablemente mi productividad.

Pero junto con Flutter vienen buenas noticias. Flutter usa el lenguaje de programación
Dart, y Dart viene con estos dos (cuéntalos, dos) compiladores:
»Compilador anticipado (AOT)

Con uncompilador AOT, su computadora de desarrollo traduce un programa completo y
hace que el código traducido esté disponible para que los dispositivos lo ejecuten. No se
realizan más traducciones cuando los dispositivos ejecutan su programa. Cada dispositivo de
destino dedica su poder de procesamiento a la ejecución eficiente de su código.
Una aplicación que se ejecuta en código compilado por AOT se ejecuta sin problemas y de manera eficiente.
»Compilador justo a tiempo (JIT)

Con uncompilador JIT, su computadora de desarrollo traduce suficiente código para iniciar la
ejecución de la aplicación. Alimenta este código a un dispositivo de prueba y continúa traduciendo
mientras el dispositivo de prueba ejecuta la aplicación. Si el desarrollador presiona un botón en la
pantalla del dispositivo de prueba, el compilador JIT se apresura a traducir el código de ese botón.
Una aplicación que se ejecuta en un compilador JIT puede parecer lenta porque el compilador traduce el
código mientras se ejecuta la aplicación. Pero usar un compilador JIT es una excelente manera de probar
una aplicación.
Esto es lo que sucede cuando desarrollas una aplicación de Flutter:
1.Escribes algo de código.

2.Emite un comando para que su computadora de desarrollo construya el código.
La primera vez, crear código puede llevar algo de tiempo.
3.La computadora de desarrollo implementa su código en un dispositivo de destino.

Una vez más, te enfrentas a un retraso de tiempo notable.
4.Al probar su código, descubre que no está haciendo todo lo que usted quiere que
haga.
5.Usted modifica su código existente y luego . . .

6.Emite un comando para que su computadora de desarrollo reconstruya el código.
Aquí es donde ocurre la magia de Flutter. El compilador JIT de Dart vuelve a compilar solo la
parte de la aplicación que ha modificado y envía el cambio directamente al dispositivo de
destino. El código modificado comienza a ejecutarse en una fracción de segundo. Ahorra horas
de tiempo todos los días porque no está esperando que los cambios en el código surtan efecto.
¿QUÉ ES UN COMPILADOR?
Eres un ser humano. (Claro, cada regla tiene excepciones. Pero si estás leyendo este libro,
probablemente seas humano). De todos modos, los humanos pueden escribir y comprender el
siguiente código fuente de Flutter:
importar 'paquete: flutter/widgets.dart';
main() => ejecutarApp(SizedBox`());
Cuando parafraseas el código fuente en inglés, esto es lo que obtienes:
Obtenga un código (código de la API de Flutter) llamadowidgets.dart.
Ejecute una aplicación cuyo único componente sea un widget de cuadro.
Si no ves las similitudes entre el código de Flutter y su equivalente en inglés, no te preocupes. estas
leyendoAleteo para tontosy, como la mayoría de los seres humanos, puedes aprender a leer y escribir el
código de Flutter. En caso de que te lo preguntes, este código fuente contiene la aplicación Flutter más
simple e inútil del mundo. Cuando se ejecuta la aplicación, ve una pantalla completamente negra. No es lo
que llamarías una "aplicación asesina".
El código fuente es bueno, pero el código fuente no es para todos ni para todo. Los procesadores de las
computadoras y los dispositivos móviles no son seres humanos. Los procesadores no siguen las
instrucciones del código fuente. En su lugar, siguen instrucciones crípticas del siguiente tipo:
1100100 1100101 1111000 00001010 00110000 00110011 00110101 00000000 10000100
Estos ceros y unos son, de hecho, las primeras palabras en la versión de un teléfono Android del código de la
aplicación Black Screen. Aquí está la aplicación Black Screen después de que un procesador interpreta los ceros
y los unos:
. clase pública com/allmycode/experiment/MainActivity

. super io/flutter/incrustación/android/FlutterActivity
. fuente MainActivity.java
. método público <init>()V

. registros de límite 1
; esto: v0 (Lcom/allmycode/dexperiment/MainActivity;) . línea 8
invocar-directo {v0},io/flutter/embedding/android/FlutterActivity/<init>
; <inicio>()V
retorno-vacío
. método final
(continuado)

(continuado)
. método public configureFlutterEngine(Lio/flutter/embedding/engine/

FlutterEngine;)V
. registros de límite 2
; esto: v0 (Lcom/allmycode/experiment/MainActivity;)
; parámetro[0] : v1 (Lio/flutter/incrustación/motor/FlutterEngine;) . línea 11
invocar-estática {v1},io/flutter/plugins/GeneratedPluginRegistrant/
registrar con
; registrarseCon(Lio/flutter/incrustación/motor/FlutterEngine;)V
. línea 12
retorno-vacío
. método final
¡Que desastre! Los humanos no quieren leer o escribir instrucciones de este tipo. Estas instrucciones no
son instrucciones del código fuente de Dart. Ellos sonCódigo de bytes de Dalvikinstrucciones. Cuando
escribes un programa Flutter, escribes las instrucciones del código fuente de Dart. Si prueba su
programa en un dispositivo Android, su computadora de desarrollo traduce el código fuente en código
de bytes. Si prueba su programa en un iPhone, la computadora traduce su código fuente en algo que es
aún más oscuro que el código de bytes.
La herramienta que realiza la traducción es un compilador. loscompiladortoma código que

puede escribir y comprender y lo traduce a código que un procesador tiene la posibilidad de
llevar a cabo.
Puede poner su código fuente en un archivo llamadodardo principalPara ejecutar su aplicación en

dispositivos Android, el compilador crea otros archivos llamadosMainActivity.dexyaplicación apk.
Normalmente, no te molestas en mirar estos archivos compilados. Ni siquiera puedes examinar
. dexarchivos o .apkarchivos con un editor ordinario. Si intentas abrirMainActivity.dex
con el Bloc de notas, TextEdit o incluso Microsoft Word, no verá nada más que puntos,
garabatos y otros galimatías.
Nadie (a excepción de algunos programadores locos en algunos laboratorios aislados en lugares lejanos) escribe
el código de bytes de Dalvik o cualquier otro tipo de código que los procesadores realmente entiendan. Cuando
le pide a su computadora de desarrollo que ejecute su código, la computadora usa su propio software (un
compilador) para crear instrucciones fáciles de usar para el procesador. La única razón para mirar el código de
bytes en esta barra lateral es comprender lo trabajadora que es su computadora de desarrollo.
Flutter te ofrece dos formas de aplicar cambios a una aplicación en ejecución:
»Conreinicio en caliente, la aplicación comienza a ejecutarse de nuevo, eliminando cualquier dato que haya
ingresado durante la prueba más reciente, mostrando la aplicación como si la estuviera ejecutando por
primera vez.
»Conrecarga caliente, la aplicación retoma desde donde la dejó, con los últimos datos
ingresado intacto, si es posible. Los únicos cambios son los dictados por sus
modificaciones al código.
El reinicio en caliente y la recarga en caliente de Flutter son increíblemente rápidos. Convierten el ciclo
de desarrollo de aplicaciones en un placer en lugar de una tarea.
El Capítulo 2 le brinda más información sobre cómo crear, probar y volver a ejecutar aplicaciones.
Una gran manera de pensar en el desarrollo

de aplicaciones.
El idioma que hablas influye en tu forma de pensar. Si no me cree, busque la hipótesis de

Sapir-Whorf. Seguramente lo encontrará en su sitio web de lingüística favorito.
Los lenguajes hablados no son ni buenos ni malos, pero los lenguajes de programación pueden
tener buenas y malas cualidades. La mayoría de las aplicaciones híbridas están escritas en el
lenguaje de programación JavaScript. Sí, JavaScript es uno de los lenguajes más utilizados en el
mundo. Pero no, JavaScript no fomenta un buen diseño de software. Es fácil escribir código
confuso en JavaScript porque sus reglas son bastante permisivas. Puede escribir código
JavaScript descuidado y el código funciona bien. Es decir, funciona bien hasta que alguien
ingresa una entrada inesperada. Cuando eso sucede, tiene problemas para descubrir cómo
funcionaba su código en primer lugar. Incluso cuando no está ocupado corrigiendo errores,
agregar nuevas funciones al código JavaScript puede ser difícil y frustrante. Los aficionados a
JavaScript discutirán cada palabra de este párrafo pero, de una forma u otra, JavaScript tiene
sus desventajas.
La plataforma iOS de Apple usa los lenguajes Swift y Objective-C, mientras que Android usa
Kotlin y Java. Objective-C se remonta a principios de la década de 1980 y, como yo, está
mostrando su edad. A los otros tres idiomas les va bastante bien en la escala de buenas
características del lenguaje, pero ninguno de ellos es tan sencillo e intuitivo como Dart.
Además de eso, tanto iOS como Android dividen el código de una aplicación en dos partes separadas:
»Diseño:Cómo se ve la aplicación.
»Lógica:La secuencia de instrucciones que realiza la aplicación.
El ejemplo del botón de radio de Android en la sección anterior de este capítulo

"Desarrollo multiplataforma" no es código Kotlin ni Java. Es código XML (un término que
no me molesto en definir aquí). Tiene un formato diferente y vive en un archivo diferente
del código que responde a las opciones del botón de opción.

En mis libros de Android, argumento que separar el diseño de la lógica es algo bueno. Pone distintos
aspectos de una aplicación en diferentes partes del código. Los desarrolladores pueden mantener
cada parte de forma independiente. Para un desarrollador de Android, eso es algo bueno.
Pero esto no es un libro de Android. Es un libro de Flutter. Entonces, en este libro, afirmo que
separar el diseño de la lógica esnoóptimo Este es el por qué:
Es posible que haya escuchado el mantra integral del desarrollo de la aplicación Flutter:
En Flutter, casi todo es un widget.
¿Y qué es un widget? En una aplicación móvil, cada botón es uno de los widgets de la aplicación.
Cada campo de texto es un widget. La aplicación en sí es un widget. El posicionamiento de
botones y campos de texto es un widget. La animación de objetos de una parte de la pantalla a
otra es un widget. Cuando crea una aplicación Flutter, coloca widgets dentro de otros widgets,
que a su vez están dentro de más widgets. El Listado 1-1 tiene un código falso que ilustra el
punto:
LISTADO 1-1: Como una rueda dentro de una rueda
// No caigas en mi engaño. ¡Este no es un código real de Flutter!

Solicitud(
Fondo(
CenterLo que sea que esté dentro de esto (
Botón(
onPressed: print("Me han hecho clic"), Padding(
Texto(
"Haz click en mi"
),
),
),
),
),
)
El listado 1-1 tiene unTextowidget dentro de unRellenowidget, que está dentro de un

Botónwidget dentro de uncentrolo que sea que esté dentro de estoartilugio. QueCentro
lo que sea que esté dentro de estowidget está dentro de unFondowidget, que está dentro de un
Solicitudartilugio. Cuando creé el Listado 1-1, lo modelé según el código real de Flutter. El
código real de Flutter crea la aplicación que se muestra en la Figura 1-2. Cuando el usuario
presiona el botónBotónen la Figura 1-2, las palabrasme han hecho clicAparecer.
FIGURA 1-2:
Una aplicación con un
botón.
Para ver el código real que inspiró el código falso de este capítulo, visitewww.allmycode. es/
fluttery busque el enlace de descarga grande. El código real está en un archivo llamado
aplicación0101.
Compare las Figuras 1-2 y 1-3. La figura 1-2 muestra la aplicación tal como la ve el usuario. La Figura
1-3 muestra la misma aplicación que el desarrollador de Flutter codifica.
FIGURA 1-3:
Widgets dentro
widgets

Si aún no eres desarrollador de Flutter, la palabraartilugiopodría sugerir un componente visible,
como un botón, un control deslizante, un icono o algo similar. Pero en Flutter, las cosas que no
son realmente visibles también son widgets. Por ejemplo, en el Listado 1-1,centrolo que sea
que esté dentro de estoes un artilugio. Tener características de diseño como
centrolo que sea que esté dentro de estoser widgets es una idea poderosa. Significa que los
desarrolladores de Flutter pueden centrar su atención en una tarea general: rellenar widgets
dentro de otros widgets. Flutter tiene una cierta simplicidad y elegancia que otros marcos de
desarrollo de aplicaciones no tienen.
Flutter no tiene un widget incorporado llamadoCentreLoQueEstáDentroEsto.Pero no te

decepciones. de aleteoCentrowidget hace lo que mi ficticiocentrar lo que sea que esté dentro
de estose supone que el widget debe hacer.
¡Basta de nueva terminología! ¿Que sigue?

Es posible que haya leído este capítulo de principio a fin, pero ninguna palabra en el
capítulo le pidió que tocara el teclado de su computadora. ¡Qué vergüenza! Si lee el
próximo capítulo, puedo rectificar esa horrible omisión.
EN ESTE CAPÍTULO
»Instalación de Dart y Flutter
»Instalando un desarrollo
ambiente
»Imitar dispositivos móviles en su

ordenador portátil
Capítulo2
Configuración de su
Computadora para móvil
Desarrollo de aplicaciones
A
Rquímedes vivió en la antigua Grecia durante el siglo II a. Su trabajo en el
desarrollo temprano de las matemáticas fue innovador. En la paz y la tranquilidad
de su propia bañera, se topó por casualidad con un importante
fórmula — una fórmula para describir la relación entre su peso y la cantidad de agua que
su cuerpo desplazó. Al hacer este descubrimiento, gritó "¡Eureka!" y saltó de la tina para
contárselo a todos en su ciudad. Con o sin túnica, Arquímedes quería que todos los
griegos compartieran su alegría.
Salta hacia adelante aproximadamente 2200 años. Tengo 12 años. En una conversación sobre
mover algunos muebles, mi padre cita a Arquímedes: “Dame una palanca lo suficientemente
grande y puedo mover el mundo”. Intento imaginarme esto. Aquí está la Tierra, colgando en el
espacio, y hay un palo muy largo con un rizo en la parte inferior. El rizo llega debajo del gran
planeta y lo empuja a una nueva posición.
Apestoso como era, vi tres problemas con este escenario. Primero, ¿cómo anclarías la
parte inferior de la palanca en un punto fijo en el espacio vacío? En segundo lugar, ¿cómo
impediría que la palanca cavara un enorme agujero en alguna parte blanda de la Tierra? Y
finalmente, ¿cómo tomaría la gente de la Tierra que su planeta fuera de órbita? Como
puedes ver, yo era un niño malhumorado.
CAPITULO 2Configuración de su computadora para el desarrollo de aplicaciones móviles 29

Pero la idea del apalancamiento se quedó en mi mente. Cuanto más larga sea la palanca, más
beneficios obtendrá de ella. No puedes levantar una gran roca por tu cuenta sin una palanca, pero
puedes mover la roca con una enorme palanca. Una palanca es una herramienta, y las herramientas
son cosas maravillosas.
Las herramientas no hacen directamente las cosas que usted quiere que se hagan. No puedes comer una herramienta, leer una
buena herramienta, escuchar la canción feliz de una herramienta o bailar la giga con una herramienta. Pero puedes usar
herramientas para hacer comida, libros, instrumentos musicales y pistas de baile.
Este capítulo trata sobre las herramientas: las herramientas que utiliza para crear excelentes aplicaciones móviles.
Las cosas que necesitas
Este libro le explica cómo crear aplicaciones usando Flutter. Antes de poder crear aplicaciones, necesita
algunas herramientas de software. Aquí hay una lista de las herramientas que necesita:
»El kit de desarrollo de software Flutter (SDK)

El SDK de Flutter incluye muchísimo código de Flutter preescrito y reutilizable y un montón de
herramientas de software para ejecutar y probar aplicaciones de Flutter. El SDK tiene las
bibliotecas de códigos Flutter oficiales, bibliotecas de códigos Dart, documentación e incluso
algunas aplicaciones de muestra.
»Un entorno de desarrollo integrado

Puede crear aplicaciones Flutter utilizando herramientas geek, solo de teclado, pero
eventualmente se cansará de escribir y volver a escribir comandos. Unentorno de
desarrollo integrado (IDE),por otro lado, es un poco como un procesador de textos: un
procesador de textos le ayuda a redactar documentos (memorandos, poemas y otras
obras de literatura fina); en contraste, un IDE lo ayuda a redactar instrucciones para
procesadores.
Para componer aplicaciones de Flutter, recomiendo el IDE de Android Studio. No te dejes

engañar por la palabraAndroideen el nombre del IDE. Con Android Studio, puede crear
aplicaciones para iPhone, aplicaciones web y otros tipos de aplicaciones.
»Algunas aplicaciones de muestra de Flutter, para ayudarlo a comenzar

Todos los ejemplos de este libro están disponibles para su descarga aquí:
www.allmycode.com/Flutter
»Un dispositivo para probar tu código Flutter
Escribe un código y luego lo ejecuta para ver si funciona correctamente. Por lo general, no
funciona correctamente hasta que realiza algunos cambios. La mayoría de las veces, no funciona
correctamente hasta que haceun montónde cambios
En este libro, hago hincapié en la creación de aplicaciones para teléfonos iPhone y Android. Puede
ejecutar su código en su propio teléfono, pero también puede ejecutarlo en su computadora. Para
ejecutar una aplicación móvil en su computadora, necesita un software que muestre un teléfono
en su pantalla y ejecute su aplicación dentro de esa pantalla.
En el mundo del iPhone, este tipo de software se denominasimulador, y Android llama

a su software unemulador. Los simuladores y emuladores son ejemplos de dispositivos
virtuales. Por el contrario, un teléfono iPhone o Android real se llama dispositivo físico.
Otro nombre para un dispositivo físico es undispositivo real. Para enfatizar, a veces escribo
dispositivo físico real. Supongo que podría ser más enfático y escribirDispositivo físico real,
real, duro, ¡puedes apostarlo!
Un emulador no es lo mismo que un simulador. Un emulador es un software que se

comporta, en gran medida, como el hardware de un teléfono físico real.
Un simulador es un software que ejecuta las aplicaciones de un teléfono sin comportarse
demasiado como el hardware del teléfono. Afortunadamente, cuando ejecuta las aplicaciones de
este libro, puede ignorar esta sutil diferencia.
Todas estas herramientas se ejecutan en elcomputadora de desarrollo—la computadora portátil o de

escritorio que usa para desarrollar aplicaciones de Flutter. Más tarde, cuando publica su aplicación, los
usuarios ejecutan la aplicación en susdispositivos de destino—dispositivos físicos como iPhones, teléfonos
Android y (algún día pronto) tostadoras inteligentes.
Aquí hay buenas noticias: puede descargar gratis todo el software que necesita para ejecutar
los ejemplos de este libro. El software se divide en cuatro descargas:
»Cuando tu visitashttps://flutter.dev/docs/get-started/install,tú
puede hacer clic en un botón para instalar Flutter SDK.
»Un botón en la página.http://developer.android.com/estudiote dio

la descarga del IDE de Android Studio. Junto con esta descarga viene el
emulador de Android.
»El sitio web de este libro (www.allmycode.com/Flutter)tiene un enlace a todos los

codigo de libro.
»El simulador de iPhone, así como todo el código que necesitas para generar iPhone
apps, viene con la instalación de Xcode en tu Mac. Xcode está disponible en la tienda de
aplicaciones de Macintosh. (Desafortunadamente, no puede desarrollar para iPhone en una PC con
Windows).

En el mundo del desarrollo de aplicaciones móviles, las cosas cambian muy rápido. Las instrucciones
que escribo el martes pueden estar desactualizadas el jueves por la mañana. Los creadores de Flutter
siempre están creando nuevas funciones y nuevas herramientas. Las herramientas antiguas dejan de
funcionar y las instrucciones anteriores ya no se aplican. Si ve algo en su pantalla que no se parece a
una de mis capturas de pantalla, no se desespere. Puede ser algo muy nuevo, o puede que haya
llegado a un rincón del software que no describo en este libro. De una forma u otra, envíame un
correo electrónico, un tweet o alguna otra forma de comunicación. (No intente enviar una paloma
mensajera. Mi gato la alcanzará antes de que encuentre la nota). Mi información de contacto se
encuentra en la introducción de este libro.
Qué hacer
Es un estribillo viejo y familiar. Primero obtienes un software. Luego ejecutas el software.
Obtener e instalar las cosas

1.Visitarwww.allmycode.com/Fluttery descargue un archivo que contiene todos los
ejemplos de programas de este libro.
El archivo descargado es un .Código Postalarchivo de archivo. (Consulte las barras laterales posteriores "Esas
molestas extensiones de nombre de archivo" y "Archivos comprimidos").
La mayoría de los navegadores web guardan archivos en elDescargasdirectorio en el disco

duro de la computadora. Pero su navegador puede estar configurado un poco diferente. De
una forma u otra, tome nota de la carpeta que contiene el archivo descargado
FlutterForDummies_Listings.zip.
2.Extraiga el contenido del archivo descargado a un lugar en el disco duro de su

computadora.
3.Visitarhttps://flutter.dev/docs/get-started/instally descarga el SDK de

Flutter.
Elija una versión del software que coincida con su sistema operativo
(Windows, Macintosh o lo que sea).
4.Extraiga el contenido del archivo descargado a un lugar en el disco duro de su

computadora.
Lo antes mencionadocontenidoes en realidad un directorio lleno de cosas. El

nombre del directorio esaleteo.pon tu nuevoaleteodirectorio en un lugar que no
está protegido con privilegios especiales. Por ejemplo, si intenta extraer elaleteo
directorio dentro delc:\archivos de programadirectorio, Windows muestra su Usuario
cuadro de diálogo Control de cuenta y pide confirmación. no pongas elaleteo
directorio dentro de un lugar como ese.
Dices "carpeta". Digo "directorio". Para no citar del todo a Gershwin, dejemos todo
el asunto porque, en este libro, uso estas dos palabras indistintamente.
Personalmente, me gusta poner elaleteodirectorio dentro de mi directorio de inicio. Mi

computadora tiene un directorio llamadousuarios,y dentro de esoUsuariosdirectorio es
un directorio llamadobarryburdQuebarryburddirectorio es mi directorio de inicio. Este
directorio de iniciocontiene miDocumentosdirectorio, miDescargasdirectorio, y muchas
otras cosas. Después de extraer el contenido del archivo descargado, mi
barryburddirectorio de inicio tiene un nuevoaleteodirectorio.
No tienes que extraer elaleteodirectorio dentro de su directorio de

inicio, pero es lo más simple y confiable que puedo pensar en hacer.
5.Tome nota del lugar en su disco duro donde se encuentra el nuevoaleteo

vive el directorio.
Por ejemplo, si copió el archivo .Código Postalcontenido del archivo a su /

Usuarios/ janeqreaderdirectorio, anote el /Usuarios/janeqreader/flutter
directorio. Ese es suRuta del SDK de Flutter.
Para asegurarse de haber extraído correctamente el contenido del archivo descargado,

mire dentro delaleteodirectorio para un subdirectorio llamadocompartimiento.Mi
directorio flutter tiene otros subdirectorios, llamadosdesarrollo, ejemplos,ypaquetesSu
kilometraje puede variar, dependiendo de cuándo descargue el SDK de Flutter.
6.Visitarhttp://developer.android.com/estudioy descargue el IDE de Android

Studio.
La descarga es un .exepresentar un .DMGarchivo, o tal vez algo más.
7.Instale el software que descargó en el Paso 6.

Durante la instalación, un cuadro de diálogo puede ofrecer la opción de instalar un
dispositivo virtual Android (AVD).Si es así, acepta la opción.
Para obtener más detalles sobre la instalación de Android Studio, consulte la sección posterior de este capítulo
"Sobre la instalación de Android Studio".
Android Studio no es el único IDE que tiene funciones para crear aplicaciones de Flutter.
Algunos desarrolladores prefieren Virtual Studio Code (conocido cariñosamente como VS
Code), que está disponible para Windows, Macintosh y Linux. Y si le gusta trabajar duro,
puede prescindir de un IDE y usar la línea de comando junto con su editor de texto
favorito: Emacs, vi o Notepad. En este libro, me centro en Android Studio, pero puedes
encontrar muchas alternativas.
Para obtener más información sobre Visual Studio Code, visitehttps://code.visualstudio.com.

ESAS EXTENSIONES DE NOMBRE DE ARCHIVO PESKY
Los nombres de archivo que se muestran en el Explorador de archivos o en una ventana del Finder pueden
ser engañosos. Puede navegar por un directorio y ver el nombreandroid-studio-ideoaleteo_

ventanasEl nombre real del archivo podría serandroid-studio-ide.exe, flutter_
windows.zip,o simplemente viejoflutter_windows.Terminaciones de nombre de archivo como .zip, .exe, .
dmg, .aplicación,y .dardosonextensiones de nombre de archivo.
La fea verdad es que, de forma predeterminada, Windows y Mac ocultan muchas extensiones de nombre de
archivo. Esta horrible característica tiende a confundir a la gente. Si no quiere confundirse, cambie la
configuración de todo el sistema de su computadora. Aquí está cómo hacerlo:
• En Windows 7:Elija Inicio - Panel de control - Apariencia y personalización - Opciones

de carpeta. Luego pase a la tercera viñeta.
• En Windows 8:En la barra Accesos, seleccione Configuración - Panel de control. En el Panel de

control, elija Apariencia y personalización - Opciones de carpeta. Luego continúe con la
siguiente viñeta.
• En Windows 7 u 8:Siga las instrucciones de uno de los puntos anteriores. Luego, en el cuadro de diálogo
Opciones de carpeta, haga clic en la pestaña Ver. Busque la opción Ocultar extensiones de archivo para tipos
de archivo conocidos. Asegúrese de que esta casilla de verificación esténoseleccionado.
• En Windows 10:En el menú principal del Explorador de archivos, seleccione Ver. En la cinta que aparece, coloque una
marca de verificación junto a Extensiones de nombre de archivo.
• En macOS:En el menú de la aplicación Finder, seleccione Preferencias. En el cuadro de diálogo resultante,
seleccione la pestaña Avanzado y busque la opción Mostrar todas las extensiones de archivo. Asegúrese de
que esta casilla de verificaciónesseleccionado.
Mientras visita cualquier sitio de descarga de software, verifique los requisitos para
descargar, instalar y ejecutar ese software. Asegúrese de tener suficiente memoria y un
sistema operativo lo suficientemente actualizado.
Solo para usuarios de Mac
Si tienes una Mac y quieres crear aplicaciones para iPhone, sigue estos pasos:
1.Selecciona App Store en el menú de Apple.

2.En el campo de búsqueda de la tienda, escribacódigo xy luego presione Entrar.
La búsqueda de App Store encuentra docenas de aplicaciones, pero solo una tiene el nombre
simple Xcode.
ARCHIVOS COMPRIMIDO
Cuando tu visitaswww.allmycode.com/Fluttery descargue los ejemplos de este libro, descargue un
archivo llamadoFlutterForDummies_Listings.zip.Un archivo zip es un solo archivo que codifica un
montón de archivos más pequeños. losFlutterForDummies_Listings.zipexpediente
codifica archivos con nombres comoAplicación0301.dardo, Aplicación0302.dardo,yApp0401.dardo.
losApp0301.dardoEl archivo contiene el código del Listado 3-1, el primer listado del Capítulo 3. Del
mismo modo,App0302.dardoyApp0401.dardotenga el código en los Listados 3-2 y 4-1.
losFlutterForDummies_Listings.zipEl archivo también codifica una carpeta llamadaactivos.

Esta carpeta contiene copias de las imágenes que aparecen en las aplicaciones del libro.
UNA .Código Postalarchivo es un ejemplo de unarchivo comprimidoexpediente. Otros ejemplos de archivos comprimidos
incluyen .tar.gzarchivos, .rararchivos y .paquete escasoarchivos Cuando usteddescomprimirun archivo, extrae los
archivos y carpetas originales almacenados dentro del archivo de almacenamiento más grande. (Para .Código Postal
archivo, otra palabra para descomprimir esdescomprimiendo.)
cuando descargasFlutterForDummies_Listings.zip,el navegador web puede descomprimir el archivo

automáticamente por usted. De lo contrario, puede hacer que su computadora descomprima el archivo.
Así es cómo:
• En una computadora con Windows,haga doble clic en el .Código Postalicono del archivo. Cuando hace esto, el
Explorador de archivos de Windows le muestra los archivos y carpetas dentro del archivo comprimido.Código Postal
archivo. Arrastre todos estos archivos y carpetas a otro lugar en el disco duro de su
computadora (un lugar que no esté dentro del archivo).
• En una Mac,haga doble clic en el .Código Postalicono del archivo. Cuando hace esto, la Mac extrae el
contenido del archivo comprimido y le muestra el contenido extraído en una ventana del Finder.
3.Haga clic en el botón Obtener de la aplicación Xcode.
Como resultado, App Store instala Xcode en su computadora.
4.Inicie la aplicación Xcode.

La primera vez que ejecuta Xcode, su Mac instala algunos componentes adicionales. Si desea que
sus aplicaciones se ejecuten en dispositivos Apple, necesita esos componentes adicionales.
Configuración de Android Studio

Android Studio no viene automáticamente con compatibilidad con Flutter, lo que significa que debe
agregar compatibilidad con Flutter la primera vez que ejecuta el IDE. Esto es lo que haces.

1.Inicie la aplicación Android Studio.
La primera vez que ejecuta una copia nueva y nueva de Android Studio, verá la pantalla
de bienvenida.
2.Seleccione Configurar-Complementos en la pantalla de bienvenida.

Encontrará el menú desplegable Configurar en la esquina inferior derecha de la pantalla de
Bienvenida. (Vea la Figura 2-1.)
FIGURA 2-1:
Estudio de Android
predeterminado Bienvenido
pantalla.
3.Busque un complemento llamado Flutter. Instala ese complemento.

Si Android Studio también ofrece la opción de instalar Dart, acepta la opción.
Después de instalar el complemento, es posible que desee reiniciar Android Studio. Por supuesto,
debe reiniciarlo. Cuando lo haga, volverá a ver la pantalla de bienvenida. Ahora la pantalla de
bienvenida incluye la opción Iniciar un nuevo proyecto de Flutter. (Consulte la Figura 2-2.)
Para obtener más detalles sobre la configuración de Android Studio, consulte la sección "Sobre la
instalación del complemento Flutter de Android Studio", más adelante en este capítulo.
Ejecutando tu primera aplicación
Instalaste Android Studio, agregaste el complemento Flutter de Android Studio y luego

reiniciaste Android Studio. Ahora estás viendo la pantalla de bienvenida de Android Studio.
¿Qué vas a hacer después?
FIGURA 2-2:
has instalado
el complemento Flutter.
1.Conectar a internet.
Durante la ejecución de su primera aplicación, Android Studio descarga
software adicional.
2.Seleccione la opción Iniciar un nuevo proyecto de Flutter. (Consulte la Figura 2-2.)

En su teléfono, una aplicación es una aplicación, y eso es todo. Pero en su
computadora de desarrollo, todo su trabajo se divide en proyectos. Para fines
profesionales, no tiene toda la razón si piensa que una aplicación equivale a un
proyecto. Pero, para los ejemplos de este libro, el modelo "un proyecto es igual a
una aplicación" funciona bien.
Si no ve la opción Iniciar un nuevo proyecto de Flutter, es posible que no haya instalado

correctamente el complemento de Flutter. Recomiendo volver a verificar las instrucciones en la
sección "Configuración de Android Studio", anteriormente en este capítulo. Si eso no ayuda, o si se
queda atascado en algún otro lugar de este capítulo, envíeme un correo electrónico. Mi dirección
de correo electrónico está en la introducción del libro.
Después de seleccionar Iniciar un nuevo proyecto de Flutter, verá tres cuadros de diálogo,
uno tras otro. El primero pregunta qué tipo de proyecto de Flutter desea crear, el segundo
solicita el nombre de la nueva aplicación y otros detalles, y el tercero crea algo llamado
paquete.
3.En el primer cuadro de diálogo, seleccione Aplicación Flutter y luego haga clic en Siguiente.
(Consulte la Figura 2-3.)
El segundo cuadro de diálogo tiene cuatro campos: Nombre del proyecto, Ruta del SDK de Flutter,
Ubicación del proyecto y Descripción. (Consulte la Figura 2-4.)

FIGURA 2-3:
Crear un aleteo
solicitud.
FIGURA 2-4:
Detalles sobre
tu nueva aplicación.
4.Seleccione un nombre que tenga solo letras minúsculas y, si lo desea,

caracteres de subrayado (_).
Los nombres de proyectos de Flutter no pueden contener letras mayúsculas, espacios en blanco
o caracteres de puntuación que no sean guiones bajos.
Si crea muchas aplicaciones, hacer un seguimiento de todas ellas puede volverlo loco. Por lo
tanto, ayuda si decide una fórmula para nombrar sus aplicaciones y luego se apega a esa
fórmula lo más cerca posible. Más adelante, cuando comience a comercializar sus aplicaciones,
puede abandonar la fórmula y usar nombres ingeniosos que atraigan la atención de las
personas.
5.Para la ruta del SDK de Flutter, proporcione su ruta del SDK de Flutter.
Copiaste la ruta del SDK de Flutter cuando seguiste el Paso 5 en la sección
anterior "Obtener e instalar las cosas", ¿no es así? Si lo olvidó, busque en su
disco duro una carpeta llamadaaleteo.Tiene que estar allí en alguna parte.
6.No cambie la opción Ubicación del proyecto, a menos que tenga un motivo
específico para hacerlo.
No tiene que especificar un nuevo directorio para cada uno de sus proyectos. Android
Studio lo hace automáticamente con la ubicación de este proyecto como punto de
partida.
7.Para la descripción, escriba algo que sea tonto y fuera de lo común.

Hazlo ahora, mientras puedas. Cuando creas aplicaciones profesionalmente, tienes que ser
más serio.
Después de hacer clic en Siguiente, Android Studio muestra el cuadro de diálogo Establecer el nombre del
paquete. (Consulte la Figura 2-5.)
FIGURA 2-5:
el acabado
toca

8.Si su empresa tiene un nombre de dominio, o si tiene su propio nombre de dominio,
escríbalo en el campo Dominio de la empresa. De lo contrario, escriba cualquier cosa o deje
el texto predeterminado solo.
Apaquetees una colección de piezas de código estrechamente relacionadas, y cada aplicación de

Flutter pertenece a su propio paquete. En el mundo de Flutter, se acostumbra comenzar el
nombre de un paquete con el reverso de un nombre de dominio. Por ejemplo, el nombre de
dominio de mi empresa esallmycode.com.Entonces, cuando creo una aplicación Flutter, la
aplicación generalmente está en un paquete llamadocom.allmycode.una cosa u otra. los
una cosa u otraparte es única para cada una de mis aplicaciones.
Cuando crea su primer proyecto, el texto predeterminado del campo Nombre de la empresa
probablemente seaejemplo.com.Hace varios años, la Corporación de Internet para la Asignación de
Nombres y Números (ICANN) apartó este nombre para que cualquiera lo use. Inmediatamente debajo de
eso, el cuadro de diálogo proporciona el nombre del paqueteejemplo. com.cualquiera que sea el
nombre de tu aplicación. Este nombre de paquete predeterminado está bien cuando estás creando tus
primeras aplicaciones de Flutter.
Este cuadro de diálogo puede tener casillas de verificación etiquetadas como Generar contenido de
muestra, Incluir compatibilidad con Kotlin para el código de Android e Incluir compatibilidad con Swift
para el código de iOS. No se preocupe por estas casillas de verificación. Revísalos, o no los revises. Para
su primera aplicación Flutter, no importa.
9.Haga clic en Finalizar.
Como por arte de magia, aparece la ventana principal de Android Studio. (Consulte la Figura 2-6). La ventana
principal tiene todas las herramientas que necesita para desarrollar aplicaciones de Flutter de primer nivel.
Incluso tiene una aplicación de inicio de muestra, que ejecutará en los próximos pasos.
La ventana principal de Android Studio puede parecer abrumadora al principio. Para ayudarlo a sentirse
decepcionado (o tal vez simplemente abrumado en la media), describo las partes de la ventana principal
en la sección "Uso de Android Studio" de este capítulo, más adelante en este capítulo.
En la Figura 2-7, observe dos elementos importantes cerca de la parte superior de la ventana principal de Android
Studio:
• losSelector de objetivosmuestra el texto <sin dispositivos>.
• losEjecutar iconoes una pequeña flecha verde que apunta hacia la derecha.
Lo que haga a continuación depende de su computadora de desarrollo y sus objetivos de

desarrollo.
10Si tiene una Mac y desea ejecutar un simulador de iPhone, seleccione Abrir simulador
de iOS en la lista desplegable Selector de destino.
Si no tiene una Mac o si desea ejecutar un emulador de Android, seleccione Herramientas-

AVD Manager en la barra de menú principal de Android Studio. En el cuadro de diálogo
resultante, busque un icono de flecha verde en el lado derecho del cuadro de diálogo. Haga
clic en ese icono de flecha verde. (Vea la Figura 2-8.)
FIGURA 2-6:
Estudio de Android
ventana principal.
FIGURA 2-7:
Estudio de Android
barra de herramientas.
FIGURA 2-8:
Comience a ejecutar un
Android virtual
Dispositivo.
Si el administrador de AVD está vacío, es decir, si no es como el administrador que se muestra en la
Figura 2-8, que muestra un dispositivo virtual etiquetado como Pixel API 28, debe crear un dispositivo
virtual de Android. Consulte la sección "Ejecución de aplicaciones en un dispositivo Android", más
adelante en este capítulo, para obtener más detalles.
Los dispositivos virtuales de Android no siempre se inician rápidamente. En mi computadora con

16 gigabytes de RAM, el tiempo de inicio puede ser de dos a tres minutos. En una computadora
con solo 4 gigabytes de RAM, es posible que el AVD nunca se inicie. El simulador de iPhone de
Apple tiende a ser un poco más ágil, pero nunca se sabe. He dedicado dos secciones posteriores
de este capítulo a los trucos del emulador de Android y del simulador de iPhone: "Sobre la
adición de dispositivos virtuales" y "División entre dispositivos".

Cuando aparezca la pantalla de inicio de su dispositivo virtual, estará listo para ejecutar la
aplicación Flutter de muestra.
11Haga clic en el ícono Ejecutar en la barra de herramientas de Android Studio. (Consulte la Figura 2-7.)
Como resultado, la ventana de la herramienta Ejecutar de Android Studio aparece en la parte inferior
de la ventana principal. Aparecen algunos mensajes mientras espera con impaciencia que la aplicación
comience a ejecutarse. Cuando la aplicación comienza a ejecutarse, el dispositivo virtual (el simulador o
emulador) luce una hermosa pantalla. (Vea la Figura 2-9.)
FIGURA 2-9:
¿No es maravilloso?
¡Felicidades! Tu primera aplicación se está ejecutando. Puede probar la aplicación haciendo clic
con el mouse en el botón de acción flotante de la aplicación (el elemento circular en la esquina
inferior derecha de la pantalla del dispositivo virtual). El mensaje en el medio le dice cuántas
veces ha hecho clic en el botón. No es la aplicación más útil del mundo, pero es un buen
comienzo.
Para obtener detalles sobre cualquiera de estos pasos, consulte las siguientes secciones.
Tratando con los detalles del diablo
Hace varias décadas, compré un libro sobre bases de datos en la mesa de grandes descuentos
de mi supermercado local. Cuando llevé el libro a casa, me quedé irremediablemente atascado
en el Capítulo 1. No sabía cómo ejecutar el software correctamente. Luché durante varias horas
y luego me rendí. Nunca he tocado el libro desde ese día.
¿Por qué escribo sobre esta desagradable experiencia? Escribo sobre esto para asegurarles que me he
raspado los nudillos tratando de ejecutar el software. Es el problema que la mayoría de los lectores
preguntan cuando me envían un correo electrónico. Es natural quedarse atascado y necesitar ayuda.
En secciones anteriores, presento los pasos básicos para configurar su computadora y ejecutar
su primera aplicación Flutter. Los pasos básicos son buenos, pero no funcionan para todos. Por
eso, en este apartado, profundizo un poco más.
En el mundo del desarrollo de aplicaciones móviles, las cosas cambian muy rápidamente. Las
instrucciones que escribo el martes pueden estar desactualizadas el jueves por la mañana. Los
creadores de Flutter siempre están creando nuevas funciones y nuevas herramientas. Las
herramientas antiguas dejan de funcionar y las instrucciones anteriores ya no se aplican. Si ve
algo en su pantalla que no se parece a una de mis capturas de pantalla, no se desespere. Puede
ser algo muy nuevo, o puede que haya llegado a un rincón del software que no describo en este
libro. De una forma u otra, envíame un correo electrónico o un tweet o alguna otra forma de
comunicación. (No envíe una paloma mensajera. Mi gato la alcanzará antes de que encuentre la
nota). Mi información de contacto se encuentra en la introducción de este libro.
Sobre la instalación de Android Studio

Lo que haga para instalar Android Studio depende de su sistema operativo:
»En Windows:El archivo descargado es probablemente un .exeexpediente. Haga doble clic en el

. exeicono del archivo.
Al hacer doble clic en el .exeicono del archivo, un asistente lo guía a través de la

instalación.
»En una Mac:El archivo descargado es probablemente un .DMGexpediente. Haga doble clic en el .DMG
icono del archivo.
Al hacer doble clic en el .DMGicono del archivo, verá el icono de Android Studio (también
conocido como el icono de Android Studio.app). Arrastre el icono de Android Studio a su
Aplicacionescarpeta.
Sobre .exearchivos y .DMGarchivos, no doy garantías. El archivo descargado puede ser un .

Código Postalarchivo o tal vez algún otro tipo exótico de archivo de almacenamiento. Si no
sabes qué hacer, envíame un correo electrónico.

Para obtener más información sobre temas como .exey .daño,consulte la barra lateral anterior "Esas
molestas extensiones de nombre de archivo". Y, si necesita ayuda con .Código Postalarchivos, consulte
la barra lateral anterior "Archivos comprimidos".
Sobre el lanzamiento de Android

Studio por primera vez
¿Es hora de lanzar Android Studio? Esta sección tiene algunos pequeños detalles.
»En Windows:Haga clic en el botón Inicio y busque la entrada de Android Studio.

»En una Mac:Presione Comando-espacio para que aparezca Spotlight. En el
Campo de búsqueda de Spotlight, empieza a escribirEstudio Android. Cuando tu Mac hace el nombre
completoEstudio Androidaparezca en el campo de búsqueda de Spotlight, presione Entrar.
Si su Mac se queja de que Android Studio es de un desarrollador no identificado, busque el ícono

de Android Studio en su carpeta Aplicaciones. Pulse Ctrl y haga clic en el icono de Android Studio
y seleccione Abrir. Cuando aparezca otro cuadro de "desarrollador no identificado", haga clic en
el botón Abrir del cuadro.
Cuando inicie Android Studio por primera vez, es posible que vea un cuadro de diálogo que le ofrece
importar la configuración de una instalación anterior de Android Studio. Lo más probable es que no
tenga una instalación anterior de Android Studio, por lo que debe rechazar esta oferta de manera
firme pero cortés.
Cuando el polvo se asienta, Android Studio muestra la pantalla de bienvenida. La pantalla de

bienvenida tiene opciones como Iniciar un nuevo proyecto de Android Studio, Abrir un proyecto
de Android Studio existente, Configurar y Obtener ayuda. (Consulte las Figuras 2-1 y 2-2.)
Verá esta pantalla de bienvenida una y otra vez. Dicho de manera informal, la pantalla de Bienvenida
dice: “En este momento, no está trabajando en ningún proyecto en particular (ninguna aplicación de
Flutter en particular). Entonces, ¿qué quieres hacer a continuación?
Sobre la instalación del complemento Flutter de Android Studio
Cuando inicie Android Studio por primera vez, definitivamente debe instalar el complemento de
Android Studio para desarrollar aplicaciones de Flutter. Aquí hay una mirada más cercana y detallada
de cómo hacerlo:
1.En la pantalla de bienvenida de Android Studio, seleccione Configurar-Complementos. (Consulte la

Figura 2-10.)
Aparecerá un cuadro de diálogo Complementos con tres pestañas en la pantalla. Las pestañas
están etiquetadas como Marketplace, Installed y Updates (vea la Figura 2-11).
FIGURA 2-10:
Verificar
Estudio de Android
complementos
FIGURA 2-11:
Los complementos
caja de diálogo.

En algunas versiones de Android Studio, la pantalla de Bienvenida no tiene la opción Configurar. En
ese caso, seleccione la opción Iniciar un nuevo proyecto de Android Studio en la pantalla de
bienvenida. Acepte todos los valores predeterminados hasta que vea la ventana principal de Android
Studio. Luego, en la barra de menú principal, seleccione Archivo - Configuración - Complementos (en
Windows) o Android Studio - Preferencias - Complementos (en una Mac).
2.Seleccione la pestaña Mercado.

Cuando lo hace, Android Studio le muestra una extensa lista de complementos
disponibles. Querrá reducir esta lista.
3.En el campo de búsqueda del cuadro de diálogo, escriba la palabraAleteo.

Android Studio te muestra un montón de complementos con la palabraAleteoen sus títulos.
Cada complemento tiene su propio botón Instalar. Busque el complemento llamado Aleteo
—noFragmentos de aleteo,formato_flutter_json, o algo por el estilo.
4.Seleccione el botón Instalar para el complemento llamado Flutter.

Después de mostrarle un cuadro de diálogo que crearon los abogados de Google, Android
Studio le pregunta si desea instalar el complemento Dart.
5.Seleccione Sí.
Definitivamente desea instalar el complemento Dart. (Para averiguar por qué, consulte el Capítulo 1.)
Cuando finaliza la instalación del complemento, Android Studio ofrece reiniciarse.
6.Reinicie Android Studio.

Después del reinicio, la pantalla de bienvenida de Android Studio tiene una nueva opción, con la
etiqueta Iniciar un nuevo proyecto de Flutter. (Consulte la Figura 2-2.) Ya está todo listo.
Sobre la adición de dispositivos virtuales
Cuando se trata de instalar dispositivos virtuales, las historias para iPhone y Android son un
poco diferentes.
»Con una computadora Apple, Windows o Linux, puede descargar Android Studio
y obtenga el emulador de Android que viene con él. Es posible que deba trabajar un poco
para instalar un dispositivo virtual de Android (AVD), pero eso no es gran cosa.
»Si tienes una computadora Apple, obtienes un simulador de iPhone al descargar

Software Xcode de Apple.
Si no tiene una computadora Apple, puede encontrar simuladores de terceros buscando en la

Web, pero tenga en cuenta que es difícil crear aplicaciones para el iPhone en cualquier otra
cosa que no sea una Mac. Dependiendo de la forma en que lo haga, el proceso podría incluso
ser ilegal.
Android hace una distinción entre un emulador y un dispositivo virtual de Android (AVD).
Aquí está la primicia:
»Cuando instala Android Studio, obtiene el emulador de teléfono Android

automáticamente. Este emulador puede cerrar la brecha entre el hardware de su
computadora de desarrollo y una maqueta del hardware de un teléfono. ¿Pero el
hardware de qué teléfono se está burlando? ¿Es un Samsung Galaxy o un Sony Xperia?
¿Qué tan grande es la pantalla del teléfono? ¿Qué tipo de cámara tiene el teléfono?
IMITANDO UN DISPOSITIVO FÍSICO ANDROID

El dispositivo emulado de Android es en realidad tres piezas de software en una sola:
• Aimagen del sistemaes una copia de una versión del sistema operativo Android.
Por ejemplo, una imagen de sistema en particular podría ser para Android Pie (nivel de API 28) que se
ejecuta en un procesador Intel x86_64.
• Unemuladorcierra la brecha entre la imagen del sistema y el procesador en su

computadora de desarrollo.
Es posible que tenga una imagen del sistema para un procesador Atom_64, pero su computadora
de desarrollo ejecuta un procesador Core i5. El emulador traduce las instrucciones para el
procesador Atom_64 en instrucciones que puede ejecutar el procesador Core i5.
• Un dispositivo virtual de Android (AVD) es una pieza de software que describe el hardware de
un dispositivo.
Un AVD contiene un montón de configuraciones que le dicen al emulador todos los detalles
sobre el dispositivo que se va a emular. ¿Cuál es la resolución de pantalla del dispositivo? ¿El
dispositivo tiene un teclado físico? ¿Tiene una cámara? ¿Cuánta memoria tiene? ¿Tiene una
tarjeta SD? Todas estas opciones pertenecen a un AVD en particular.
Los menús y cuadros de diálogo de Android Studio facilitan la confusión de estos tres elementos. Cuando
crea un nuevo AVD, crea una nueva imagen del sistema para acompañar ese AVD. Pero los cuadros de
diálogo de Android Studio borran la distinción entre el AVD y la imagen del sistema. También ves la
palabraemulador,cuando el término correcto esAVD. Si las sutiles diferencias entre las imágenes del
sistema, los emuladores y los AVD no le molestan, no se preocupe por ellas.
Un desarrollador de Android experimentado normalmente tiene varias imágenes del sistema y varios AVD
en la computadora de desarrollo, pero solo un programa emulador de Android.

1 Flutter-For-Dummies - Compress-001-061-.En - Es

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

1 Flutter-For-Dummies - Compress-001-061-.En - Es

Cargado por

Copyright:

Formatos disponibles

Traducido del inglés al español - www.onlinedoctranslator.

por Barry Burd, PhD

Publicado simultáneamente en Canadá

LÍMITE DE RESPONSABILIDAD/RENUNCIA DE GARANTÍA: EL EDITOR Y EL AUTOR NO OFRECEN DECLARACIONES NI GARANTÍAS

Número de control de la Biblioteca del Congreso: 2020935615

ISBN: 978-1-119-61258-2; 978-1-119-61261-2 (ebk); 978-1-119-61262-9 (ebk)

Fabricado en los Estados Unidos de América

Parte 2: Flutter: una vista de Burd's-Eye . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67

Parte 3: Detalles, Detalles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205

Parte 4: La parte de las decenas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

Parte 5: Apéndices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

CAPITULO 2: Configuración de su computadora para

Tabla de contenido viii

PARTE 2: FLUTTER: UNA VISTA DE BURD'S EYE . . . . . . . . . . . . . . . . . . . . . . . 67

CAPÍTULO 3: "Hola" de Flutter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Centrar el texto (Parte 2) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

Mostrar una imagen . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

CAPÍTULO 4: Hola de nuevo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105

viii Aleteo para tontos

Hacer que las cosas sucedan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131

Presionemos todos un botón de acción flotante. . . . . . . . . . . . . . . . . . . . . . . . .132

CAPÍTULO 6: Colocar las cosas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163

Flexionando algunos músculos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196

Creación de botones de opción. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .230

CAPÍTULO 8: Navegación, listas y otras ventajas . . . . . . . . . . . . . . . 247

X Aleteo para tontos

Preparando el escenario para la animación Flutter. . . . . . . . . . . . . . . . . . . . . . . . .297

PARTE 4: LA PARTE DE LAS DIEZ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321

CAPÍTULO 11: Diez formas de mejorar su aplicación

CAPÍTULO 12: Diez capítulos sobre el desarrollo de aplicaciones de Flutter . . . . 331

PARTE 5: APÉNDICES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335

xi Aleteo para tontos

¿Estás interesado en desarrollar aplicaciones de Flutter? Si es así, estás en buena compañía.

Como usar este libro

En general, mi consejo es este:

»Si ya sabes algo, no te molestes en leer al respecto.

»Se establecen nuevos términos encursiva.

»Tu también ves estoinformaticofuente. yo sueloinformaticopara el código Flutter,

cadena finalcualquier nombre;

Lo que no tienes que leer

»Si ya sabes que tipo de animal es Flutter y no te importa

»Si ya sabe cómo ejecutar una aplicación Flutter:Omita la Parte 1 y comience

»Si ya ha jugado con algunas aplicaciones simples de Flutter:Pasar rozando

»Si tienes experiencia escribiendo aplicaciones de Flutter:ven a mi casa y ayuda

2 Aleteo para tontos

»Supongo que tienes acceso a una computadora.El acceso a un teléfono inteligente es

»Supongo que puede navegar por los menús comunes de su computadora y

»Hago muy pocas suposiciones sobre la programación de su computadora

Parte 2, "Flutter: una vista de Burd's-Eye"

Parte 3, “Detalles, Detalles”

Parte 4, “La parte de los diez”

4 Aleteo para tontos

Eso es fácil. Simplemente visite el sitio web de este libro:www.allmycode.com/Flutter.Allí puede

Iconos utilizados en este libro

Aquí hay una lista de íconos que uso en este libro:

Puedes pensar en la palabraRecuerdaen dos contextos diferentes. Un contexto es:

De vez en cuando, me encuentro con un dato técnico. El dato puede ayudarlo a

Más allá del libro

A dónde ir desde aquí

¡Basta ya de introducción! Adelante a Flutter. . . .

6 Aleteo para tontos

Trabajando a través de los aspectos prácticos del desarrollo de

Preparando su computadora de desarrollo