이번 블로그 포스트에서는 플러터에서 Stack 위젯과 ListView 위젯을 조합하여 어떻게 사용하는지에 대해 알아보겠습니다.
Stack 위젯
먼저, Stack 위젯은 여러 위젯을 겹쳐서 배치할 수 있는 위젯입니다. Stack 위젯은 children 속성을 사용하여 여러 위젯을 추가할 수 있습니다. 추가된 위젯은 z-index를 기반으로 겹쳐집니다.
Stack(
children: [
// 첫 번째 위젯
Positioned(
top: 100,
left: 100,
child: Container(
width: 200,
height: 200,
color: Colors.red,
),
),
// 두 번째 위젯
Positioned(
top: 150,
left: 150,
child: Container(
width: 200,
height: 200,
color: Colors.green,
),
),
],
)
위의 예시는 Stack 위젯을 사용하여 빨간색과 초록색의 정사각형을 겹쳐서 배치하는 예시입니다. 첫 번째 위젯은 (100, 100) 위치에, 두 번째 위젯은 (150, 150) 위치에 위치하도록 설정되었습니다.
ListView 위젯
다음으로, ListView 위젯은 스크롤 가능한 리스트를 생성하는 위젯입니다. children 속성을 사용하여 여러 위젯을 리스트에 추가할 수 있습니다.
ListView(
children: [
ListTile(title: Text('리스트 아이템 1')),
ListTile(title: Text('리스트 아이템 2')),
ListTile(title: Text('리스트 아이템 3')),
ListTile(title: Text('리스트 아이템 4')),
ListTile(title: Text('리스트 아이템 5')),
],
)
위의 예시는 ListView 위젯을 사용하여 5개의 리스트 아이템을 생성하는 예시입니다.
Stack 위젯과 ListView 위젯의 조합
이제 Stack 위젯과 ListView 위젯을 조합하여 사용하는 예시를 보겠습니다. Stack 위젯을 사용하여 ListView 위젯을 다른 위젯과 겹쳐서 배치할 수 있습니다.
Stack(
children: [
ListView(
children: [
ListTile(title: Text('리스트 아이템 1')),
ListTile(title: Text('리스트 아이템 2')),
ListTile(title: Text('리스트 아이템 3')),
],
),
Positioned(
bottom: 0,
left: 0,
child: Container(
padding: EdgeInsets.all(10),
color: Colors.grey,
child: Text('하단 배너'),
),
),
],
)
위의 예시에서는 Stack 위젯을 사용하여 ListView 위젯과 하단 배너를 겹쳐서 배치하였습니다. ListView 위젯은 위쪽에 배치되고, 하단 배너는 Positioned 위젯을 사용하여 아래쪽에 배치되도록 설정하였습니다.
플러터에서 Stack 위젯과 ListView 위젯의 조합은 여러 가지 UI 요소를 겹치게 배치할 때 유용합니다. 위의 예시를 참고하여 플러터 앱 개발에서 Stack 위젯과 ListView 위젯을 적절히 조합하여 사용해보시기 바랍니다.