{"id":26558,"date":"2023-01-18T08:24:37","date_gmt":"2023-01-18T15:24:37","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=26558"},"modified":"2025-11-26T20:37:10","modified_gmt":"2025-11-27T04:37:10","slug":"cloudinary-with-flutter","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter","title":{"rendered":"Cloudinary With Flutter"},"content":{"rendered":"\n<p id=\"f7bd\">Recently I\u2019ve started experimenting with Google\u2019s Flutter framework. For those who do not know, Flutter is a cross-platform framework (same as React Native) based on the Dart programing language. <\/p>\n\n\n\n<p id=\"f7bd\">After playing with the framework and understanding the best practices (thank you Effective Dart), I started to build our (Cloudinary\u2019s) Flutter SDK.<\/p>\n\n\n\n<p id=\"bd93\">In the following article, I\u2019ll explain why we decided to implement this SDK, how you can use it, and what good it will do for your application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Problem<\/h2>\n\n\n\n<p id=\"6d8b\">One of the biggest pain points for a mobile developer is dealing with performance issues caused by handling many assets (images, videos, etc.) on multiple devices with different size screens.<\/p>\n\n\n\n<p id=\"9c20\">In one of my previous jobs, I was responsible for an application that allowed users to download images into their phones and set them as backgrounds for the home screen, lock screen, or both. This application required pulling big JSON files with all the image information, including multiple fields such as title, URL, created date, etc\u2026 On the main screen, I had to present a thumbnail (a small <a href=\"https:\/\/cloudinary.com\/glossary\/image-representation\">image representation<\/a> of a larger image) of each image.Tapping a thumbnail would direct the user to a screen where the image was shown full screen. These 2 screens already required multiple versions of the same image. You can\u2019t present a full-screen image as a thumbnail image because you\u2019ll get a pixelated result which yields a bad user experience. On the other hand, we didn&#8217;t want to present the full-screen image because that would cause a long load time for the screen, which is again a bad user experience.<\/p>\n\n\n\n<p id=\"12c8\">Moreover, every image came in a different size, so we had to find a way to present them uniformly.<br>To add to the complexity, we wanted this app to work with different screen sizes (iPhones, iPads, different Android devices, and Android base tablets) which require different image sizes. The scenario in which we have a single image that needs to be displayed in many different sizes is very common. How can we best handle it? Let\u2019s go through some possibilities.<\/p>\n\n\n\n<p id=\"517f\">One solution would be to get it in one size for the client and manipulate it for our needs. Unfortunately, this solution wouldn&#8217;t be efficient and could cause a long processing time. We could handle it on the server side (if we have one). We could create multiple URLs and send them to the client. But that would create big JSONS would be harder to handle and parse.<\/p>\n\n\n\n<p id=\"fb50\">That\u2019s where Cloudinary comes in.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Solution<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>What\u2019s Cloudinary<\/strong><\/h3>\n\n\n\n<p id=\"412f\">Cloudinary is a platform that allows you to quickly and easily create, manage and deliver digital experiences across any browser, device, and bandwidth.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Working With Cloudinary<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Setup<\/h3>\n\n\n\n<p id=\"8f58\">The first thing you need to do is go to the Cloudinary\u00a0<a href=\"http:\/\/www.cloudinary.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">website<\/a>\u00a0and sign-up for a free account.<\/p>\n\n\n\n<p id=\"6275\">You can find the Git repository for the Cloudinary Flutter SDK&nbsp;<a href=\"https:\/\/github.com\/cloudinary\/cloudinary_flutter\" rel=\"noreferrer noopener\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p id=\"7e13\">To integrate Cloudinary into your app you can use:<\/p>\n\n\n\n<p id=\"7e13\">dependencies:<br>cloudinary_flutter: ^0.0.1<br>cloudinary_dart: ^0.0.7<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Configuration<\/h3>\n\n\n\n<p id=\"3c36\">Once the package is integrated, we\u2019ll need to set up our Cloudinary object.<\/p>\n\n\n\n<p id=\"3c36\">Your cloud name will appear in the dashboard where you created your account.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"700\" height=\"191\" data-public-id=\"cloudinaryflutter\/cloudinaryflutter.png\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_700,h_191,c_scale\/f_auto,q_auto\/v1673310613\/cloudinaryflutter\/cloudinaryflutter.png?_i=AA\" alt=\"Cloudinary account details\" class=\"wp-post-26558 wp-image-26673\" data-format=\"png\" data-transformations=\"f_auto,q_auto\" data-version=\"1673310613\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/cloudinaryflutter\/cloudinaryflutter.png?_i=AA 700w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/cloudinaryflutter\/cloudinaryflutter.png?_i=AA 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/figure>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">CloudinaryContext.cloudinary = Cloudinary.fromCloudName(cloudName: '<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Cloud_name<\/span>&gt;<\/span>');<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"7bcf\">Now that you have your Cloudinary object set and ready to use, the&nbsp;<strong>MAGIC&nbsp;<\/strong>starts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Transformations<\/h3>\n\n\n\n<p id=\"c3de\">At the start of this article, I presented the problem where we have one asset, but we need it in many different sizes and aspect ratios. Let\u2019s see how we can achieve that very easily by applying Cloudinary\u2019s transformations.<\/p>\n\n\n\n<p id=\"c800\">Here\u2019s the original image called \u2018dog\u2019:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"682\" data-public-id=\"dog\/dog.jpg\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_1024,h_682,c_scale\/f_auto,q_auto\/v1673310613\/dog\/dog.jpg?_i=AA\" alt=\"Original image of a dog\" class=\"wp-post-26558 wp-image-26674\" data-format=\"jpg\" data-transformations=\"f_auto,q_auto\" data-version=\"1673310613\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog\/dog.jpg?_i=AA 1400w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog\/dog.jpg?_i=AA 300w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog\/dog.jpg?_i=AA 768w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog\/dog.jpg?_i=AA 1024w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Crop<\/h3>\n\n\n\n<p id=\"3a14\">You can easily create a thumbnail(500&#215;500) for your main screen:<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-built_in\">String<\/span> url = (CloudinaryContext.cloudinary.image(<span class=\"hljs-string\">'dog'<\/span>)\n..transformation(Transformation()\n..resize(Resize.crop()\n..width(<span class=\"hljs-number\">500<\/span>)\n..height(<span class=\"hljs-number\">500<\/span>))))\n.toString();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"c44e\">This code creates a new string URL using the Cloudinary object that was initiated in the previous step. The image function builds the URL using the&nbsp;<code>publicId<\/code>&nbsp;of the specified image.<br>When calling&nbsp;<code>transformation<\/code>&nbsp;you can specify the action you want to perform. In this case, the&nbsp;<code>resize<\/code>action is applied with the&nbsp;<code>Crop<\/code>&nbsp;and the values for&nbsp;<code>width<\/code>&nbsp;and&nbsp;<code>height<\/code>&nbsp;, Finally, the&nbsp;<code>toString()<\/code>turns the object into a string.<\/p>\n\n\n\n<p id=\"c2a3\">This code will output a URL for the following image:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"500\" height=\"500\" data-public-id=\"dog1\/dog1.jpg\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_500,h_500,c_fill,g_auto\/f_auto,q_auto\/v1673310613\/dog1\/dog1.jpg?_i=AA\" alt=\"500x500 thumbnail of a dog\" class=\"wp-post-26558 wp-image-26675\" data-format=\"jpg\" data-transformations=\"f_auto,q_auto\" data-version=\"1673310613\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog1\/dog1.jpg?_i=AA 500w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog1\/dog1.jpg?_i=AA 150w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog1\/dog1.jpg?_i=AA 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p id=\"f00e\">As we can see we got the 500&#215;500 thumbnail we wanted, but the result could be improved. We lost the dog and we can only see white fur (not optimal at all).<br>What can we do? OH! Cloudinary has a few more tricks up its sleeve! Another COOL feature we can use is \u201cgravity\u201d where we can ask Cloudinary to focus on the most interesting object in the image.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Gravity<\/strong><\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-built_in\">String<\/span> url = (CloudinaryContext.cloudinary.image(<span class=\"hljs-string\">'dog'<\/span>)\n..transformation(Transformation()\n..resize(Resize.crop()\n..width(<span class=\"hljs-number\">500<\/span>)\n..height(<span class=\"hljs-number\">500<\/span>)\n..gravity(Gravity.autoGravity()))))\n.toString();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"500\" height=\"500\" data-public-id=\"dog2\/dog2.jpg\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/w_500,h_500,c_fill,g_auto\/f_auto,q_auto\/v1673310613\/dog2\/dog2.jpg?_i=AA\" alt=\"A close-up focusing on the dog&#039;s face\" class=\"wp-post-26558 wp-image-26676\" data-format=\"jpg\" data-transformations=\"f_auto,q_auto\" data-version=\"1673310613\" data-seo=\"1\" srcset=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog2\/dog2.jpg?_i=AA 500w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog2\/dog2.jpg?_i=AA 150w, https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673310613\/dog2\/dog2.jpg?_i=AA 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure><\/div>\n\n\n<p id=\"3f93\">And as we can see the result is much better. The focus is on the dog\u2019s face.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Quality<\/h3>\n\n\n\n<p id=\"3a38\">Let\u2019s try another scenario. You want to deliver a 2k resolution image, which is quite a large file, and you don\u2019t need to present it in its best form. Roaming can\u2019t always handle big bandwidth. To make the image lighter we can use the Cloudinary \u201cquality\u201d feature.<\/p>\n\n\n\n<p id=\"65cc\">Here\u2019s the original image (5MB):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764218007\/blog-Cloudinary_with_Flutter-1.jpg\" alt=\"Original image of paint swatches\"\/><\/figure><\/div>\n\n\n<p id=\"0efd\">With Cloudinary we can do the following: <\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-built_in\">String<\/span> url = (CloudinaryContext.cloudinary.image(<span class=\"hljs-string\">'dog'<\/span>)\n..transformation(\nTransformation()..delivery(Delivery.quality(Quality.auto))))\n.toString();<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"b330\">This code will produce the following&nbsp;<a href=\"https:\/\/res.cloudinary.com\/db0edm7to\/image\/upload\/q_auto\/big_image_sample\" target=\"_blank\" rel=\"noreferrer noopener\">URL<\/a>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/db0edm7to\/image\/upload\/q_auto\/big_image_sample\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"f627\">After this transformation, the size is reduced to 626.56 KB and it\u2019ll be faster to load this image on a mobile device.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cloudinary\u2019s Image Widget<\/h2>\n\n\n\n<p id=\"89d5\">So far we\u2019ve seen how to generate URLs and we can manually put them into an image widget, but Cloudinary gives us an extra zing, an image widget that can integrate with everything we\u2019ve implemented so far.<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">CldImageWidget(\npublicId: <span class=\"hljs-string\">'dog'<\/span>,\n<span class=\"hljs-attr\">transformation<\/span>: Transformation()\n..resize(Resize.crop()\n..width(<span class=\"hljs-number\">500<\/span>)\n..height(<span class=\"hljs-number\">500<\/span>)\n..gravity(Gravity.autoGravity()))\n..delivery(Delivery.quality(Quality.auto)),\n),<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p id=\"536e\">In the code snippet above we see that we create the image widget and we give the following attributes:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Public Id<\/li>\n\n\n\n<li>Resize crop, with width=500 and height=500 and Gravity auto<\/li>\n\n\n\n<li>Delivery with quality auto<\/li>\n<\/ol>\n\n\n\n<p id=\"df3a\">This code will generate the URLs we\u2019ve seen before and will inject them into the image widget.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">To Sum Up<\/h2>\n\n\n\n<p id=\"e458\">In this blog, you saw how Cloudinary can handle the same asset in many sizes and qualities. That\u2019s just the tip of the iceberg. Cloudinary has many other features that you can use when managing the media in your apps.<br>I encourage you to visit Cloudinary\u2019s&nbsp;<a href=\"https:\/\/cloudinary.com\/documentation\/\" rel=\"noreferrer noopener\" target=\"_blank\">documentation<\/a>&nbsp;to get the most out of the platform.<\/p>\n\n\n\n<p id=\"515d\">The Cloudinary SDK can also be found on&nbsp;<a href=\"https:\/\/github.com\/cloudinary\/cloudinary_android\" rel=\"noreferrer noopener\" target=\"_blank\">Android<\/a>&nbsp;and&nbsp;<a href=\"https:\/\/github.com\/cloudinary\/cloudinary_ios\" rel=\"noreferrer noopener\" target=\"_blank\">iOS<\/a>&nbsp;and 14 more languages you can find at&nbsp;<a href=\"https:\/\/github.com\/cloudinary\" rel=\"noreferrer noopener\" target=\"_blank\">Cloudinary\u2019s git<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently I\u2019ve started experimenting with Google\u2019s Flutter framework. For those who do not know, Flutter is a cross-platform framework (same as React Native) based on the Dart programing language. After playing with the framework and understanding the best practices (thank you Effective Dart), I started to build our (Cloudinary\u2019s) Flutter SDK. In the following article, [&hellip;]<\/p>\n","protected":false},"author":54,"featured_media":26672,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[165,227],"class_list":["post-26558","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-image-transformation","tag-performance-optimization"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Cloudinary With Flutter<\/title>\n<meta name=\"description\" content=\"Are you a Google Flutter user? Learn how to use Cloudinary&#039;s Flutter SDK for media delivery and more with Flutter.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cloudinary With Flutter\" \/>\n<meta property=\"og:description\" content=\"Are you a Google Flutter user? Learn how to use Cloudinary&#039;s Flutter SDK for media delivery and more with Flutter.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-18T15:24:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-27T04:37:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Cloudinary With Flutter\",\"datePublished\":\"2023-01-18T15:24:37+00:00\",\"dateModified\":\"2025-11-27T04:37:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter\"},\"wordCount\":1066,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA\",\"keywords\":[\"Image Transformation\",\"Performance Optimization\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter\",\"url\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter\",\"name\":\"Cloudinary With Flutter\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA\",\"datePublished\":\"2023-01-18T15:24:37+00:00\",\"dateModified\":\"2025-11-27T04:37:10+00:00\",\"description\":\"Are you a Google Flutter user? Learn how to use Cloudinary's Flutter SDK for media delivery and more with Flutter.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cloudinary With Flutter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Cloudinary With Flutter","description":"Are you a Google Flutter user? Learn how to use Cloudinary's Flutter SDK for media delivery and more with Flutter.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter","og_locale":"en_US","og_type":"article","og_title":"Cloudinary With Flutter","og_description":"Are you a Google Flutter user? Learn how to use Cloudinary's Flutter SDK for media delivery and more with Flutter.","og_url":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter","og_site_name":"Cloudinary Blog","article_published_time":"2023-01-18T15:24:37+00:00","article_modified_time":"2025-11-27T04:37:10+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter"},"author":{"name":"","@id":""},"headline":"Cloudinary With Flutter","datePublished":"2023-01-18T15:24:37+00:00","dateModified":"2025-11-27T04:37:10+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter"},"wordCount":1066,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA","keywords":["Image Transformation","Performance Optimization"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter","url":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter","name":"Cloudinary With Flutter","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA","datePublished":"2023-01-18T15:24:37+00:00","dateModified":"2025-11-27T04:37:10+00:00","description":"Are you a Google Flutter user? Learn how to use Cloudinary's Flutter SDK for media delivery and more with Flutter.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/cloudinary-with-flutter#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cloudinary With Flutter"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1673047737\/blog-flutter\/blog-flutter.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26558","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/54"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=26558"}],"version-history":[{"count":13,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26558\/revisions"}],"predecessor-version":[{"id":39452,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/26558\/revisions\/39452"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/26672"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=26558"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=26558"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=26558"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}