image_network

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

Image Network is a Flutter package designed to render images on the web using CanvasKit, effectively bypassing CORS restrictions that commonly hinder image loading in web environments. By leveraging CanvasKit, it enables seamless image display from external sources without requiring server-side configuration. The package is particularly useful for applications that rely heavily on remote image assets and need consistent rendering across different platforms. It supports both iOS and web platforms, ensuring cross-platform compatibility.

Use cases

Loading remote images on web without CORS issues
Rendering images in Flutter web apps with CanvasKit
Displaying user-uploaded or third-party images reliably
Integrating dynamic image content in web-based Flutter apps
Ensuring consistent image rendering across platforms

Key features

Uses CanvasKit for web image rendering
Bypasses CORS limitations on web
Supports iOS and web platforms
Simple integration via pub add
Optimized performance for remote images

Suitable for

Web developers using Flutter with remote image sources
Apps requiring reliable image loading on the web
Developers facing CORS-related image loading problems
Cross-platform Flutter projects with image-heavy UIs
Projects leveraging CanvasKit for graphics

Considerations

Limited to web and iOS platforms
Requires CanvasKit support in web builds
May have performance overhead for large images
Not suitable for native Android or desktop
Dependent on external image URLs being accessible

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

🌐 Image Network

Image Network is a package that allows you to render images on the web using CanvasKit without having problems with CORS.

📚 Features

Image Manager (Android - iOS - Web)
Use the CanvasKit renderer
No problems with CORS
Fast loading
Image cache (Android && iOS)
- Recommended using with CachedNetworkImage version 2.2.0 or newer
Image from Url:
- (Web) accept http or https image
- (Android && iOS) accept https images
Supported Image Formats
- PNG
- JPEG
- GIF / Animated GIF

🔌 Installation

Add image_network as a dependency in your pubspec.yaml file .

Import Image Network:

import 'package:image_network/image_network.dart';

👨‍💻 How To Use

URL Image

String imageUrl = "https://storage.googleapis.com/cms-storage-bucket/a9d6ce81aee44ae017ee.png";

Image Network

ImageNetwork(
    image: imageUrl,
    height: 350.0,
    width: 240.0,
    duration: 1500,
    curve: Curves.easeIn,
    onPointer: true,
    debugPrint: false,
    backgroundColor: Colors.blue,
    fitAndroidIos: BoxFit.cover,
    fitWeb: BoxFitWeb.cover,
    borderRadius: BorderRadius.circular(70),
    onLoading: const CircularProgressIndicator(
      color: Colors.indigoAccent,
    ),
    onError: const Icon(
      Icons.error,
      color: Colors.red,
    ),
    onTap: () {
      debugPrint("©gabriel_patrick_souza");
    },
  )

☀️ License

MIT License

Search categories, packages and repositories

Install package