This page provides an in-depth introduction to the Flutter mobile framework library.
OverviewCloudinary'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 you can use seamlessly within your Flutter app.
In this guide you'll learn how to get started with the Flutter SDK, but if you aren't familiar with Cloudinary, we advise starting with the
Developer Kickstartfor a hands-on, step-by-step introduction to a variety of features.
ArchitectureThe 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:
CldImageWidget
. All the Cloudinary Flutter functionality is installed by adding the cloudinary_flutter
package as a dependency.cloudinary_url_gen
package as a dependency.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.CldImageWidget
are cached to reduce loading time and improve user experience.Install and configure the SDK in your project to get started.
Flutter SDK installation and configuration video tutorialWatch this video tutorial to see how to install and configure the Flutter SDK:
Add the Flutter SDK dependencyTo use this SDK, add Cloudinary as a dependency in your pubspec.yaml file.
Add your Cloudinary configurationThe Cloudinary
class is the main entry point for using the library. Your cloud_name
is required to create an instance of this class and can be found in the Dashboard of the Cloudinary Console.
Here's an example of setting up a Cloudinary
instance in your Flutter application:
Define optional configuration parameters by adding them to your configuration file. For example, set the secure
optional configuration parameter to true
:
Use the example code at pub.dev to quickly get a simple app working for delivering assets that are already in your Cloudinary repository.
ExamplesYou 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.
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
..addTransformation()
method of the Flutter SDK.
For more information about the Flutter SDK syntax, see Syntax overview.
ImageHere's a simple example for creating a Flutter widget that transforms and delivers a Cloudinary image, including a resize transformation, using the Flutter SDK:
VideoHere is a simple example for generating a Cloudinary video URL, including a resize transformation with boomerang and vignette effects, using the Flutter SDK:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4