[flutter] 플러터에서 cached_network_image 패키지를 사용하여 이미지의 명암을 조절하는 방법을 알려주세요.

08 Dec 2023

flutter

이번에는 Flutter 앱에서 네트워크로부터 이미지를 가져와 명암을 조절하는 방법에 대해 알아보겠습니다. 이를 위해 cached_network_image 패키지를 사용하여 이미지를 캐싱하고, ColorFiltered 위젯을 이용하여 명암을 조절하겠습니다.

1. cached_network_image 패키지 설치

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

dependencies:
  cached_network_image: ^3.1.0

그리고, 패키지를 설치하기 위해 터미널에서 아래 명령어를 실행합니다.

flutter pub get

2. 이미지 가져오기 및 명암 조절

이제 cached_network_image 패키지를 사용하여 이미지를 가져와 명암을 조절해보겠습니다. 아래는 해당 작업을 수행하는 예제 코드입니다.

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: Text('Image Brightness'),
        ),
        body: Center(
          child: ColorFiltered(
            colorFilter: ColorFilter.mode(
              Colors.black.withOpacity(0.6), BlendMode.darken),
            child: CachedNetworkImage(
              imageUrl: 'https://example.com/image.jpg',
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),
        ),
      ),
    );
  }
}

위 코드에서 ColorFiltered 위젯을 사용하여 CachedNetworkImage를 감싸고, colorFilter 속성을 통해 명암을 조절합니다.

이렇게하면 cached_network_image 패키지를 사용하여 네트워크 이미지의 명암을 조절할 수 있습니다.덹니다.