Image showing the Cloudinary dashboard with the cloud name location highlighted.<\/figcaption><\/figure>\n\n\n\nThat covers the setup. Now you can start building the widget.<\/p>\n\n\n\n
Step 3: Define the Widget API<\/h2>\n\n\n\n Create a new file at lib\/responsive_image.dart<\/code>. Start by defining the configuration classes that control how the widget behaves on each device type:<\/p>\n\n\nenum DeviceType {\n\n\u00a0 phone,\n\n\u00a0 tablet,\n\n\u00a0 desktop,\n\n\u00a0 tv,\n\n}\n\nclass<\/span> DeviceConfig<\/span> <\/span>{\n\n\u00a0 final int? width;\n\n\u00a0 final int? height;\n\n\u00a0 const<\/span> DeviceConfig({this<\/span>.width, this<\/span>.height});\n\n}\n\nclass<\/span> ResponsiveImageConfig<\/span> <\/span>{\n\n\u00a0 final DeviceConfig? phone;\n\n\u00a0 final DeviceConfig? tablet;\n\n\u00a0 final DeviceConfig? desktop;\n\n\u00a0 final DeviceConfig? tv;\n\n\u00a0 const<\/span> ResponsiveImageConfig({\n\n\u00a0 \u00a0 this<\/span>.phone,\n\n\u00a0 \u00a0 this<\/span>.tablet,\n\n\u00a0 \u00a0 this<\/span>.desktop,\n\n\u00a0 \u00a0 this<\/span>.tv,\n\n\u00a0 });\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe ResponsiveImageConfig<\/code> class lets you specify different width and height values for each device type. If you don’t provide a config for a particular device, the widget falls back to the default dimensions.<\/p>\n\n\n\nNow add the base widget structure:<\/p>\n\n\n
class<\/span> ResponsiveImage<\/span> extends<\/span> StatefulWidget<\/span> <\/span>{\n\n\u00a0 final String<\/span> publicId;\n\n\u00a0 final int width;\n\n\u00a0 final int height;\n\n\u00a0 final ResponsiveImageConfig? deviceConfig;\n\n\u00a0 const<\/span> ResponsiveImage({\n\n\u00a0 \u00a0 Key? key,\n\n\u00a0 \u00a0 required this<\/span>.publicId,\n\n\u00a0 \u00a0 required this<\/span>.width,\n\n\u00a0 \u00a0 required this<\/span>.height,\n\n\u00a0 \u00a0 this<\/span>.deviceConfig,\n\n\u00a0 }) : super<\/span>(key: key);\n\n\u00a0 @override\n\n\u00a0 State<ResponsiveImage> createState() => _ResponsiveImageState();\n\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nThe widget accepts a Cloudinary publicId<\/code>, default width and height, and an optional deviceConfig<\/code> for per-device overrides. In the next step, you’ll add the device detection logic that makes the widget responsive.<\/p>\n\n\n\nStep 4: Add Device Detection and Breakpoints<\/h2>\n\n\n\n The widget needs to know what type of device it’s running on so it can select the right image dimensions. You’ll use two detection strategies: platform-specific APIs (through the device_info_plus<\/code> package) and screen-size breakpoints as a fallback.<\/p>\n\n\n\nAdd the state class with detection logic to lib\/responsive_image.dart<\/code>:<\/p>\n\n\nclass<\/span> _ResponsiveImageState<\/span> extends<\/span> State<\/span><ResponsiveImage<\/span>> <\/span>{\n\n\u00a0 DeviceType? _deviceType;\n\n\u00a0 @override\n\n\u00a0 void<\/span> initState() {\n\n\u00a0 \u00a0 super<\/span>.initState();\n\n\u00a0 \u00a0 _detectDeviceType();\n\n\u00a0 }\n\n\u00a0 Future<void<\/span>> _detectDeviceType() async<\/span> {\n\n\u00a0 \u00a0 final deviceInfo = DeviceInfoPlugin();\n\n\u00a0 \u00a0 try<\/span> {\n\n\u00a0 \u00a0 \u00a0 if<\/span> (Platform.isAndroid) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 final androidInfo = await<\/span> deviceInfo.androidInfo;\n\n\u00a0 \u00a0 \u00a0 \u00a0 _deviceType = _getDeviceTypeFromScreenSize();\n\n\u00a0 \u00a0 \u00a0 } else<\/span> if<\/span> (Platform.isIOS) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 final iosInfo = await<\/span> deviceInfo.iosInfo;\n\n\u00a0 \u00a0 \u00a0 \u00a0 if<\/span> (iosInfo.model.toLowerCase().contains('ipad'<\/span>)) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 _deviceType = DeviceType.tablet;\n\n\u00a0 \u00a0 \u00a0 \u00a0 } else<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 _deviceType = DeviceType.phone;\n\n\u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 } else<\/span> {\n\n\u00a0 \u00a0 \u00a0 \u00a0 _deviceType = DeviceType.desktop;\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 } catch<\/span> (e) {\n\n\u00a0 \u00a0 \u00a0 _deviceType = _getDeviceTypeFromScreenSize();\n\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 if<\/span> (mounted) {\n\n\u00a0 \u00a0 \u00a0 setState(() {});\n\n\u00a0 \u00a0 }\n\n\u00a0 }\n\n\u00a0 DeviceType _getDeviceTypeFromScreenSize() {\n\n\u00a0 \u00a0 final screenWidth = MediaQuery.of(context).size.width;\n\n\u00a0 \u00a0 if<\/span> (screenWidth < 768<\/span>) {\n\n\u00a0 \u00a0 \u00a0 return<\/span> DeviceType.phone;\n\n\u00a0 \u00a0 } else<\/span> if<\/span> (screenWidth >= 768<\/span> && screenWidth < 1024<\/span>) {\n\n\u00a0 \u00a0 \u00a0 return<\/span> DeviceType.tablet;\n\n\u00a0 \u00a0 } else<\/span> if<\/span> (screenWidth >= 1024<\/span> && screenWidth < 1920<\/span>) {\n\n\u00a0 \u00a0 \u00a0 return<\/span> DeviceType.desktop;\n\n\u00a0 \u00a0 } else<\/span> {\n\n\u00a0 \u00a0 \u00a0 return<\/span> DeviceType.tv;\n\n\u00a0 \u00a0 }\n\n\u00a0 }\n\n\u00a0 DeviceType _getEffectiveDeviceType() {\n\n\u00a0 \u00a0 return<\/span> _deviceType ?? _getDeviceTypeFromScreenSize();\n\n\u00a0 }<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nHere’s how the detection works. On iOS, the widget checks the device model directly. If it contains “iPad”, the device type is tablet. Otherwise, it’s a phone. On Android and all other platforms, the widget falls back to screen-size breakpoints:<\/p>\n\n\n\nScreen Width<\/strong><\/td>Device Type<\/strong><\/td><\/tr>Less than 768px<\/td> Phone<\/td><\/tr> 768px to 1023px<\/td> Tablet<\/td><\/tr> 1024px to 1919px<\/td> Desktop<\/td><\/tr> 1920px and above<\/td> TV<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\nNow add the _getDimensions<\/code> function that selects the right width and height based on the detected device type:<\/p>\n\n\nDeviceConfig _getDimensions() {\n\n\u00a0 \u00a0 final<\/span> effectiveType = _getEffectiveDeviceType();\n\n\u00a0 \u00a0 if<\/span> (widget.deviceConfig != null<\/span>) {\n\n\u00a0 \u00a0 \u00a0 switch<\/span> (effectiveType) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 case<\/span> DeviceType.phone:\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if<\/span> (widget.deviceConfig!.phone != null<\/span>) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return<\/span> DeviceConfig(\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: widget.deviceConfig!.phone!.width ?? widget.width,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: widget.deviceConfig!.phone!.height ?? widget.height,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 );\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 break<\/span>;\n\n\u00a0 \u00a0 \u00a0 \u00a0 case<\/span> DeviceType.tablet:\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if<\/span> (widget.deviceConfig!.tablet != null<\/span>) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return<\/span> DeviceConfig(\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: widget.deviceConfig!.tablet!.width ?? widget.width,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: widget.deviceConfig!.tablet!.height ?? widget.height,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 );\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 break<\/span>;\n\n\u00a0 \u00a0 \u00a0 \u00a0 case<\/span> DeviceType.desktop:\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if<\/span> (widget.deviceConfig!.desktop != null<\/span>) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return<\/span> DeviceConfig(\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: widget.deviceConfig!.desktop!.width ?? widget.width,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: widget.deviceConfig!.desktop!.height ?? widget.height,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 );\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 break<\/span>;\n\n\u00a0 \u00a0 \u00a0 \u00a0 case<\/span> DeviceType.tv:\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if<\/span> (widget.deviceConfig!.tv != null<\/span>) {\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 return<\/span> DeviceConfig(\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 width: widget.deviceConfig!.tv!.width ?? widget.width,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 height: widget.deviceConfig!.tv!.height ?? widget.height,\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 );\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 break<\/span>;\n\n\u00a0 \u00a0 \u00a0 }\n\n\u00a0 \u00a0 }\n\n\u00a0 \u00a0 return<\/span> DeviceConfig(width: widget.width, height: widget.height);\n\n\u00a0 }\n\n}<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>
![\"\"\/](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1784665487\/blog-How_to_Build_a_Responsive_Image_Component_in_Flutter-1.png\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"\/](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1784665488\/blog-How_to_Build_a_Responsive_Image_Component_in_Flutter-2.png\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"\/](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1784665861\/blog-How_to_Build_a_Responsive_Image_Component_in_Flutter-3.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n\n\n![\"\"\/](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1784665861\/blog-How_to_Build_a_Responsive_Image_Component_in_Flutter-4.png\")
<\/figure>\n<\/div>\n\n\n\n\n![\"\"\/](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1784665862\/blog-How_to_Build_a_Responsive_Image_Component_in_Flutter-5.png\")
<\/figure>\n<\/div>\n<\/div>\n\n\n\n![\"Project](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1784665863\/blog-How_to_Build_a_Responsive_Image_Component_in_Flutter-6.png\")
![\"Cloudinary](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1784665863\/blog-How_to_Build_a_Responsive_Image_Component_in_Flutter-7.png\")