lunes, 18 de julio de 2022

Flutter: Tipos de datos

Dart soporta varios tipos de datos, para comenzar solo vamos a ver los siguientes tipos:

Nombre Ejemplos
String ‘‘Hola mundo’’
int 1, 5, 10, 100
double 1.5, 0.25, 10.5
num 1, 1.5, 10
bool true, false

String

Un String puede contener una secuencia de caracteres. Se pueden crear usando doble comilla " o comilla simple '

var miString1 = 'Este es un string';
var miString2 = "Este es otro string";

int

Un int puede contener numeros menores de 64 bits, dependiendo de la plataforma. En plataformas nativas los valores van de -263 hasta 263 - 1. En cambio en web los valores son representados por números de JavaScript y su rango va de -253 hasta 253 - 1

var miNumeroEntero = 5000;

double

Un double son numeros de coma flotante o en otras palabras numeros con decimal.

var miNumeroDecimal = 1.25;

num

Un num puede contener números decimales o números enteros. Por ejemplo:

num miNum1 = 100;
num miNum2 = 1.25;

bool

Un bool puede contener sólo uno de dos valores. true o false

var miBoolean = true;

Ejemplo en DartPad

Conclusión

En esta sección aprendimos algunos de los tipos de datos soportados por dart, existen más tipos como los Mapas, Listas, etc. pero estos los vamos a ver más adelante en el curso.

Recuerda que también puedes ver el videotutorial de este curso en youtube:

    

domingo, 5 de junio de 2022

Flutter: Variables y constantes

Una variable es un espacio en memoria donde almacenamos un valor. En Dart la forma de crear una variable e inicializarla es:

var nombre = 'Yayo';  

El tipo de la variable nombre se puede inferir que es String Leer más sobre inferencia de tipos. Otra forma de declarar una variable es diciendo el tipo y el nombre de la variable:

String nombre = 'Yayo';

Como su nombre lo dice, las variables pueden variar así que su nombre puede cambiar como en el siguiente fragmento de código:

String nombre = 'Yayo';
nombre = 'Carlos';

Si queremos declarar una variable que su valor nunca cambie usamos final o const al crear la variable. La diferencia entre final y const es que final se puede inicializar en tiempo de ejecución mientras que const debe ser inicializada en tiempo de compilación, por ejemplo:

const nombre = 'Yayo'; // const porque la inicializamos en tiempo de compilación

final String apellido; // final porque la inicializamos en tiempo de ejecución.
apellido = 'Arellano';

Notación camel

El equipo de Dart recomienda utilizar la Notación Camel para los nombres de las variables.

Ejemplo

Aqui les dejo un ejemplo en DartPad de variables y constantes

Recuerda que también puedes ver el videotutorial de este curso en youtube:

    

Flutter: Comentarios

¿Qué es un comentario? Se podría decir que son fragmentos de código que el programa va ignorar y no se van a ejecutar. ¿Y para qué sirven? Nos sirven para dejar notas a nosotros mismos o a otros programadores para guiarnos en el código.

Aquí vamos a ver tres tipos de comentarios:

  • comentarios de una línea que comienzan con doble diagonal inversa \\
  • comentarios de múltiples líneas que comienzan con \* y terminan con *\
  • comentarios de documentación que comienzan con triple diagonal inversa \\\

En el siguiente código podemos ver el uso de cada uno de los comentarios y nos damos cuenta que al ejecutar el código no afectan en nada el resultado de la consola:

En la siguiente imagen podemos ver que si escribimos la palabra TODO podremos ver el comentario en el campo de información de DartPad. Algunos IDES como Android Studio y Visual Studio también tienen soporte para la palabra TODO en los comentarios:

Los comentarios de documentación se muestran en el campo de documentación de nuestro IDE cuando seleccionamos el objeto o la función. Ver imagen:

Recuerda que también puedes ver el videotutorial de este curso en youtube:

    

Flutter: DartPad y hola mundo

DartPad es un editor de código en línea por lo que no vamos a tener que descargar ningún IDE como lo son Visual Studio o Android Studio.

Es importante recordar que DartPad no está diseñado para proyectos profesionales o en producción. Solo es una herramienta para programar pequeños fragmentos de código Dart.

Cuando abramos el navegador veremos una pantalla como la siguiente:

1- Esta área es el editor, aquí vamos a escribir el código de nuestro ejemplo.
2- La consola, aquí veremos los resultados cuando ejecutemos nuestra aplicación.
3- Información y documentación de nuestro código se mostrará en esta sección.

DartPad nos permite editar y ejecutar el código en nuestro navegador como pueden ver en el siguiente fragmento de código, solo hay que presionar Run y el clásico hola mundo se va a ejecutar.

Podemos ver que hay una sección para escribir el código, también tenemos la consola donde podremos ver lo que imprimamos con la función print.

Con esto terminamos este pequeño tutorial sobre DartPad y creamos nuestro primer programa que imprime el texto Hello World.

Recuerda que también puedes ver el videotutorial de este curso en youtube:

    

domingo, 22 de mayo de 2022

Mostrar imágenes de Google Drive en tu sitio web (Marzo 2022)

Quieres mostrar imágenes de Google Drive en tu sitio web, blog, etc. He creado esta herramienta que te ayuda a generar el código HTML o enlaces directos a tu imagen.

¿Cómo usar la herramienta?

  • Selecciona la imagen que quieres mostrar en tu sitio web.
  • Presiona el botón de “Más” y da click en “Share”.

  • Asegúrate que la configuración sea “Anyone with the link” o en español “Cualquier persona con el link”.
  • Da click al botón de copiar enlace.

  • Pega el link en la herramienta. Si tienes mas de una imagen asegúrate de separar los enlaces con un salto de línea.
  • Da click en “Generate Links”.
  • Ya puedes copiar el código o enlace generado.

  • Pega el código generado en tu sitio web, por ejemplo:
<!DOCTYPE html>
<html>
<head>
  <title>Image From Google Drive</title>
</head>
<body>
/* Paste the HTML Embed Code here:*/
<a href="https://drive.google.com/uc?export=view&id=18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH">
  <img src="https://drive.google.com/uc?export=view&id=18RX_EwpYdZsKU0QobLvNidmhvqJPEhrH" width="100%"/></a>
</body>
</html>

Y eso es todo lo que tienes que hacer. Gracias por leer este artículo y espero que te ayude a mejorar tu sitio.

    

Entradas populares