[flutter] cached_network_image 패키지를 사용하여 이미지에 그림자 효과를 추가하는 방법을 알려주세요.

08 Dec 2023

flutter

먼저 pubspec.yaml 파일에서 cached_network_image 패키지를 추가합니다.

dependencies:
  cached_network_image: ^3.1.0

그런 다음, 다음 코드와 같이 CachedNetworkImage를 사용하여 이미지와 함께 BoxDecoration으로 그림자를 추가할 수 있습니다.

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

class ShadowImage extends StatelessWidget {
  final String imageUrl;

  ShadowImage({required this.imageUrl});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
          ),
        ],
      ),
      child: CachedNetworkImage(
        imageUrl: imageUrl,
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
      ),
    );
  }
}

위 코드에서는 CachedNetworkImage 위젯을 사용하여 네트워크에서 이미지를 가져올 수 있으며, BoxDecoration의 boxShadow 속성을 이용하여 그림자 효과를 제공합니다.

이제 위젯을 사용하여 이미지에 그림자 효과를 추가할 수 있습니다.

ShadowImage(imageUrl: 'https://example.com/image.jpg')

이렇게 하면 cached_network_image 패키지를 사용하여 이미지에 그림자 효과를 추가할 수 있습니다.