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

08 Dec 2023

flutter

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('Image Overlay Example'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              CachedNetworkImage(
                imageUrl: 'https://example.com/image.jpg',
                placeholder: (context, url) => CircularProgressIndicator(),
                errorWidget: (context, url, error) => Icon(Icons.error),
              ),
              Text(
                'Overlay Text',
                style: TextStyle(
                  fontSize: 20,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서, Stack 및 Positioned 위젯을 사용하여 텍스트를 이미지에 대해 오버레이했습니다. CachedNetworkImage 위젯은 네트워크에서 이미지를 불러오고, Text 위젯은 원하는 텍스트를 오버레이합니다.

이 코드를 실행하면, cached_network_image 패키지를 사용하여 이미지에 텍스트를 오버레이하는 간단한 예제를 확인할 수 있습니다.