Flutter SDK (BETA)

Last updated: Dec-28-2022

This page provides an in-depth introduction to the Flutter mobile framework library.

Important
The Flutter SDK is currently in BETA. There may be minor changes to parameter names or other implementation details before the general access release. We invite you to try it out. We would appreciate any feedback via our support team.

Overview

Cloudinary's Flutter SDK provides simple, yet comprehensive image and video transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Flutter application, enabling you to deliver Cloudinary transformed and optimized images and videos inside your Flutter widgets.

Cloudinary's Flutter SDK is built on Cloudinary's Dart library and provides Flutter-unique components that can be used seamlessly within your Flutter app.

Tip
In this guide you'll learn how to get started with the Flutter SDK, but if you are not familiar with Cloudinary, we advise reading How to integrate Cloudinary first for a high-level overview of integrating Cloudinary into your code, and an introduction to the main concepts.

Related topics
This guide relates to the latest released version of the Cloudinary Flutter library.

Architecture

The Flutter mobile framework library must be used in conjunction with the Dart backend library to provide all of Cloudinary's transformation and optimization functionality.

Two GitHub repositories provide all the functionality:

  • cloudinary_flutter contains all the functionality required to deliver Cloudinary images using the dedicated CldImageWidget. All the cloudinary_flutter functionality is installed by adding cloudinary_flutter: ^0.0.2 as a dependency.
  • cloudinary_dart contains the functionality required to create delivery URLs for your Cloudinary assets based on the configuration and transformation actions that you specify. All the cloudinary_dart functionality is installed by adding cloudinary_dart: ^0.0.10 as a dependency.

Key features

  • Uses Cloudinary's new SDK action based syntax with enhanced code autocomplete.
  • Build dynamic URLs for delivering images and videos.
  • Actions and transformations are immutable, for easier and safer code reuse.
  • The CldImageWidget allows you to transform and deliver Cloudinary images, and make other modifications to your assets. It wraps Flutter's authenticated Image widget for easy and convenient integration into your apps.

Get started

Install and configure the SDK in your project to get started.

Add the Flutter SDK dependency

To use this SDK, add Cloudinary as a dependency in your pubspec.yaml file.

Copy to clipboard
dependencies:
  cloudinary_flutter: ^0.0.2
  cloudinary_dart: ^0.0.10

Add your Cloudinary configuration

The Cloudinary class is the main entry point for using the library. Your cloud_name is required to create an instance of this class. Your api_key and api_secret are also needed to perform secure API calls to Cloudinary (e.g., image and video uploads). Setting the configuration parameters can be done either programmatically using an appropriate constructor of the Cloudinary class or globally using an environment variable. You can find your configuration credentials in the Programmable Media Dashboard of the Cloudinary Console.

Here's an example of setting configuration parameters in your Flutter application:

Copy to clipboard
CloudinaryContext.cloudinary = Cloudinary.fromCloudName(cloudName: '<your-cloud-name>');

Define optional configuration parameters by adding them to your configuration file. For example, set the secure optional configuration parameter to true:

Copy to clipboard
CloudinaryContext.cloudinary.config.urlConfig.secure=true;

Full example

Use the example code at pub.dev to quickly get a simple app working.

Examples

You can generate asset URLs, and you can add transformations that resize, optimize, add special effects to your assets, and more.

Use the CldImageWidget, based on Flutter's authenticated Image widget, for generating image URLs, and use Cloudinary's video method for generating video URLs.

Note
Most transformations can be passed as parameters using Cloudinary's new action based syntax with enhanced code autocomplete. Transformations that aren't yet supported for the new syntax can still be implemented by passing them directly as strings via the ..generic() method of the Flutter SDK.

For more information about the Flutter SDK syntax, see Syntax overview.

Image

Here's a simple example for creating a Flutter widget that transforms and delivers a Cloudinary image, including a resize transformation, using the Flutter SDK:

Copy to clipboard
CldImageWidget(
  publicId: 'sample.jpg',
  transformation: Transformation()
    ..resize(Resize.crop()
      ..width(100)
      ..height(150))
),

Image example

Video

Here is a simple example for generating a Cloudinary video URL, including a resize transformation with boomerang and vignette effects, using the Flutter SDK:

Copy to clipboard
(CloudinaryContext.cloudinary.video('ski_jump')
  ..transformation(Transformation()
    ..effect(Effect.boomerang())
    ..effect(Effect.vignette(30))
    ..resize(Resize.pad()
      ..height(360)
      ..width(480))))
  .toString();

Learn more about transformations

✔️ Feedback sent!

Rate this page: