image_network

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Image Network는 CanvasKit를 사용하여 웹에서 이미지를 렌더링하도록 설계된 Flutter 패키지로, 일반적으로 웹 환경에서 이미지 로딩을 방해하는 CORS 제한을 효과적으로 회피합니다. CanvasKit를 활용함으로써 서버 측 구성 없이 외부 소스의 이미지를 원활하게 표시할 수 있습니다. 이 패키지는 원격 이미지 자산에 크게 의존하고 다양한 플랫폼 간 일관된 렌더링이 필요한 애플리케이션에 특히 유용합니다. iOS 및 웹 플랫폼을 모두 지원하여 크로스 플랫폼 호환성을 보장합니다.

사용 사례

CORS 문제 없이 웹에서 원격 이미지 로드하기
CanvasKit를 사용한 Flutter 웹 앱에서 이미지 렌더링
사용자 업로드 또는 제3자 이미지를 신뢰할 수 있게 표시하기
웹 기반의 Flutter 앱에 동적 이미지 콘텐츠 통합
다양한 플랫폼 간 일관된 이미지 렌더링 보장

주요 기능

웹 이미지 렌더링에 CanvasKit를 사용합니다
웹에서 CORS 제한을 우회합니다
iOS 및 웹 플랫폼을 지원합니다
pub add를 통한 간편한 통합
원격 이미지에 대한 최적화된 성능

적합한 대상

원격 이미지 소스를 사용하는 플러터 웹 개발자
웹에서 신뢰할 수 있는 이미지 로딩이 필요한 앱
CORS 관련 이미지 로딩 문제에 직면한 개발자
이미지 중심의 UI를 가진 크로스플랫폼 플러터 프로젝트
그래픽용 CanvasKit을 활용하는 프로젝트

고려 사항

웹 및 iOS 플랫폼에 제한됨
웹 빌드에서 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

분류, 패키지 및 저장소 검색

패키지 설치