image_network

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Image Network は、CanvasKit を使用して Web 上で画像をレンダリングするように設計された Flutter パッケージであり、Web 環境での画像読み込みを妨げる一般的な CORS 制限を効果的に回避します。CanvasKit を活用することで、サーバーサイドの設定なしに外部ソースからの画像をスムーズに表示できます。このパッケージは、リモート画像アセットに大きく依存し、異なるプラットフォーム間で一貫したレンダリングが必要なアプリケーションに特に役立ちます。iOS および Web プラットフォームの両方をサポートしており、クロスプラットフォーム互換性を確保しています。

用途

CORSの問題なくWeb上でリモート画像を読み込む
CanvasKit を使用した Flutter Web アプリでの画像レンダリング
ユーザーがアップロードしたまたはサードパーティの画像を信頼性高く表示する
WebベースのFlutterアプリに動的画像コンテンツを統合する
複数のプラットフォーム間で一貫した画像レンダリングを確保する

主な機能

Web画像レンダリングにCanvasKitを使用しています
Web上のCORS制限をバイパスする
iOS および Web プラットフォームをサポートしています
pub add を通したシンプルな統合
リモート画像の最適化されたパフォーマンス

適している対象

リモート画像ソースを使用する Flutter Web開発者
ウェブ上で信頼できる画像の読み込みを必要とするアプリ
CORS関連の画像読み込み問題に直面する開発者
画像中心のUIを備えたクロスプラットフォームのFlutterプロジェクト
CanvasKitをグラフィックスに活用するプロジェクト

注意事項

WebおよびiOSプラットフォームに限定
WebビルドでのCanvasKitサポートが必要です
大きな画像ではパフォーマンスのオーバーヘッドがある可能性があります
ネイティブなAndroidまたはデスクトップには適していません
外部画像URLのアクセス可能性に依存

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

🌐 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

カテゴリー・パッケージ・リポジトリを検索

パッケージをインストール