[flutter] 플러터에서의 Stack 위젯을 이용한 리스트 및 그리드 뷰 구성 방법

07 Dec 2023

flutter

플러터는 다양한 위젯을 조합하여 화면을 구성할 수 있는 강력한 프레임워크입니다. Stack 위젯은 플러터에서 여러 위젯을 겹쳐서 사용할 수 있도록 도와주는 유용한 위젯입니다. 이 포스트에서는 Stack 위젯을 활용하여 리스트와 그리드 뷰를 구성하는 방법에 대해 알아보겠습니다.

1. 리스트 뷰 구성하기

리스트 뷰는 여러 위젯을 수직으로 나열하는 위젯입니다. Stack 위젯에서 리스트 뷰를 만들기 위해서는 SingleChildScrollView 위젯을 사용하여 스크롤 가능한 리스트 뷰를 생성해야 합니다.

Stack(
  children: [
    // 다른 위젯들
    SingleChildScrollView(
      child: Column(
        children: [
          // 리스트 아이템들
        ],
      ),
    ),
  ],
);

다른 위젯들과 겹칠 수 있는 리스트 뷰를 만들기 위해 Stack 위젯을 사용합니다. SingleChildScrollView는 스크롤 가능한 리스트 뷰를 제공하며, Column 위젯을 적절히 조합하여 리스트 아이템들을 나열합니다.

2. 그리드 뷰 구성하기

그리드 뷰는 여러 위젯을 격자 형태로 나열하는 위젯입니다. Stack 위젯에서 그리드 뷰를 만들기 위해서는 SingleChildScrollView 대신 GridView 위젯을 사용해야 합니다.

Stack(
  children: [
    // 다른 위젯들
    GridView.count(
      crossAxisCount: 2,
      children: [
        // 그리드 아이템들
      ],
    ),
  ],
);

crossAxisCount 속성을 사용하여 격자의 열 수를 설정할 수 있으며, children 속성을 통해 그리드 아이템들을 나열합니다.

이렇게 Stack 위젯을 활용하여 리스트 뷰와 그리드 뷰를 구성할 수 있습니다. 플러터의 다양한 위젯을 적절히 활용하여 원하는 UI를 만들어보세요!

1. 리스트 뷰 구성하기

2. 그리드 뷰 구성하기

참고자료