[flutter] cached_network_image 패키지를 사용하여 이미지의 투명도를 조절하는 방법을 알려주세요.

08 Dec 2023

flutter

cached_network_image 패키지를 사용하여 이미지 투명도를 조절하는 방법을 살펴보겠습니다.

1. `cached_network_image` 패키지 설치

먼저, pubspec.yaml 파일에 다음과 같이 cached_network_image 패키지를 추가합니다.

dependencies:
  cached_network_image: ^3.0.0

그런 다음, 터미널에서 아래 명령을 실행하여 패키지를 설치합니다.

flutter pub get

2. 이미지 투명도 조절하기

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('이미지 투명도 조절'),
        ),
        body: Center(
          child: Opacity(
            opacity: 0.5, // 투명도 조절 (0.0~1.0 사이의 값)
            child: CachedNetworkImage(
              imageUrl: 'https://example.com/image.jpg',
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),
        ),
      ),
    );
  }
}

위 예시에서 Opacity 위젯을 사용하여 이미지의 투명도를 조절하였습니다. opacity 속성에 0.0부터 1.0까지의 값을 지정하여 투명도를 조절할 수 있습니다.

이제 cached_network_image 패키지를 사용하여 이미지의 투명도를 조절하는 방법을 알아보았습니다.

더 많은 정보를 원하시면 cached_network_image 공식 문서를 참고하실 수 있습니다.

1. cached_network_image 패키지 설치

2. 이미지 투명도 조절하기

1. `cached_network_image` 패키지 설치