이번 글에서는 Flutter에서 스택(Stack) 위젯을 사용하여 간단한 날씨 앱 화면을 구성하는 방법에 대해 소개하려고 합니다.

스택(Stack) 위젯 개요

스택(Stack) 위젯은 다른 위젯들을 겹쳐서 배치할 수 있는 위젯입니다. 첫 번째 자식 위젯을 아래에, 다음 자식 위젯을 그 위에 배치합니다. 스택 위젯을 사용하면 좌표를 직접 지정하여 자식 위젯들을 배치할 수 있습니다.

날씨 앱 화면 구성하기

1. 먼저, Stack 위젯을 사용하여 배경 이미지와 날씨 정보를 표시할 위젯을 겹쳐서 배치합니다.

    Stack(
      children: [
        Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/background.jpg'),
              fit: BoxFit.cover,
            ),
          ),
        ),
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              '서울',
              style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
            Text(
              '맑음',
              style: TextStyle(
                fontSize: 24,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ],
    )
   

   위 코드에서는 배경 이미지를 첫 번째 자식으로, 날씨 정보를 두 번째 자식으로 추가하여 화면을 구성했습니다. 배경 이미지는 Container 위젯을 이용하여 표현하고, 날씨 정보는 Column 위젯 내에 Text 위젯을 이용하여 구성했습니다.

2. 이제, 이 화면을 화면 전체에 꽉 채우도록 앱 전체 화면에 Stack을 배치합니다.

    MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // ...위의 Stack 코드 삽입...
          ],
        ),
      ),
    )
   

   위 코드는 MaterialApp을 사용하여 앱의 기본적인 구조를 설정하고, Scaffold 내에 Stack을 추가하여 전체 화면에 날씨 앱 화면을 구성합니다.

이렇게 하면 Flutter에서 스택드 위젯을 사용하여 간단한 날씨 앱 화면을 구성할 수 있습니다. 스택(Stack) 위젯을 이용하면 여러 위젯들을 겹쳐서 복잡한 화면을 쉽게 구성할 수 있으며, 좌표를 직접 지정하여 자유롭게 배치할 수 있는 장점이 있습니다.

더 많은 세부적인 화면 구성에 대한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.

Happy coding! 🚀