> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# Flutter quick start


[readme-version-support-link]:https://github.com/cloudinary/cloudinary_flutter
[sdk-image-and-video-upload-link]:flutter_image_and_video_upload
This quick start lets you get an end-to-end implementation up and running using the Flutter SDK in 5 minutes or less.

#### Prerequisites **To perform this quick start, you'll need:**

* A Cloudinary account. If you don't have one yet, you can quickly [register for free](https://cloudinary.com/users/register_free).
* Your product environment credentials. You can find your [credentials](product_environment_settings#api_keys) on the [API Keys](https://console.cloudinary.com/app/settings/api-keys) page of the Cloudinary Console Settings. 
  * To use your **API environment variable**, copy the provided format and replace the `<your_api_key>` and `<your_api_secret>` placeholders with the actual values found on the page. Your cloud name will already be correctly included in the format.
* A working Flutter development environment with a [supported version][readme-version-support-link] of Flutter.

> **NOTES**:
>
> * This quick start is designed for quick onboarding.  It doesn't necessarily employ coding best practices and the code you create here isn't intended for production.  

> * If you aren't familiar with Cloudinary, you may want to first take a look at the [Developer Kickstart](dev_kickstart) for a hands-on, step-by-step introduction to Cloudinary features. You may also find our [Glossary](cloudinary_glossary) helpful to understand Cloudinary-specific terminology.
## 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](https://docs.flutter.dev/development/packages-and-plugins/using-packages).

```
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());
}
```

More info about configuration...

You can set any [configuration parameters](cloudinary_sdks#configuration_parameters) in this way. Here we're setting `cloudName` to `demo`.  

For the purposes of this quick start, you can optionally keep `demo` as the cloud name, but if you'd like to perform the quick start from your own account, change the `cloudName` value to your cloud name (found on the Cloudinary Console Dashboard).

## 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 from the Console...

1. Save [this image](https://cloudinary-devs.github.io/cld-docs-assets/assets/images/models.jpg) locally.
2. Log into your [Cloudinary Console](https://console.cloudinary.com/console). 
3. Select **Media Library** from the left panel. 
4. Click **Upload** to open the Upload Widget, then click **Advanced** and type "docs/models" into the public ID field. 
5. Click **Browse** to find the image to upload. Once uploaded, you can click **Recently Uploaded** at the top of the Media Library to see your uploaded image.  

In the next step, you'll need the [public ID](cloudinary_glossary#public_id) of whichever image you use (in our case, we set the public ID on upload to `docs/models`). If using one of the sample images, you can double-click the image in your Media Library, select the **Summary** tab, and copy the public ID:

![Select and copy the public ID](https://cloudinary-res.cloudinary.com/image/upload/q_auto/f_auto/bo_1px_solid_grey/v1743068267/docs/public_id_df.png "thumb: w_600,dpr_2.0, width: 600, popup: true")

> **NOTE**: For product environments using the legacy fixed folder mode, double-click the image in your Media Library and see the public ID at the top corner of any tab. 

The public ID includes the file name shown, along with the full folder path (separated by slashes) leading to the file.

![Select and copy the public ID - fixed folders](https://cloudinary-res.cloudinary.com/image/upload/q_auto/f_auto/c_crop,h_500,w_2500,g_north/bo_1px_solid_grey/v1743068249/docs/public_id_ff.png "thumb: w_600,dpr_2.0, width: 600, popup: true")

> **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](upload_widget) to your app, or making a direct call to the `upload` method of the [Upload API](image_upload_api_reference), as explained in [Flutter SDK image and video upload](flutter_image_and_video_upload) or you can use the [CLI](cloudinary_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.

More info about transformations...

There are many ways to transform your assets. Find them all in the [transformation reference](transformation_reference).

## 4. Run your code

Run the code to see the transformed image.

![Transformed image](https://res.cloudinary.com/demo/image/upload/c_fill,h_250,w_250/e_sepia/cld-sample "with_code: false")

## View the completed code

You can find the full code example for this quick start on [GitHub](https://github.com/cloudinary-devs/flutter_quick_start).

> **Ready to learn more?**:
>
> * Understand the architecture of the Flutter SDK and get a more detailed [overview](flutter_integration#overview) of the libraries.

> * Find out more about [transforming images and videos](flutter_media_transformations) using `@cloudinary_flutter`.

> * View a comprehensive listing of all available transformations with syntax details and examples in the [transformation reference](transformation_reference).