[flutter] cached_network_image 패키지를 사용하여 이미지의 테두리를 표시하는 방법을 알려주세요.

08 Dec 2023

flutter

cached_network_image 패키지는 웹 이미지를 캐시하고 표시해주는 데 유용한 도구입니다. 이미지에 테두리를 추가하려면 해당 이미지를 Container나 DecoratedBox와 같은 위젯으로 감싸고 BoxDecoration을 사용하여 테두리를 설정할 수 있습니다.

아래는 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('이미지 테두리 예제'),
        ),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.black,
                width: 2,
              ),
              borderRadius: BorderRadius.circular(10),
            ),
            child: CachedNetworkImage(
              imageUrl: 'https://via.placeholder.com/150',
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),
        ),
      ),
    );
  }
}

위 예제에서는 Container를 사용하여 이미지를 감싸고, BoxDecoration을 이용해 테두리를 추가하였습니다. CachedNetworkImage 위젯은 이미지를 가져와서 표시해주는 역할을 합니다.

이렇게하면 cached_network_image 패키지를 사용하여 이미지에 테두리를 추가할 수 있습니다. 위 예제를 참고하여 원하는 스타일로 이미지 테두리를 설정해보세요.

물론 위 예제는 짧은 예시이며, 실제 앱에 적용할 때 더 다양한 스타일링을 적용할 수 있습니다.