Last updated: May-03-2023
This page provides an in-depth introduction to the Flutter mobile framework library.
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.
The Flutter SDK allows you to transform and deliver assets that are already in your Cloudinary repository. See Flutter image and video upload for ways to upload assets to Cloudinary.
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.
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 the
cloudinary_flutterpackage as a dependency.
cloudinary_url_gen 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 the
cloudinary_url_genpackage as a dependency.
- 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.
CldImageWidgetallows you to transform and deliver Cloudinary images, and make other modifications to your assets. It wraps Flutter's authenticated
Imagewidget for easy and convenient integration into your apps.
- By default, the images you display using the
CldImageWidgetare cached to reduce loading time and improve user experience.
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.
Add your Cloudinary configuration
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_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:
Define optional configuration parameters by adding them to your configuration file. For example, set the
secure optional configuration parameter to
Use the example code at pub.dev to quickly get a simple app working for delivering assets that are already in your Cloudinary repository.
You can generate asset URLs, and you can add transformations that resize, optimize, add special effects to your assets, and more.
CldImageWidget, based on Flutter's authenticated
Image widget, for generating image URLs, and use Cloudinary's
video method for generating video URLs.
..generic()method of the Flutter SDK.
For more information about the Flutter SDK syntax, see Syntax overview.
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:
Here is a simple example for generating a Cloudinary video URL, including a resize transformation with boomerang and vignette effects, using the Flutter SDK:
- See all possible transformations in the Transformation URL API reference.
- See examples of powerful image and video transformations using Flutter code
and see our image transformations and video transformations docs.
- Stay tuned for updates, tips and tutorials in Product Updates and Blog Posts.
- Take a look at our iOS and Android SDKs as alternatives for mobile development with Cloudinary.