Last updated: Mar-20-2024
This quick start lets you get an end-to-end implementation up and running using the Flutter SDK in 5 minutes or less.
Prerequisites
1. Set up and configure the SDK
Install the package
Install the @cloudinary_flutter
package by adding Cloudinary as a dependency in your pubspec.yaml file.
Configure Cloudinary
Create a basic Flutter app, and in main.dart copy and paste the following:
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:
upload
method of the Upload API, as explained in Flutter SDK image and video upload or you can use the CLI.3. Transform and deliver the image
Use the CldImageWidget
to display the full image URL based on the specified transformation parameters:
Copy and paste the following code, under the configuration code:
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.
View the completed code
Here's the full example:
This code is available on GitHub.
- Understand the architecture of the Flutter SDK and get a more detailed overview of the libraries.
- Find out more about transforming images and videos using
@cloudinary_flutter
. - View a comprehensive listing of all available transformations with syntax details and examples in the transformation reference.