플러터(Flutter)는 구글이 개발한 모바일 애플리케이션 개발 프레임워크로, 사용자 인터페이스를 위해 다양한 위젯을 제공합니다. 이번에는 Stack 위젯과 다른 레이아웃 위젯을 조합하여 스크롤 가능한 화면을 구성하는 방법에 대해 알아보겠습니다.
Stack 위젯
Stack 위젯은 다른 위젯들을 겹쳐서 배치할 수 있는 위젯입니다. 이를 통해 UI 요소들을 자유롭게 조합하여 복잡한 디자인을 구현할 수 있습니다. Stack 위젯의 자식 위젯들은 위치를 지정하기 위해 Positioned 위젯과 함께 사용됩니다.
Stack(
children: [
Positioned(
top: 0,
left: 0,
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
Positioned(
top: 50,
left: 50,
child: Container(
width: 150,
height: 150,
color: Colors.blue,
),
),
],
)
위의 예제에서는 Stack 위젯 내에 두 개의 Positioned 위젯을 사용하여 빨간색과 파란색의 사각형을 겹쳐서 배치하였습니다.
스크롤 가능한 화면 구성하기
Stack 위젯을 사용하여 UI를 구성할 때, 기본적으로 화면에 맞는 크기의 공간을 차지하게 됩니다. 따라서 Stack 위젯을 스크롤 가능한 화면으로 구성하기 위해서는 Stack 위젯을 SingleChildScrollView와 함께 사용해야 합니다.
SingleChildScrollView(
child: Stack(
children: [
Column(
children: [
Container(
height: 300,
color: Colors.red,
),
Container(
height: 300,
color: Colors.blue,
),
],
),
Positioned(
top: 200,
left: 100,
child: Container(
width: 150,
height: 150,
color: Colors.yellow,
),
),
],
),
)
위의 예제에서는 SingleChildScrollView를 사용하여 Stack 위젯을 감싸고, Column 위젯을 사용하여 여러 개의 컨테이너를 세로로 배치하였습니다. 추가로 Positioned 위젯을 사용하여 노란색 사각형을 특정 위치에 배치하였습니다.
ScrollView 위젯은 위젯이 화면보다 크거나 내용물이 화면에 맞지 않을 때 스크롤 기능을 제공합니다. 따라서 SingleChildScrollView를 사용하면 Stack 위젯과 다른 레이아웃 위젯을 조합하여 스크롤 가능한 화면을 구성할 수 있습니다.
이와 같이 플러터에서 Stack 위젯과 다른 레이아웃 위젯을 조합하여 스크롤 가능한 화면을 구성하는 방법에 대해 알아보았습니다. 필요에 따라 위젯들을 자유롭게 조합하여 원하는 디자인을 구현할 수 있으니, 다양한 화면 구성에 도전해보세요.