> ## 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.

# Configure the Flutter SDK (video tutorial)

[githublink]: https://github.com/cloudinary-community/cloudinary-examples/tree/main/examples/flutter-cldimagewidget

## Overview

Learn how to install and configure the [Cloudinary Flutter SDK](flutter_integration) in your Flutter environment. 

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

> **TIP**: :title=View the code

You can find the code from this tutorial in [GitHub][githublink].
## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### The Cloudinary Flutter SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=00 :player=cld} | The [Cloudinary Flutter SDK](flutter_integration) provides image and video transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing Flutter application.
|

### Install the Flutter SDK
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=11 :player=cld} | To install the Flutter SDK and add them as dependencies in your `pubspec.yaml` file, in a terminal run:
|

```
flutter pub add cloudinary_flutter cloudinary_url_gen
```

### Import Cloudinary into your project
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=22 :player=cld} | To import Cloudinary into your project use:
|

```flutter
import 'package:cloudinary_flutter/cloudinary_context.dart';
import 'package:cloudinary_flutter/image/cld_image.dart';
import 'package:cloudinary_url_gen/cloudinary.dart';
```

### Configure Cloudinary
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=33 :player=cld} | To configure the SDK for your product environment, replace `ddjmx10sp` in this example with your cloud name which can be found in your Cloudinary [Dashboard](https://console.cloudinary.com/app/home/dashboard/):
|

```flutter
void main() {
    CloudinaryContext.cloudinary = 
        Cloudinary.fromCloudName(cloudName: "ddjmx10sp");
    runApp(const MyApp());
}
```

### Add an image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=52 :player=cld} | Add an image in the body of your main widget using the `CldImageWidget`. Replace the public ID in the example code with the public ID of one of the images in your product environment, which you can find in the [Media Library](https://console.cloudinary.com/console/media_library/search):
|

```flutter
child: CldImageWidget{
    publicId:"cld-sample-r",
}
```
## Keep learning

> **READING**:
>
> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Follow the [Flutter SDK quick start](flutter_quick_start) to get up and running in five minutes.

> * Learn how to [transform your images and videos](flutter_media_transformations) using the Flutter SDK.

> * Learn how to [transform](transformation_basics_tutorial) and [optimize](optimization_tips_tutorial) your assets.

> * Delve into some more advanced transformation features, such as adding [complex transformations](complex_transformations_tutorial) and the [Zoompan effect](zoompan_effect_tutorial).

#### If you like this, you might also like...

  
  
  
    Optimization Tips
    Tips for delivering optimized images 
  

  
  
  
    Named Transformations
    Simplify & standardize complex delivery URLs 
  

  
  
  
    Transformation Basics
    Learn the basics of a transformation URL 
  

 

 Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.