9 Easiest Steps to Build Photo Diary App Using Flutter and Cloudinary

FLUTTER.jpg In this article, you are going to learn the simple step by step method on how to build a photo diary app using flutter and Cloudinary.

By the end of this article, you will learn the following:

  • How to set up a Cloudinary account.
  • How to upload images to Cloudinary.
  • How to fetch images and display them on your flutter app.

Cloudinary is a cloud-based image and video management solution. It enables users to upload, store, manage, manipulate and deliver images alongside video for websites and apps.

STEP 1:

To create a Cloudinary account, go to https://cloudinary.com/

At the top right corner of the site, click “SIGN UP FOR FREE” (this is if you don’t have an account with Cloudinary)

But if you have an account with Cloudinary, then click “Login”.

STEP 2:

Enter your E-mail address and Password to sign in.

Once you’ve signed in, please keep your account details private.

STEP 3:

Click on “Media Library” and hit the “Upload” button to upload images to your Cloudinary account.

STEP 4:

Create your photo diary app using Visual Studio, IntelliJ or Android studio.

If you have IntelliJ installed on your computer, click on File>>New>>Project, Select Flutter and click on “Next

STEP 5:

Enter the project name and click on “Finish

STEP 6:

Open “pubspec.yaml”, install httppackage.

dependencies:
  http: ^0.12.0+2

Note: The http library is used for making HTTP requests.

STEP 7:

Create a dart file and name it “data.dart”. Add this code inside the dart file.

STEP 8:

Open “main.dart” and add this code below:

Note: If you open main.dart file, Replace _String baseUrl = ‘API Key:API /v1_1/Cloud name/resources/image’; w_ith your cloudinary API Key and API Secret key.

When done, your baseUrl should look like this URL below:

123456789987654:azdRJBNv1B3TBQLI4rK4xK1dPXD..';

STEP 9:

Lastly, create a dart file and name it “fullScreen.dart”, add this code inside the dart file.

Run your app on your smartphone or emulator.

Congratulations!! you have built your Photo Diary app using Flutter and Cloudinary.

P.S: Here is the source code for the project you just worked on.

If you found this article helpful and educating, please hit the like button and also share with your friends.

You can keep in touch with me via Facebook, Twitter, Linkedin, and GitHub.

My name is Promise Amadi. I am a writer and Flutter Developer. I work with startups across the globe to build mobile solutions using Flutter.

Promise Amadi

My name is Promise Amadi. I am a writer and Flutter Developer. I work with startups across the globe to build mobile solutions using Flutter.

Write your comment…

Be the first one to comment