[flutter] 스택드 위젯을 사용하여 카드 뷰 구현하기

15 Dec 2023

flutter

Flutter는 다양한 위젯을 활용하여 멋진 사용자 인터페이스를 만들 수 있습니다. 이번에는 스택드(Stacked) 위젯을 사용하여 카드 뷰를 구현하는 방법에 대해 알아보겠습니다.

스택드(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('카드 뷰')),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                width: 300,
                height: 200,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey,
                      offset: Offset(0, 3),
                      blurRadius: 5,
                    ),
                  ],
                ),
              ),
              Positioned(
                child: Text('카드 뷰 예제'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제 코드에서는 Stack 위젯을 사용하여 카드 뷰를 구현하였습니다. Container와 BoxDecoration을 이용하여 카드 형태로 스타일링하고, Positioned 위젯을 사용하여 내부에 텍스트를 위치시켰습니다.

이렇게 스택드(Stacked) 위젯을 사용하여 카드 뷰를 구현할 수 있습니다.

더 많은 정보나 예제는 Flutter 공식 문서를 참고하실 수 있습니다.

이상으로 Flutter에서 스택드(Stacked) 위젯을 사용하여 카드 뷰를 구현하는 방법에 대해 알아보았습니다.