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

08 Dec 2023

flutter

이미지에 테두리를 추가하려면 cached_network_image 패키지를 사용하여 이미지를 로드하고 Container 위젯을 사용하여 테두리를 추가할 수 있습니다.

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(12),
            ),
            child: CachedNetworkImage(
              imageUrl: 'https://example.com/image.jpg',
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
          ),
        ),
      ),
    );
  }
}

위 예제에서는 cached_network_image 패키지와 Container 위젯을 사용하여 이미지에 테두리를 추가하였습니다.

원하는 테두리 스타일에 따라 Container의 decoration 속성을 조정하여 테두리를 변경할 수 있습니다. 또한, CachedNetworkImage 위젯은 네트워크에서 이미지를 캐시하여 로드하기 때문에 성능 향상에 도움을 줄 수 있습니다.

자세한 내용은 cached_network_image 패키지 공식 문서를 참고하시기 바랍니다.