Dart quick start

Last updated: Feb-02-2023

This quick start is intended to let you quickly try using several common Cloudinary features. It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.

You can perform this quick start in a code sandbox or in a clean project in the dev environment of your choice.

You can also view the completed code of this quick start in a GitHub repo.

Tip
If you aren't familiar with Cloudinary, you may want to first take a look at the Developer get started guide for a high-level overview of integrating Cloudinary into your code, and an introduction to the main concepts.

You may also find our Glossary helpful to understand Cloudinary-specific terminology.

In this quick start you'll learn how to start delivering your media from Cloudinary using the @cloudinary_dart package.

Tip
To get a more in-depth understanding of the architecture, you may want to start from the Dart SDK introduction.

Prerequisites

To perform the steps in this quick start, you'll need:

1. Set up and configure the SDK

Install the package

Install the @cloudinary_dart package by adding Cloudinary as a dependency in your pubspec.yaml file.

Configure Cloudinary

Important
When writing your own applications, follow your organization's policy on storing secrets and don't expose your API secret.

Within your main.dart file, use your API environment variable to configure your credentials (replace cloudinary://my_key:my_secret@my_cloud_name below with your environment variable value):

main.dart

2. Upload an image

You need to use an image in your Cloudinary product environment for the next steps. All new accounts come with sample images, so we'll be using the sample image with public ID cld-sample for the purposes of this quick start.

If you want to try uploading an image via the Cloudinary Console, expand the following section for instructions:

Note
For convenience, the above step shows how to upload files using the Media Library user interface, but as a developer, you'll probably be interested in uploading files programmatically. You can do this by making a direct call to the upload method of the Upload API as explained in Dart SDK image and video upload or you can use the CLI.

3. Transform and deliver the image

Displaying the full image URL based on the specified transformation parameters:

Copy and paste the following code, under the configuration code:

main.dart (continued)

Note
If you followed the steps to upload the docs/models asset, you might want to use that public ID instead of cld-sample. If you're using an image with a public ID other than cld-sample, make sure to update your code for the remainder of this quick start with the public ID of the image you're delivering.

4. Run your code

Run the code to see the transformed image.

Transformed image

View the completed code

This code is available on GitHub.

Ready to learn more?

✔️ Feedback sent!

Rate this page: