Ruta de aprendizaje para crear aplicaciones móviles con Flutter - Parte 2:
Aprende lo básico de Dart - Dartpad
Ahora que sabemos que es Flutter y lo que es Dart, vamos a comenzar con lo básico de Dart para ir avanzando.
Dartpad:
Es una herramienta en línea que nos permite escribir fragmentos de código y ejecutarlos, podemos escribir código Dart puro o también utilizarlo con código Flutter, esto nos facilita el entrar a practicar sin necesidad de tener todo el entorno configurado en nuestra computadora.
Para poder utilizarlo basta con entrar a: https://dartpad.dev/
En este link veremos una pantalla como la siguiente:
Acá tenemos 5 puntos a los cuales prestarles atención:
En el punto número uno como podemos ver nos muestra un editor de código donde ya tiene escrito un fragmento de código Dart, por el momento no se preocupen en entenderlo, solo quiero mostrarles lo que nos facilita Dartpad.
En el punto número dos, podemos ver que tenemos un botón que dice "Run", este botón nos permite ejecutar el código escrito en el punto número uno.
Al ejecutar el código por medio del botón del punto número dos, podemos ver otro recuadro, el cual es una consola y nos muestra la salida que nos brinda el código Dart, en este caso imprime un texto que dice "hello" seguido de un número, este código hace una iteración en el ciclo "for" mientras que el dígito sea menor a 5, es por ello que va en aumento hasta llegar al 5, por el momento no se preocupen en entenderlo ya lo comprenderán cuando veamos las bases del código en Dart.
En el punto número cuatro es solamente informativo, pero nos permite ver con qué versión de código se está ejecutando el código escrito, esto es para saber que características tiene Dart en esa versión, ya que cada cierto tiempo se liberan nuevas versiones que contienen muchas más funcionalidades para Dart, esto con el motivo de hacernos la vida más fácil e ir mejorando el código Dart.
En el punto número cinco, tenemos un menú que se despliega y podemos ver una lista de ejemplos como el que estamos viendo actualmente, pero estos ejemplos ya vienen con "Flutter".
Si damos clic en el menú y seleccionamos el que dice: "Counter", este nos cargará un ejemplo de una aplicación donde tiene un contador:
Como podemos ver este ejemplo ya contiene interface gráfica, justamente esto es lo que nos permite el código Flutter, crear este tipo de interfaces para nuestras aplicaciones.
Modificando código:
Aquí si quisieras probar podrías dar clic en el botón con el símbolo de "+" y verás como el contador irá incrementando, depende a las veces que lo toques.
También podrías editar el código, por ejemplo:
Donde dice 'Flutter Demo Home page' y cambiarlo por: "Aprendiendo Flutter", una vez que lo cambies presiona en el botón de "Run" y con esto verás como el título de la aplicación cambia:
Listo, como podemos ver mi barra de título cambio y el número del contador también, esto nos sirve de mucho para poder practicar, puedes intentar modificar otro texto o cualquier cosa que se te ocurra igual si se rompe no pasa nada, ya que solo vuelves a cargar el ejemplo y con esto volvería a la normalidad.
Por último: estoy intentando llegar a los 1000 suscriptores en Facebook y estoy en proceso de crear comunidad, te agradecería que me siguieras en mis redes sociales y te unieras a mi servidor de Discord donde estaré publicando, cada que suba contenido nuevo, al igual podrías suscribirte a mi newsletter, te dejo mis links aquí abajo: