[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. 그라데이션을 조절하는 방법

cached_network_image를 사용하여 이미지 위에 그라데이션을 조절하려면 CachedNetworkImage 위젯을 사용하고 해당 위젯에 새로운 스택을 추가하여 그라데이션을 적용합니다.

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

class GradientImage extends StatelessWidget {
  final String imageUrl;

  const GradientImage({Key? key, required this.imageUrl}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 이미지 표시
        CachedNetworkImage(
          imageUrl: imageUrl,
          fit: BoxFit.cover,
        ),
        // 그라데이션 조절
        Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.transparent,
                Colors.black.withOpacity(0.7),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

위젯을 사용할 때는 다음과 같이 해당 위젯을 호출합니다.

GradientImage(imageUrl: 'your_image_url_here'),

이제 위 코드를 사용하여 cached_network_image 패키지를 활용하여 이미지의 그라데이션을 조절할 수 있습니다.

물론 원하는 그라데이션을 위해 LinearGradient의 begin, end 및 colors를 조절할 수 있습니다.