[flutter] 스택드 위젯을 사용하여 리스트 화면 구성하기

15 Dec 2023

flutter

Flutter는 다양한 위젯을 활용하여 다양한 화면을 구성할 수 있는데, 그 중에서도 스택드(Stacked) 위젯은 여러 위젯을 겹쳐서 화면을 구성할 때 유용하게 사용됩니다. 이번에는 스택드(Stacked) 위젯을 사용하여 리스트 화면을 구성하는 방법을 살펴보겠습니다.

1. 스택드(Stacked) 위젯 이해하기

스택(Stack)은 위에서 아래로, 쌓아 올린 형태를 뜻하며, 스택드(Stacked) 위젯은 이와 비슷한 동작을 합니다. 스택드(Stacked) 위젯은 자식 위젯들을 겹쳐서 쌓을 수 있고, 위치를 조절하여 화면을 구성할 수 있는 위젯입니다.

2. 리스트 화면에 스택드(Stacked) 위젯 사용하기

아래는 리스트 화면에 스택드(Stacked) 위젯을 사용하여 아이템을 겹쳐서 구성하는 간단한 예시 코드입니다.

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: ListView(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Container(
                  color: Colors.blue,
                  height: 200,
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text('Sample Item 1', style: TextStyle(fontSize: 20, color: Colors.white)),
                ),
              ],
            ),
            Stack(
              children: <Widget>[
                Container(
                  color: Colors.green,
                  height: 200,
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text('Sample Item 2', style: TextStyle(fontSize: 20, color: Colors.white)),
                ),
              ],
            ),
            Stack(
              children: <Widget>[
                Container(
                  color: Colors.orange,
                  height: 200,
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  child: Text('Sample Item 3', style: TextStyle(fontSize: 20, color: Colors.white)),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 Stack 위젯을 사용하여 각각의 리스트 아이템을 겹치는 형태로 구성하였습니다.

이렇게 스택드(Stacked) 위젯을 사용하면 리스트 화면을 더 다채롭게, 효과적으로 디자인할 수 있습니다.

마무리

이렇게 Flutter에서는 스택드(Stacked) 위젯을 사용하여 리스트 화면을 구성하는 방법에 대해 알아보았습니다. 스택드(Stacked) 위젯을 활용하여 다양한 디자인을 구현해보세요!