Flutter 앱을 개발하다 보면 여러 위젯을 겹쳐서 표시해야 할 때가 있습니다. 스택드(Stacked) 위젯을 사용하면 여러 위젯을 겹칠 수 있어서 화면을 다양하게 구성할 수 있습니다. 여기에서는 스택드 위젯에 이미지 위젯을 추가하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치

먼저, 이미지를 표시하기 위해 flutter 패키지에서 제공하는 flutter_svg나 image와 같은 이미지 관련 패키지를 설치해야 합니다. 이를 위해 pubspec.yaml 파일에 아래와 같이 패키지를 추가한 후, flutter pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

dependencies:
  flutter_svg: ^0.22.0
  image: ^3.0.1

스택드 위젯에 이미지 추가하기

다음으로, Stack 위젯을 사용하여 이미지를 추가합니다. 아래는 예시 코드입니다.

import 'package:flutter/material.dart';

class StackedImageExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Image.asset('assets/background.jpg'),
        Positioned(
          top: 20.0,
          left: 20.0,
          child: Image.network('https://example.com/image.jpg'),
        ),
      ],
    );
  }
}

위 코드에서 Stack 위젯 안에 children으로 이미지 위젯을 추가하고, Positioned 위젯을 사용하여 이미지의 위치를 조절합니다.

마치며

위의 예시를 참고하여 스택드 위젯에 이미지를 추가하는 방법을 알아보았습니다. 이를 응용하여 여러 이미지를 겹쳐 표시하거나 다양한 레이아웃을 구성할 수 있습니다.

더 많은 정보는 Flutter 공식 문서를 참고하시기 바랍니다.