서론

플러터(Flutter)는 크로스 플랫폼 앱 개발 프레임워크로, 다양한 위젯들을 조합해 다양한 레이아웃을 구성할 수 있습니다. 이번 포스트에서는 Stack 위젯과 GridView 위젯을 조합한 예시를 다루어보겠습니다.

Stack 위젯

먼저, Stack 위젯은 위젯을 중첩하여 쌓을 수 있는 위젯입니다. Stack 위젯 안에 들어있는 위젯들을 겹쳐서 화면에 표시하고, 각 위젯의 위치와 크기를 조정할 수 있습니다.

Stack(
  children: [
    Positioned(
      top: 0,
      left: 0,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
    Positioned(
      top: 50,
      left: 50,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

위의 예시에서는 Stack 위젯 안에 두 개의 Container 위젯을 중첩하여 화면에 표시했습니다. Positioned 위젯을 사용하여 각 Container 위젯의 위치를 지정하고, width와 height를 설정하여 크기를 조정했습니다.

GridView 위젯

그 다음은 GridView 위젯입니다. GridView 위젯은 그리드 형태로 위젯들을 나열할 수 있게 해주는 위젯입니다. 주로 리스트 형태로 데이터를 표시할 때 사용됩니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      color: Colors.green,
    );
  },
)

위의 예시에서는 GridView.builder를 사용하여 그리드 형태로 위젯들을 나열했습니다. gridDelegate 속성을 사용하여 그리드의 열 갯수를 설정하고, itemBuilder를 통해 각각의 위젯을 구성했습니다.

Stack 위젯과 GridView 위젯의 조합

이제 Stack 위젯과 GridView 위젯을 조합해보겠습니다. Stack 위젯 안에 GridView 위젯을 배치하여 겹친 형태의 그리드를 만들 수 있습니다.

Stack(
  children: [
    GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
      ),
      itemBuilder: (BuildContext context, int index) {
        return Container(
          color: Colors.green,
        );
      },
    ),
    Positioned(
      top: 10,
      left: 10,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.red,
      ),
    ),
  ],
)

위의 예시에서는 Stack 위젯 안에 GridView.builder 위젯과 Positioned 위젯을 배치하여 그리드 위에 빨간색 작은 사각형을 겹쳐 표시했습니다. Stack 위젯을 통해 위젯들을 쌓을 수 있고, Positioned 위젯을 사용하여 위치를 조정할 수 있습니다.

결론

이번 포스트에서는 플러터에서 Stack 위젯과 GridView 위젯을 조합한 예시를 다뤘습니다. Stack 위젯을 사용하여 위젯들을 중첩하고 겹칠 수 있으며, GridView 위젯을 사용하여 그리드 형태로 위젯들을 나열할 수 있습니다. 이러한 위젯들을 조합하면 다양한 레이아웃을 구성할 수 있습니다.

더 많은 위젯에 대한 정보는 플러터 공식 문서를 참고하세요.