9 pasos más fáciles para Construir App Photo Diary Usando Flutter y Cloudinary

Carlos Millan
15 agosto, 2019

. . .

Artículo escrito por Promise Nzubechi Amadi y post original aquí.

En este artículo, aprenderá el método simple paso a paso sobre cómo crear una aplicación de diario de fotos usando flutter y cloudinary.

Al final de este artículo, usted habrá aprendido lo siguiente:

  • Cómo configurar una cuenta de Cloudinary.
  • Cómo subir imagenes a Cloudinary.
  • Cómo recolectar imagenes y mostrarlos en su app Flutter.

Cloudinary es una solución de gestión de imagen y video basada en la nube. Permite a los usuarios cargar, almacenar, administrar, manipular y entregar imágenes junto con videos para sitios web y aplicaciones.

PASO 1:

Para crear una cuenta Cloudinary, vaya a https://cloudinary.com/

En la esquina de la parte superior derecha de la página, haga clic en el botón «SIGN UP FOR FREE» (Si no tienes una cuenta de Cloudinary).

Pero si tienes una cuenta de Cloudinary, entonces haga clic en «Login«.

PASO 2:

Ingrese su dirección Email y Password para registarse.

Una vez se ha registrdo, mantenga los detalles de la cuenta privados.

PASO 3:

Haga clic en «Media Library» y presione el botón «Upload» para cargar imagenes a su cuenta Cloudinary.

PASO 4:

Cree la App diario de fotos usando VS Code, IntelliJ o Android Studio.

Si usted tiene IntelliJ instalado en su computador, haga clic en File >> New >> Project, seleccione Flutter y clic en «Next«. (Nota: debes de haber instalado los plugins de Flutter y Dart en IntelliJ para poder crear proyectos Flutter)

PASO 5:

Ingrese el nombre del proyecto y clic en «Finish«.

PASO 6:

Abra el archivo Pubspec.yaml y añada el paquete «http«.

dependencies:
  http: ^0.12.0

Nota: La librería Http es usada para hacer peticiones Http.

PASO 7:

Cree un archivo dart y nómbrelo como «data.dart». Añada este código dentro del archivo dart.

PASO 8:

Abra el archivo «main.dart» y añada el código de abajo:

Nota: Si usted abre el archivo main.dart, reemplace la cadena baseUrl = ‘https://API Key:API Secret@api.cloudinary.com/v1_1/Cloud name/resources/image’; con su Cloudinary API Key y API Secret Key.

Cuando lo haga, su baseUrl deberá lucir con esta URL de abajo:

‘https://123456789987654:azdRJBNv1B3TBQLI4rK4xK1dPXD@api.cloudinary.com/v1_1/demo/resources/image’;

PASO 9:

Por último, cree un archivo dart y nómbrelo «fullScreen.dart», y añada este código dentro del archivo dart:

Guarde todo y corra la App en su Smartphone o emulador.

¡¡Felicidades!! ha creado su aplicación Photo Diary con Flutter y Cloudinary.

Celebrating GIF - Find & Share on GIPHY

P.S: Aquí está el código fuente del proyecto en el que acaba de trabajar.

23

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Comunidades en Español