Crea una cuenta o inicia sesión

¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera

Convierte tus certificados en títulos universitarios en USA

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

19 Días
1 Hrs
24 Min
45 Seg

Introducción a DartPad

3/23
Recursos

Aportes 18

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Recomiendo poner la velocidad del curso a 1.75, se puede entender sin problemas

DartPad es una herramienta que te deja programar de manera web y te ayuda a conocer el lenguaje de distintas maneras y te ayudara a dar los primeros pasos en este lenguaje de programación así también distintos módulos para crear en flutter entre otros también te ayudara a hacer un mejor código mediante distintos métodos y ciertas ayudas.

Cuando demos en click en el botón <New Pad> nos dará a elegir las dos opciones:

  • Dart sirve para hacer aplicaciones de consola o aplicaciones web
  • Flutter sirve para hacer aplicaciones móviles o web
    • Como en este curso trabajaremos en consola únicamente daremos click a HTML
  • El botón “Reset” sirve para parar una secuencia o algo que se este corriendo o renovar la ejecución de la aplicación
  • El botón “Format” servirá para estilizar el texto, no tener un desastre y tener lineas de código en la forma que debe de ser,
  • El botón “Install SDK” sirve para instalar dart (la maquina virtual) en nuestra computadora en algún IDE o editor de texto tales como VSCODE, etc… y crear aplicaciones con DART comunicándonos con la maquina virtual
  • El botón de “Samples” permite cargar ciertos proyectos ya hechos los cuales usan solamente Dart y cargar el código necesario para una app de Flutter y del lado derecho podremos verla correr esta misma app.
  • En el botón “tres puntos” nos servirá para ver enlaces externos o funciones adicionales como: Compartir, ver el código fuente de DartPad en github, ver la pagina de para ver información etc etc. y flutter.dev donde podremos ver información de flutter

Función Maine

Es en el momento cuando ejecutamos una app es el método en donde la maquina virtual buscara para ejecutar

Tiene tres partes :

  1. Función “Void” la cual indica que esta función no retorna a nada.
  2. Maine, palabra que solo puede usar en la parte inicial del código para que la maquina empieza a ejecutar él código desde esta linea
  3. Paréntesis Curvos {}, esta indica donde comienza la función y donde termina.

Bullets

  • Al escribir texto en dart se pondrá comillas
  • Al finalizar cada linea de dart se pondrá “;” para indicar que la linea ha terminado.

Wujuuu😊✨

Me agrada bastante que sea un lenguaje orientado a objetos y que además se parezca mucho a Java en cuanto a sintaxis. Ya he trabajado con Java, así que espero este curso se me dé bien.

Listo

Hay una herramienta más poderosa que el DartPad. Si no quieres instalar flutter en la computadora y quieres hacer un proyecto full desde el navegador: https://zapp.run/. Está en Early Access pero apuesto a que se tendrá acceso a todo el mundo después.

Que es DartPad?

DartPad es un editor de codigo web online que permite construir codigo de forma rapida y sencilla
para Dart y Flutter sin necesidad de instalar la maquina virtual de Dart. DartPad cuenta con una
serie de ayudas y herramientas que nos permiten escribir codigo mas eficiente y de calidad, ya que cuenta con la validacion del codigo en tiempo real (tiempo de ejecucion).

===> Link oficial DartPad: https://dartpad.dev/
Accediendo a este link podemos a crear proyecto en lo que se conoce como un sandbox o dicho de otra
forma, un espacio de trabajo en donde podemos construir nuestro codigo en la nube de forma temporal

Una vez ingresemos al editor veremos unas opciones que nos ayudaran en el desarrollo.

  • <> New Pad: Nos permite crear un nuevo espacio de trabajo o sandbox vacio. Cada vez que creamos
    un nuevo espacio de trabajo el identificador del sandbox cambia para inidicarnos que es un proyecto
    diferente y unico.Cuando clickeamos en “<> New Pad”, nos aparece una ventana en la cual nos da dos opciones de codigo
    para desarrollar, estos son: Dart o Flutter.Con Dartad podemos generar proyectos de consola o web si seleccionamos Dart, y con Flutter podemos crear aplicaciones moviles o web.Para este caso crearemos una aplicacion de consola para ver los conceptos basicos del lenguaje.

  • Reset: Esta opcion nos permite detener un codigo en ejecucion si por algun motivo falla llegase a
    fallar nuestro codigo.

  • Format: Esta opcion nos ayuda a identar de forma automaticamente nuestro codigo con el fin de que
    se vea mas ordenado y mucho mas legible, aparte de enseñarnos a escribir codigo de forma adecuada.

  • Install SDK: Esta opcion nos permite descargar la maquina virtual de Dart para poder instalarla
    en nuestro computador y con ayuda de algun editor de codigo (VSCode), crear aplicaciones gracias con
    su maquina virtual en entorno local.

  • identificador del sandbox: Este nos indica numero o codigo con el cual se encuentra registrado
    nuestro sandbox de pruebas. Cada vez que creamos un nuevo Pad, creamos tambien un nuevo espacio
    de trabajo en los servidores de Dart y este codigo es el que lo identifica.

  • Samples: Esta opcion nos permite cargar proyectos creados por defecto para detallar el codigo y
    su funcionamiento a modo de aprendizaje. Podemos econtrar ejemplos de proyectos en Dart y Flutter.
    Estos proyectos nos ayudaran a entender mejor las mejores practicas de desarrollo con Dart y nos
    propone una logica en cada uno de sus ejemplo de forma sencilla. Es recomendable ver estos ejmplos
    para entender el lenguaje y su dinamica de uso.

  • Icono de GitHub: Esta opcion nos permite conectarnos con nuestra cuenta de GitHub para almacenar
    nuestros proyectos de forma que podamos salvarlos en la nube y versionar cada proyecto desde DartPad
    sin perder la evolucion del mismo.

  • Icono de los tres puntos: Esta opcion nos despliega una lista en un popover entre las que econtramos:

    • Share - Compartir el editor DartPad con otras personas.
    • DartPad on GitHub - Permite ver, descargar y aportar en el codigo fuente del editor DartPad en su repositorio oficial en GitHub.
    • dart.dev - Es un link que nos lleva directamente al sitio oficial de Dart en donde podremos encontrar la documentacion, ejemplos y otras carcteristicas para desarrollar en aplicaciones de
      consola o web.
    • flutter.dev - Es un link que nos lleva directamente al sitio oficial de Flutter en donde podremos encontrar la documentacion, ejemplos y otras carcteristicas para desarrollar en moviles.

FUNCION MAIN()

La funcion main, es la funcion principal de mi aplicacion en la cual debemos poner todo el codigo que
necesitamos desarrollar para que sea ejecutado de forma adecuada por el lenguaje. Solo puede existir
una funcion main en toda mi aplicacion.

↠ Estructura:

void main() {
    
    // Codigo de mi aplicacion

}

Componentes de la funcion main():

  • void: Significa que la funcion no retorna ningun tipo de dato (vacio).
  • main: Nombe de la funcion principal
  • parentesis (): Es la forma de crear una funcion
  • llaves {}: Es donce comienza { y donde termina } mi funcion y son los simbolos dentro de los
    cuales debe ir nuestro codigo

NOTA: Siempre que escribamos una linea de codigo, debemos finalizarla con punto y coma ; para que
nos nos marque un error y para que este correcta la sintaxis.

“The dart path…” jajjaja, en serio más chistes con Star Wars y Dart

DartPad

ℹ️ Definición
DartPad es un editor para el lenguaje Dart.

.
Además de ejecutar programas mediante Dart, DartPad puede lanzar aplicaciones Flutter, mostrando la salida como su representación en un dispositivo.
.
La razón de su existencia es el aprendizaje / pruebas de códigos (snippets), sin tener que configurar un entorno de desarrollo.
.

.

Desarrollo de snippets con DartPad

Concepto clave
DartPad soporta librerías core (dart:*) o escritas con Flutter (package:flutter y dart:ui).

.

  1. Yendo al sitio DartPad
  2. Escoge el ejemplo a correr, el cual según el caso (Dart o Flutter) se mostrará como su salida.

.

Debate
¿Sabías que DartPad puede ser embebido en un sitio web?

Además de dartpad y zapp.run que comenta un compañero en otro comentario, también podemos usar dart en Replit, por si a alguien le interesa. 😃

A fecha de 2024 se actualizó DarPad y ya no es posible conectar tan sencillo un con Github, lo que yo realicé fue acceder a : https://gist.github.com/{username} 1. Codeen lo que quieran en DartPad. 2. Luego crean un archivo gist en el link que pasé más arriba. (Pueden ponerle cualquier nombre de proyecto, pero el archivo debe ser main.dart). 3. Antes de crear el gist, verifiquen que esta como public gist.![](https://static.platzi.com/media/user_upload/image-b1185a41-0637-447f-9e6d-c6f8d5153852.jpg) 4. Luego para acceder al archivo que crearon cambian toda la parte que sigue después de "id=" [dartpad.dev/?id=5c0e154dd50af4a9ac856908061291bc](https://dartpad.dev/?id=5c0e154dd50af4a9ac856908061291bc) 5. Para obtener su id sólo acceden a su gist, siempre tendrá esta estructura:![](https://static.platzi.com/media/user_upload/image-3302f652-9897-4689-a573-361ac2412be2.jpg) https://gist.github.com/{username}/{id} fuente: <https://github.com/dart-lang/dart-pad/wiki/Sharing-Guide>
Hola a todos, feliz año 2024, si quieren que los cursos sean actualizados deben botar en <https://roadmap.platzi.com/roadmap> Para Flutter <https://roadmap.platzi.com/submissions/650e57ac660475556c028d94> Para Dart <https://roadmap.platzi.com/submissions/657a6de0970ee53abe34ff1e>

Estoy muy contento de ver que han sacado un curso de Dart más actualizado, le tengo mucha fe a este lenguaje y sé que es el futuro del desarrollo multiplataforma. ¡Estoy esperando con ansias el curso actualizado de Flutter!

Melvin, lo haces parecer muy fácil de hacer jeje!! y si, funcionó!!! La primera línea con DART!!! GRacias

Dartpad

is an open source tool that lets you play with the Dart language in any modern browser.

https://dart.dev/tools/dartpad

Además de dartpad, también les podría recomendar el uso de replit, es una buena alternativa y les permite guardar varios archivos para que tengan notas de todo el curso.

Para poner comillas simples ’ pueden usar Alt + 39 que usan menos memoria 😄

excelente clase super interesante este lenguaje de programación