[flutter] 플러터에서 cached_network_image 패키지를 사용하여 이미지에 텍스트를 추가하는 방법을 알려주세요.

08 Dec 2023

flutter

이번 글에서는 Flutter에서 cached_network_image 패키지를 사용하여 이미지 위에 텍스트를 추가하는 방법에 대해 알아보겠습니다.

1. cached_network_image 패키지 추가

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

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.1.0
  # 다른 의존성들도 함께 명시해 주세요

이후 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드 받습니다.

2. 이미지 위에 텍스트 추가

다음으로, cached_network_image를 사용하여 이미지 위에 텍스트를 추가하려면 CachedNetworkImage 위젯과 함께 Stack 위젯을 사용합니다.

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

class ImageWithText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        CachedNetworkImage(
          imageUrl: 'https://example.com/image.jpg',
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
        Positioned(
          bottom: 10,
          right: 10,
          child: Text(
            'Sample Text',
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }
}

이 예제에서는 CachedNetworkImage를 사용하여 원격 이미지를 가져와 보여주고, Stack 위젯을 사용하여 이미지 위에 텍스트를 배치합니다.

마치며

이제 여러분은 Flutter 앱에서 cached_network_image 패키지를 사용하여 이미지에 텍스트를 추가하는 방법을 알게 되었습니다. 이를 응용하여 다양한 디자인 요소를 추가해 보세요!