[flutter] 스택드 위젯을 사용하여 목록 화면 구성 방법
들어가기
플러터(Flutter)에서 목록 화면을 구성할 때 스택드(Stacked) 위젯을 사용하는 방법에 대해 알아보겠습니다. 이를 통해 목록 항목들을 겹쳐서 표시하거나, 중첩된 구조를 만들어 복잡한 화면을 구성할 수 있습니다.
스택드 위젯이란?
스택드(Stacked) 위젯은 플러터에서 화면을 쌓는데 사용되는 위젯으로, 다수의 자식 위젯들을 겹쳐서 배치할 수 있습니다. 이 때 각 자식 위젯의 위치는 Positioned 위젯을 사용하여 조절할 수 있습니다.
스택드 위젯을 사용한 목록 화면 구성
아래는 스택드 위젯을 사용하여 목록 화면을 구성하는 간단한 예제 코드입니다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Stacked Widget Example'),
),
body: Stack(
children: <Widget>[
Container(
color: Colors.blue,
height: 200,
),
Container(
margin: EdgeInsets.only(top: 100),
color: Colors.green,
height: 200,
),
],
),
),
);
}
}
위 코드는 두 개의 컨테이너를 Stack 위젯으로 감싸 화면에 겹쳐서 표시하고 있습니다.
마무리
위 예제를 참고하여 플러터에서 스택드 위젯을 사용하여 목록 화면을 구성하는 방법에 대해 알아보았습니다. 스택드 위젯을 이용하면 각 항목의 위치를 자유롭게 조절할 수 있어 다채로운 화면을 구성할 수 있습니다.