UNIVERSIDAD DE EL SALVADOR

FACULTAD MULTIDISCIPLINARIA ORIENTAL

INTRODUCCIÓN AL DESARROLLO MÓVIL CON FLUTTER

Raul Ernesto Perdomo Coreas

Universidad de El Salvador, Facultad Multidisciplinaria Oriental

San Miguel , El Salvador

raulep1990@gmail.com

Obed Alberto Castro Orellana

Universidad de El Salvador, Facultad Multidisciplinaria Oriental

San Miguel , El Salvador

albcast26@gmail.com

Luis José Iraheta Medrano

Universidad de El Salvador, Facultad Multidisciplinaria Oriental

San Miguel , El Salvador

liluisjose1@gmail.com

1
 INDICE
PASO 1--------------------------------------------------------------------------------------------------------------- 1
PASO2---------------------------------------------------------------------------------------------------------------- 4
PASO 3--------------------------------------------------------------------------------------------------------------- 6
PASO 4--------------------------------------------------------------------------------------------------------------- 8
PASO 5--------------------------------------------------------------------------------------------------------------- 9
PASO 6--------------------------------------------------------------------------------------------------------------10
PASO 7--------------------------------------------------------------------------------------------------------------11
PASO 8--------------------------------------------------------------------------------------------------------------14
PASO 9--------------------------------------------------------------------------------------------------------------14

2
PASO 1
Creación de un nuevo Proyecto VSCODE Windows/Linux
Se crea un nuevo proyecto flutter desde la linea de comandos

Se especifica el nombre de Proyecto a asignar

Se asigna una ruta para la carpeta que contendra el proyecto, en la esquina superior derecha se
selecciona la carpeta raiz donde estara el proyecto.

Mientras se crea el proyecto sera normal observar las siguientes notificaciones emergentes en el
mismo IDE.

1
Si todo ha salido bien y no se ha tenido problema se lucira un entorno como el siguiente:

Prestando atención a que toda la creación y sincronizacion sea correcta al observar la siguiente
notificación:

Indicando que todo esta bien aparecera la misma.

Para comenzar a probar los emuladores nativos o de vysor que se tiene se puede hacer uso del
comando Flutter: Launch Emulator

2
Posterior a esto se debera seleccionar el tipo de AVD o dispositivo para probar y emular la
aplicación.

Como se puede observar en la imagen anterior se procede a ejecutarlo para que aparezca el
dispositivo emulando junto al entorno de VSCODE asi:

3
PASO2
Ubicación de asistente en las Rutas de trabajo del proyecto de la
aplicación
Esta es la ruta que se crea automaticamente al comenzar un proyecto siendo la que se trabajara la ruta
lib que es donde se encuentra el codigo dart que tiene todos los datos que se necesita para
implementar el diseño y logica de la aplicacion

Creará una carpeta como esta en el proyecto base en la ruta donde te encuentres:

Los archivos que nos importan aquí son los que se encuentran dentro de la carpeta lib/ , que
corresponden a los archivos de la aplicación.

la aplicación se desarrollara desde el archivo main.dart nada mas no se manipulara otro archivo al
menos de momento.

4
Pues existe tambien el archivo pubspec.yaml archivo el cual contiene las dependencias del proyecto
y sus configuraciones. (De este archivo hablaremos más adelante para su aplicacion en el punto del
OIT)

5
PASO 3
Edición de codigo inicial
Apartir de la creacion del proyecto y las carpetas que se generan las mismas carpetas estan sujetas a
la estructura que crea la tecnologia y al tener esta tecnologia similitudes con otras tecnologias y
lenguajes de programacion, al trabajar con Dart la misma ocupa una clase principal desde donde
indexar todas y cada una de las caracteristicas que se necesitan aplicar al proyecto de manera que el
archivo main.dart inicialmente esta conformada por una estructura de codigo como la siguiente:

6
El mismo codigo se editara para poder aplicar el diseño propio para la aplicacion de X y 0 que se ha
planteado para el desarrollo del taller desaciendonos deel codigo original y dejando de momento
este:

Bien de momento nos

quedamos con esta seccion de codigo que es practicamente una clase padre de construcción, a la cual
se indexara una clase hijo que manipulara todas las actividades dentro de la aplicación la misma sera
titulada HomePage() la misma incluira dentro de ella una serie de características que daran vida a la
aplicacion. Pero para no resultar confuso adjuntamos una pequeña descripción de algunas partes de
codigo:

 StatelessWidget: Este widget no requiere ningún estado mutable y se usará en otros

momentos que no sean los datos que se pasaron inicialmente al objeto. Algunos de los widgets
que admiten en esta categoria son textos, botones, iconos, etiquetas, campo de texto etc.
 Build: Cada widget en Flutter se crea a partir de un build método, y cada método de
compilación toma BuildContext como argumento.
 Context:no es más que una referencia a la ubicación de un Widget dentro de la estructura de
árbol de todos los Widgets que se construyen. En resumen, piense en un contexto como la
parte del árbol de Widgets donde el Widget se adjunta a este árbol.
 PrimarySwatch: Es MaterialColor. Lo que significa que son los diferentes tonos de un
color que usará una aplicación de material.

7
PASO 4
Se procede a crear la clase de estado de la aplicacion es decir donde se indexa el metodo de
construccion de la aplicacion marcando como estado todos las actividades que tenemos dentro de la
misma, siendo estas principalmente la manipulación y construcción del tablero que hay dentro del
widget principal que sera creado a partir de librerias y metodos de dibujo pero para definir la misma
se establece mediante la clase estado la cual es la siguiente:

Cabe destacar que la anotacion @override solo señala que la función también se define en una clase
ancestral, pero se está redefiniendo para hacer otra cosa en la clase actual. También se utiliza para
anotar la implementación de un método abstracto. Es opcional de usar pero recomendado, ya que
mejora la legibilidad. Y en State<StatefulWidget> createState() creara el estado o registro de
estados que contendra todas las actividades de la aplicacion desde pulsaciones o tokens hasta la
construccion de la misma. Y en la parte del return _HomePageState(); es un constructor que se
indexa de la clase que contruira el widget y le dara vida a la aplicacion con las funciones que se
indexen en ella.

Luego de las clases anteriores se procede a crear la clase generica que si bien es cierto no tendra nada
que mostrar pues el widget de construccion no se ha definido pero si se ha dicho a la clase de
construccion de el modelo mediante la linea class _HomePageState extends State<HomePage>
que la clase de construccion estara vinculada, sincronizada y heredada a la clase principal de estados
de la aplicacion donde se vuelve a utilizar @override porque la funcion de Widget contendra el
estado de la homepage o pagina de inicio que ira marcando todas las actividades

8
PASO 5
Ahora dentro de esta misma clase _HomePageState crearemos un andamio o estructura en base a un
tablero tradicional de lo que es un juego de X y 0 que como se sabe son 4 lineas interceptadas a la
mitad 2 en horizontal y 2 en vertical respectivamente, concentrandonos de momento en hacer el
andamiaje de la pantalla principal es decir el tablero de X y 0, configurando al mismo tiempo con
metodos de diseño propios del widget generico que se creo con el proyecto.

Bien de momento esta es la parte de codigo que se implementara a manera de comprobar junto con el
asistente que todo esta funcionando bien y de acuerdo a las propiedades del Widget, viendose en la
pantalla de la aplicacion 2 cambios no significativos pero si importantes como lo es el titulo de la
barra de inicio o el encabezado de la aplicacion que la misma va entre comillas simples ‘’ mismas
que ocupan el espacio en blanco, para dicho espacio se coloca el texto que desee, la aplicacion de
algunas propiedades estan descritas en el codigo Dart que se envio, pero tambien se brindara una
descripcion de propiedades como las siguientes:

 Return Scaffold: Practicamente es nuestra Clase Andamio o mejor dicho el encargado de

estructurar el esqueleto de nuestra aplicacion, Implementa la estructura del diseño visual del
material básico. Esta clase proporciona API para mostrar o dibujar cajas, snack bars o barras de
notificacion y hojas inferiores o pantallas que se deslizan desde un area de la ventana en
especifico.
 appBar: Una barra de aplicaciones consta de una barra de herramientas y, potencialmente, otros
widgets, Las barras de aplicaciones normalmente se usan en la propiedad Scaffold.appBar , que
coloca la barra de aplicaciones como un widget de altura fija en la parte superior de la pantalla.
 Tittle: Text(): Las imágenes, iconos, y texto que ves en una app Flutter, son todo widgets. Pero
cosas que no ves también son widgets, como son filas, columnas, y cuadrículas que organizan,
restringen, y alinean los widgets visibles. De manera que crea un widget de texto que para el
caso contendra el titulo de nuestra aplicación. Para centrar este widget en su lugar simplemente
se usa una propiedad propia de text que es centerTitle: true, que la misma mostrara toda la
pantalla al centro.
 Body: se coloca en la parte superior izquierda del espacio disponible entre la barra de
aplicaciones y la parte inferior del andamio o esqueleto de la aplicacion el mismo permite ubicar
o mostrar el widget que esta sobre la pantalla de la aplicacion.
 Child: está ahí para la optimización. Si tienes un gran subárbol de widgets bajo tu Consumer
que no cambia cuando el model cambia, puedes construir este una sola vez y obtenerlo a traves
del builder.

9
PASO 6
Bien a continuacion aprovecharemos de que funciona la clase principal con la muestra en pantalla y
construiremos la funcion _construlletablero(){} de manera vacia para que se vaya mostrando el
dibujo de las celdas que mostraran todos los caracteres del X y O

Se muestra como _buildElement() de momento porque fue cuando se empezo a crear la aplicacion
antes de hacer la documentacion pero la de construlle tablero lleva las mismas propiedades algunas
las describire aqui:

 Return Container(): un widget de uso común está compuesto por varios widgets responsables
del diseño, pintado, posicionamiento y dimensionado. Específicamente, Container está
compuesto por widgets LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox, y
Transform widgets.
 Shape: BoxShape: es una tecnica usada en flutter para mostrar un dibujo o que una simple linea
tome una forma geometrica especifica que puede ser un rectangulo, cuadrado, triangulo, circulo
etc. De manera que al usar la propiedad shape del container le estamos diciendo que usaremos
un dibujo y la forma especifica del mismo es una caja la cual es BoxShape que tiene multiples
propiedades de dibujo geometricas que se adaptan de acuerdo a la pantalla en que estan, es decir
no es necesario dar medidas ni nada por el estilo. La propiedad que usaremos sera de rectangulo
la misma ira incertada el texto inicial para el caso sera X como forma de prueba.
 Border: Border.all(): se aplica un borde al dibujo el cual se aplica de manera total, para que
remarque toda la pantalla
 Style: TextStyle(): es una propiedad de estilo de widget que sirve para especificar propiedades
visuales del mismo, si se fijan hasta se puede decir que se parece mucho a CSS en cuanto a la
definición de sus propiedades, con la diferencia que aqui se indexa el diseño y se edita al mismo
tiempo.

10
PASO 7
Ahora implementaremos las propiedades que definimos en nuestra funcion de construccion para
empezar a mapear la grid o el tablero para hacerlo procedemos a agregar este condigo a partir o
despues mejor dicho de la linea child: Text (clase _HomePageState) que esta definida como texto
la pasaremos a Columna en esta linea asi:

De momento tendremos esta asi y comenzaremos a emplear la parte complementaria para que se
muestre la aplicacion con el tablero de X y 0

Bien de momento lo nuevo que hay en el codigo es la propiedad Row (fila) que ira construyendo fila
a fila cada nuevo elemento del tablero de momento este tablero incorpora una propiedad que es
children la misma es propia de flutter y sirve para llevar multiples propiedades de un widget para el
caso el widget es Column y las propiedades son las filas que a su vez contienen propiedades de
contruccion que son los parametros de la funcion _BuildElement() que es el equivalente a
_construyetablero para el mismo mostrar un resultado de aplicacion como este:

11
Como se puede observar no esta centrado del todode manera que procedemos a indexar una
propiedad de la columna para centrarla y luego la misma se le pasara a cada fila quedando
inicialmente asi:

Esta linea es la que se le agrega a la columna principal mainAxisAlignment:

MainAxisAlignment.center, que Controla como una fila o columna alinea sus hijos. Para una
columna, el eje principal corre verticalmente y el eje transversal corre horizontalmente. Como esta
ilustracion:

Estas misma propiedad se aplica a las demas filas con una pequeña diferencia que hay una propiedad
min incertada entre ambas esta misma se usa para reducir el espacio que hay entre cada columna al
minimo es decir un autoajuste.
De manera que el codigo final queda como aparecera a continuacion:

12
Dando un resultado como el siguiente:

Luego en el _construlletablero van indexados los parametros de plano cartesiano para ubicar las
filas y columnas

13
PASO 8
Procederemos a crear una matriz al inicio del widget para poder ir llenando los espacios vacios
dentro de la aplicacion con X y 0 de acuerdo a las pulsaciones del usuario de esta manera:

Aqui tenemos nuestra matriz y nosotros la inicializamos al decir que tiene 3 filas que son las
propiedades Row que pasan al parametro _matrix y luego por encima de la misma matris que
contiene las filas decimos que las mismas incrementan por que llevan indexadas 3 columnas
_matrix[i]=List(3); y cada columa tiene dentro de si un valor de vacio o espacio en blanco que se
rellenara con las pulsaciones del usuario.
Pero para que esto funcione necesitamos implementar un metodo para rellenar el recuadro y otro par
aque reconozca las pulsaciones del usuario pero primero tenemos que extablecer un parametro de
inicializacion de ultima pulsacion registrada asignarle un valor, de manera que en medio de las lineas
de contruccion del widget y el widget se establecera esta variable:

Misma que se implementara en la clase _cambiodevalores.

PASO 9
Se implementa la clase cambio de valores debajo del metodo de construccion de matriz asi:

Despues de esto se puede indexar la misma en la parte de _construlletablero asi:

14
Aqui automaticamente ira rellenando los
espacios vacios de el tablero.
NOTA: No funcionara eventualmente
sino hacemos las modificaciones
pertinentes a las propiedades de
texto que estaban anteriormente

Como se recuerdan el widget de texto estaba establecido como X pero sale mejor cambiarlo y dejarlo
con la variable _matrix[i][j], que esta tomando los valores de la matriz inicial contando las filas y
columnas respectivamente.

15
16