Antes de iniciar a fondo con Dart, me gustaría presentarte DartPad, la herramienta que vamos a estar usando durante este curso.
Puedes acceder gratuitamente a Dartpad a través del link https://dartpad.dev
Como siempre, recuerda que puedes visitar el índice del curso con las clases anteriores y posteriores en este link
¿Qué es DartPad?
DartPad es una página web creada por el equipo de Dart, que te permite escribir y ejecutar código de Dart sin necesidad de crear un proyecto completo de Flutter para luego correrlo en un simulador.
Su interfaz es supremamente sencilla y minimalista, lo que la hace una herramienta muy agradable y sencilla para trabajar.
¡DartPad viene con Flutter ya instalado! Eso significa que si quieres probar un código de Flutter en DartPad puedes hacerlo sin ningún problema.
Por último, te recomiendo visitar el sitio en Google Chrome donde sin duda funciona con mayor rendimiento. En mi experiencia personal, Firefox y Safari pueden llegar a presentar algunos problemas cuando el código es bastante grande o demorado de ejecutar.
¿Cómo funciona DartPad?
DartPad es bastante sencillo de entender y usar afortunadamente. Vamos por pasos:
Barra de navegación
Es la barra que ves en la parte superior de la pantalla. Cuenta a su vez con varias funciones y elementos:
- New Pad: Es el equivalente a un new file. Te permite crear una versión en blanco nueva de un archivo “Pad” para trabajar
- Reset: Resetea el archivo actual por completo.
- Format: Formatea el código que tengas para que esté bien indentado y se vea “bonito” y fácil de leer
- Puedes hacer la prueba copiando el siguiente código y pegándolo en el panel de la izquierda. Luego dale click al boton Format.
void aFunction() {print("hello");}- Deberías ver como DartPad coloca tu código en tres líneas y la línea 2 está indentada un poco más a la derecha que las demás. Hace más fácil leer el código.
- De momento no te preocupes por el significado del código, era solo un ejemplo
- Install SDK: Te redirecciona a un link para instalar el SDK de Dart
- elegant-tundra-2361:Es el nombre de tu archivo “Pad”. Por defecto, DartPad se inventa un nombre aleatorio y lo asigna a tu archivo. Cada vez que generes un archivo nuevo, tendrás un nombre nuevo.
- Samples: Son algunos ejemplos de código en Dart, listos para que los uses. Te invito si tienes un tiempo a darles una mirada para que veas algo del código que puedes hacer en Dart
- Github: Te permite iniciar sesión en Github y crear y compartir código realizado directamente en DartPad. ¡Súper útil para equipos de desarrollo!
- Enlaces externos: Enlaces externos de DartPad que pueden ser útiles en algunas ocasiones
Panel de código
El panel de código es el lugar donde escribirás todo el código de Dart. Será nuestro lugar principal de trabajo por todo el curso.
Tiene a su vez un pequeño botón azul con el texto “Run”. Este botón sirve para indicarle a DartPad que debe ejecutar nuestro código escrito. ¡Al final de este post, haremos un ejemplo de Hello World!
La consola
La consola es una herramienta que tienen todos los lenguajes de programación, donde podrás ver y entender que es lo que está sucediendo en tu programa cuando lo ejecutes.
Podrás ver errores, mensajes, resultados y mucho más en la consola. La estaremos utilizando muchísimo a lo largo de este curso.
Así mismo, la consola tiene un pequeño botón arriba a la derecha con el cual podrás limpiar los mensajes cuando tengas muchos y quieras tener la consola vacía.
Panel de Documentación
El panel de documentación es uno de los más útiles al momento de programar en DartPad. Te permite obtener información de la documentación de Dart acerca de métodos que estás usando en tu código.
¡Hagamos una prueba!
Copia el siguiente código en el panel de código. Luego haz click sobre la palabra “print”. ¿Qué sucede en el panel de documentación?
void thisIsAMethod() {
print("This is a method");
}Verás que sale una explicación de la documentación de lo que hace el método print. Abajo el resultado que deberías ver:
Toolbar
El toolbar es nuestra barra inferior de DartPad. Cuenta con varias funciones también:
- Atajos de teclado: Algunos atajos de teclado útiles al momento de utilizar DartPad. Algunos de los que más uso son el de Run y el de Find, pero usa los que más se adapten a tu gusto.
- Privacy notice: Política de privacidad de Dart
- Send feedback: Puedes enviar feedback al equipo de Dart sobre DartPad
- Stable Channel: Es una función avanzada donde si quieres probar un canal de Flutter que no sea el canal estable puedes hacerlo aquí. Para todo este curso usaremos siempre stable
- No issues: Aquí DartPad te indicará cuantos errores ha encontrado en tu código. De momento no tenemos ninguno dado que no hay código en el panel de código
- Version de Flutter y Dart: En este texto nos indican la versión de Flutter y Dart que está usando DartPad en este momento
- Información: Si das click a este botón, DartPad abrirá un popup donde podrás encontrar las librerías que puedes importar en tu código de DartPad junto a sus versiones. Esto es muy útil cuando quieres probar una librería de código
- Si no conoces el término librería, no te preocupes, deja te lo explico rápidamente. Una librería es un conjunto de archivos que crea un desarrollador o empresa para que otros usen con un propósito específico.
- Por ejemplo, hay librerías para que tu app pueda poner un video, reproducir un audio, hacer una animación, conectarse a un servidor, etc.
- Son supremamente útiles y usamos (y usaremos) muchas en los cursos de EscuelaDeTech.com
¡Nuestro primer Hello World!
Vaya, aprendimos bastante hasta aquí. Vamos a cerrar este artículo poniendo en práctica lo aprendido y creando nuestro primer Hello World.
El hello world es una tradición en el mundo de la programación. Es el primer código que se suele enseñar y ejecutar cuando aprendes un nuevo lenguaje.
Consiste en colocar en la consola el mensaje “Hello world”.
Colocar un mensaje en la consola se le llama “imprimir” o “print”. Así que cuando escuches la expresión “Imprimir en la consola este mensaje” significa simplemente ver el mensaje en la consola.
En el panel de código coloca el siguiente código por favor y luego oprime el botón “Run”:
void main() {
print("Hello World!");
}Si realizaste todo bien, deberías ver el mensaje “Hello World!” impreso en la consola.
¡Felicidades! Acabas de hacer tu primer código con Dart
En el próximo artículo entraremos a detalle en Dart y explicaremos cada parte de este código que acabamos de ejecutar.
Espero te haya gustado esta clase. No olvides compartirla con tus amigos y te espero en la siguiente.
Link a la siguiente clase: