Last updated: Nov-21-2023
Learn how to optimize the delivery of your images in Flutter.
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
|0:00||Cloudinary image optimization can dramatically reduce the bandwidth you use when delivering images. This tutorial shows how to trim bandwidth usage by directly applying transformations to images within your Flutter code, ensuring the automatic delivery of optimized images.|
|0:23||Display an image in your Flutter app by using the
Note: If you need help installing the Flutter SDK and the required packets needed to import the CldImageWidget, see the Configure the Flutter SDK video tutorial.
|0:40||Go to the Media Library and copy a public ID of the image you'd like to display. Replace
|0:56||Access your Flutter DevTools in a browser, then, from the debugging tools, copy the URL of your new image and paste it into Insomnia (or use Postman, Curl, or any other API testing tool). Initiate a GET request and observe the size of your image. In this tutorial, the sample image is 1.4 MB, aligning with the size displayed in the Media Library.|
|2:25||Return to your DevTools and locate the URL for your optimized image. Observe that the URL now includes the
|3:08||The image is currently oversized. To ensure it fits the 400 x 250
|3:46||Return to DevTools and copy the resized, optimized image URL from Cloudinary. The URL includes additional parameters for resizing the image
Configure the Flutter SDKInstall and configure the Cloudinary Flutter SDK
Optimization TipsTips for delivering optimized images
Video TransformationsBuild an e-commerce video showcasing products, in Node.js
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.