Flutter에서 이미지 오버레이(Image Overlay) 만들기

**이미지 오버레이(Image Overlay)**는 이미지 위에 반투명 색상, 텍스트, 아이콘 등을 겹쳐서 표시하는 기법으로, 사용자 인터페이스(UI)를 더욱 매력적으로 만들 수 있습니다. Flutter에서는 다양한 위젯을 사용하여 손쉽게 이미지 오버레이를 구현할 수 있습니다. 이번 글에서는 Flutter에서 이미지 오버레이를 만드는 방법과 활용 사례를 단계별로 살펴보겠습니다.

---

1. 기본 이미지 오버레이 구현하기

Flutter에서 이미지를 배경으로 설정하고, 위에 텍스트나 색상을 오버레이로 추가하려면 Stack 위젯을 사용할 수 있습니다. Stack은 여러 위젯을 겹쳐서 배치할 수 있는 위젯입니다.

1.1 기본 예제

import 'package:flutter/material.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(
            children: [
              Image.asset(
                'assets/background.jpg',
                width: 300,
                height: 200,
                fit: BoxFit.cover,
              ),
              Container(
                width: 300,
                height: 200,
                color: Colors.black.withOpacity(0.5), // 반투명 오버레이
              ),
              Center(
                child: Text(
                  'Hello, Overlay!',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

 

• Stack: 이미지를 배경으로 하고, 위에 컨테이너와 텍스트를 겹쳐서 배치합니다.
• Container: 오버레이 색상을 적용하기 위해 사용됩니다. color: Colors.black.withOpacity(0.5)는 반투명한 검정색 오버레이를 추가합니다.
• Text: 이미지 위에 텍스트를 표시합니다.

실행 결과:

위 코드는 배경 이미지 위에 반투명한 검정색 오버레이를 추가하고, 중앙에 텍스트를 표시합니다.

 

 

 

728x90

---

2. 텍스트와 그라디언트 오버레이 추가

오버레이 색상을 단색이 아닌 **그라디언트(Gradient)**로 설정하면 더욱 세련된 효과를 줄 수 있습니다. BoxDecoration을 활용하여 오버레이에 그라디언트를 적용할 수 있습니다.

2.1 그라디언트 오버레이 예제

Stack(
  children: [
    Image.asset(
      'assets/background.jpg',
      width: 300,
      height: 200,
      fit: BoxFit.cover,
    ),
    Container(
      width: 300,
      height: 200,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [Colors.black.withOpacity(0.8), Colors.transparent],
          begin: Alignment.bottomCenter,
          end: Alignment.topCenter,
        ),
      ),
    ),
    Positioned(
      bottom: 10,
      left: 10,
      child: Text(
        'Gradient Overlay',
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
),

 

• BoxDecoration.gradient: 그라디언트를 설정하여 오버레이에 색상이 점진적으로 변하도록 적용합니다.
• LinearGradient: 색상의 시작과 끝을 지정하여 선형 그라디언트를 생성합니다.
  • begin과 end는 그라디언트 방향을 설정합니다.
• Positioned: 텍스트의 위치를 하단 왼쪽에 배치합니다.

실행 결과:

이 코드는 이미지 하단에서 상단으로 점점 투명해지는 검정색 그라디언트 오버레이를 추가하고, 텍스트를 이미지 하단에 배치합니다.

---

3. 아이콘과 버튼을 포함한 오버레이 만들기

Flutter에서는 이미지 위에 아이콘과 버튼을 추가하여, 사용자와의 상호작용을 제공하는 UI를 만들 수 있습니다. 이를 위해 Icon과 ElevatedButton 같은 위젯을 Stack 내부에 배치합니다.

3.1 아이콘과 버튼 추가 예제

Stack(
  children: [
    Image.asset(
      'assets/background.jpg',
      width: 300,
      height: 200,
      fit: BoxFit.cover,
    ),
    Container(
      width: 300,
      height: 200,
      color: Colors.black.withOpacity(0.3),
    ),
    Positioned(
      top: 10,
      right: 10,
      child: Icon(
        Icons.favorite,
        color: Colors.red,
        size: 30,
      ),
    ),
    Center(
      child: ElevatedButton(
        onPressed: () {
          print("Button Pressed!");
        },
        style: ElevatedButton.styleFrom(
          primary: Colors.white.withOpacity(0.8),
        ),
        child: Text(
          "Click Me",
          style: TextStyle(color: Colors.black),
        ),
      ),
    ),
  ],
),

 

• Icon: 좋아요(하트) 아이콘을 이미지 오른쪽 상단에 배치합니다.
• ElevatedButton: 버튼을 이미지 중앙에 배치하고, 클릭 이벤트를 처리합니다.

실행 결과:

이미지 오른쪽 상단에 하트 아이콘이 표시되고, 중앙에 "Click Me" 버튼이 배치됩니다.

---

4. 블러(Blur) 효과를 활용한 오버레이

Flutter의 BackdropFilter 위젯을 사용하면 블러(Blur) 효과를 쉽게 구현할 수 있습니다. 블러 오버레이는 이미지 위에 흐림 효과를 추가하여 세련된 느낌을 줄 수 있습니다.

4.1 블러 오버레이 예제

import 'dart:ui';

Stack(
  children: [
    Image.asset(
      'assets/background.jpg',
      width: 300,
      height: 200,
      fit: BoxFit.cover,
    ),
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5.0, sigmaY: 5.0), // 블러 강도 설정
      child: Container(
        color: Colors.black.withOpacity(0.2), // 반투명 블러 오버레이
      ),
    ),
    Center(
      child: Text(
        "Blur Overlay",
        style: TextStyle(
          color: Colors.white,
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
  ],
),

 

• BackdropFilter: 이미지에 블러 효과를 적용하는 위젯입니다.
• ImageFilter.blur: 블러의 강도를 설정하는 클래스입니다. sigmaX와 sigmaY는 각각 가로와 세로 블러의 강도를 나타냅니다.
• Container: 블러 위에 반투명 검정색 레이어를 추가하여 텍스트가 더 잘 보이도록 설정합니다.

실행 결과:

이 코드는 이미지 위에 흐림 효과와 반투명 검정색 오버레이를 추가하여 중앙에 있는 텍스트를 돋보이게 만듭니다.

 

 

반응형

 

---

5. 동적 오버레이 만들기

Flutter에서는 사용자의 상호작용에 따라 오버레이를 동적으로 변경할 수도 있습니다. 예를 들어, 사용자가 이미지를 클릭하면 오버레이 색상을 변경하거나 텍스트를 업데이트할 수 있습니다.

5.1 동적 오버레이 예제

class DynamicOverlay extends StatefulWidget {
  @override
  _DynamicOverlayState createState() => _DynamicOverlayState();
}

class _DynamicOverlayState extends State<DynamicOverlay> {
  bool isClicked = false;

  void toggleOverlay() {
    setState(() {
      isClicked = !isClicked;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: toggleOverlay,
      child: Stack(
        children: [
          Image.asset(
            'assets/background.jpg',
            width: 300,
            height: 200,
            fit: BoxFit.cover,
          ),
          Container(
            width: 300,
            height: 200,
            color: isClicked
                ? Colors.red.withOpacity(0.5)
                : Colors.black.withOpacity(0.3),
          ),
          Center(
            child: Text(
              isClicked ? "Clicked!" : "Tap to Change Overlay",
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ],
      ),
    );
  }
}

 

 

• GestureDetector: 사용자의 탭 이벤트를 감지하여 오버레이 상태를 변경합니다.
• setState: 상태를 변경하여 동적으로 UI를 업데이트합니다.

실행 결과:

사용자가 이미지를 클릭하면 오버레이 색상이 검정색에서 빨간색으로 변경되고, 텍스트가 업데이트됩니다.

---

결론

Flutter에서 이미지 오버레이를 구현하는 방법은 Stack, Container, BackdropFilter와 같은 위젯을 조합하여 손쉽게 만들 수 있습니다. 반투명 오버레이, 그라디언트 효과, 블러 효과 등 다양한 스타일을 적용할 수 있으며, 동적 상호작용을 통해 사용자 경험을 더욱 향상시킬 수 있습니다. 이번 글에서 소개한 예제를 바탕으로 Flutter 애플리케이션에 매력적인 이미지 오버레이를 추가해보세요!