getRoundedNetworkImage method

Widget getRoundedNetworkImage(Map<dynamic, Map<String, String>> item, { double borderRadius = 5.0, Color borderColor = Colors.black, Color iconColor = Colors.black, double borderWidth = 1, IconData? errorIcon, })

Displays a network image with rounded border and loading/error states.

Fetches and displays an image from a network URL with a customizable border, loading indicator during fetch, and fallback icon on error.

Parameters:

• item: Map where the key is the image URL string.
• borderRadius: Corner radius for the container (defaults to 5.0).
• borderColor: Color of the border (defaults to black).
• iconColor: Color of the error fallback icon (defaults to black).
• borderWidth: Width of the border (defaults to 1).
• errorIcon: Icon to display on load failure. Defaults to Icons.no_photography_outlined.

Returns a Container with the network image, loading indicator, or error icon.

The widget shows:

• A CircularProgressIndicator while loading
• The network image when successfully loaded
• An error icon if the image fails to load

Example:

getRoundedNetworkImage(
  {'https://example.com/image.jpg': {'': ''}},
  borderRadius: 8,
  borderColor: Colors.grey,
  errorIcon: Icons.broken_image,
);

Implementation

Widget getRoundedNetworkImage(Map<dynamic, Map<String, String>> item,
    {double borderRadius = 5.0,
    Color borderColor = Colors.black,
    Color iconColor = Colors.black,
    double borderWidth = 1,
    IconData? errorIcon}) {
  return Container(
    padding: const EdgeInsets.fromLTRB(3, 3, 3, 3),
    decoration: BoxDecoration(
      shape: BoxShape.rectangle,
      border: Border.all(color: borderColor, width: borderWidth),
    ),
    child: Image.network(
      item.keys.first,
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) {
          return SizedBox(child: child); // Image loaded successfully
        } else {
          // Show a loading indicator while the image is being fetched
          return Center(
            child: CircularProgressIndicator(
              value: loadingProgress.expectedTotalBytes != null
                  ? loadingProgress.cumulativeBytesLoaded /
                      (loadingProgress.expectedTotalBytes ?? 1)
                  : null,
            ),
          );
        }
      },
      errorBuilder:
          (BuildContext context, Object exception, StackTrace? stackTrace) {
        return Icon(
          errorIcon ?? Icons.no_photography_outlined,
          color: iconColor,
        ); // Handle errors in loading
      },
    ),
  );
}