[flutter] 플러터에서의 Stack 위젯과 MediaQuery 위젯의 조합 예시

07 Dec 2023

flutter

플러터(Flutter)는 구글에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 개발할 수 있습니다. 이번 포스트에서는 플러터에서 Stack 위젯과 MediaQuery 위젯을 함께 사용하는 예시를 알아보겠습니다.

Stack 위젯

Stack 위젯은 다른 위젯들을 겹쳐서 배치할 수 있는 위젯입니다. Stack 위젯을 사용하면 여러 위젯을 자유롭게 배치하고, 겹치거나 위치를 조정할 수 있습니다.

아래는 Stack 위젯의 예시 코드입니다.

Stack(
  children: <Widget>[
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

위 코드에서는 Stack 위젯 내부에 두 개의 Container 위젯을 배치했습니다. 첫 번째 Container는 가로와 세로 길이가 200인 빨간색 박스이고, 두 번째 Container는 첫 번째 Container의 왼쪽 위에서 50만큼 아래로, 50만큼 오른쪽으로 이동한 위치에 가로와 세로 길이가 100인 파란색 박스입니다.

MediaQuery 위젯

MediaQuery 위젯은 현재 미디어에 대한 정보를 가져오는 위젯입니다. 기기의 크기, 방향, 테마 등과 같은 정보를 확인할 수 있으며, 이를 활용하여 다양한 디자인 및 레이아웃을 설정할 수 있습니다.

아래는 MediaQuery 위젯을 사용하여 기기의 너비와 높이를 출력하는 예시 코드입니다.

MediaQuery(
  data: MediaQuery.of(context),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Text('Width: ${MediaQuery.of(context).size.width}'),
      Text('Height: ${MediaQuery.of(context).size.height}'),
    ],
  ),
)

위 코드에서는 MediaQuery 위젯을 사용하여 기기의 가로와 세로 길이를 출력하는 Column 위젯을 만들었습니다. MediaQuery.of(context)를 통해 현재 미디어에 대한 정보를 가져와서 사용할 수 있습니다.

Stack 위젯과 MediaQuery 위젯의 조합 예시

이제 Stack 위젯과 MediaQuery 위젯을 함께 사용하는 예시를 알아보겠습니다. 아래는 Stack 위젯과 MediaQuery 위젯을 조합하여 배경 이미지로 화면을 꽉 채우고, 중앙에 로고 이미지를 위치시키는 예시 코드입니다.

Stack(
  children: <Widget>[
    Image.asset(
      'assets/background.png',
      fit: BoxFit.cover,
      width: double.infinity,
      height: double.infinity,
    ),
    Positioned(
      top: MediaQuery.of(context).size.height / 2 - 50,
      left: MediaQuery.of(context).size.width / 2 - 50,
      child: Image.asset(
        'assets/logo.png',
        width: 100,
        height: 100,
      ),
    ),
  ],
)

위 코드에서는 Stack 위젯 내부에 배경 이미지와 로고 이미지를 배치했습니다. 배경 이미지는 화면을 꽉 채우기 위해 BoxFit.cover를 사용하고, 로고 이미지는 화면의 중앙에 위치하도록 Positioned 위젯을 사용하여 위치를 조정했습니다. 로고 이미지의 위치는 MediaQuery 위젯을 통해 화면의 크기를 가져와서 계산합니다.

이와 같이 Stack 위젯과 MediaQuery 위젯을 조합하여 다양한 배치와 레이아웃을 구현할 수 있습니다. 플러터에서 제공하는 다른 위젯들과 함께 활용하여 원하는 UI를 구현할 수 있습니다.

결론

이번 포스트에서는 플러터에서 Stack 위젯과 MediaQuery 위젯을 조합하여 다양한 UI를 구현하는 방법을 알아보았습니다. Stack 위젯을 사용하여 위젯들을 겹치고 위치를 조정하고, MediaQuery 위젯을 사용하여 기기의 크기 정보를 가져와서 레이아웃을 설정할 수 있습니다. 다양한 위젯들과 조합하여 플러터에서 멋진 애플리케이션을 개발해보세요!

참고: