Image & Video APIs
Menu

Flutter quick start

Last updated: Apr-30-2025

This quick start lets you get an end-to-end implementation up and running using the Flutter SDK in 5 minutes or less.

On this page:

Rate this page:

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.

dependencies:
  cloudinary_flutter: ^1.0.0
  cloudinary_url_gen: ^1.0.0

Configure Cloudinary

Create a basic Flutter app, and in main.dart copy and paste the following:

main.dart
Dart
// Import the Cloudinary packages.
import 'package:cloudinary_url_gen/cloudinary.dart';
import 'package:cloudinary_flutter/image/cld_image.dart';
import 'package:cloudinary_flutter/cloudinary_context.dart';
import 'package:flutter/material.dart';

// Create a Cloudinary instance and set your cloud name.
void main() {
  CloudinaryContext.cloudinary =
      Cloudinary.fromCloudName(cloudName: 'demo');
  runApp(App());
}

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 adding an Upload Widget to your app, or making a direct call to the 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:

main.dart (continued)
Dart
// Add a Flutter StatelessWidget.
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 200,
            height: 140,
            // Add a Cloudinary CldImageWidget that wraps Flutter's authenticated Image widget.
            child: CldImageWidget(
              publicId: 'cld-sample',
              transformation: Transformation()
                // Resize to 250 x 250 pixels using the 'fill' crop mode and 'autoGravity'.
                ..resize(Resize.fill()
                  ..gravity(Gravity.autoGravity())
                  ..width(250)
                  ..height(250))
                // Add the 'sepia' effect.
                ..effect(Effect.sepia())
              )
            ),
          ),
        ),
    );
  }
}

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.

URL
https://res.cloudinary.com/demo/image/upload/c_fill,h_250,w_250/e_sepia/cld-sample
Transformed image

View the completed code

Here's the full example:

This code is available on GitHub.

Ready to learn more?

✔️ Feedback sent!