[flutter] 플러터 스택드 위젯을 사용하여 그리드 뷰 구현하기

15 Dec 2023

flutter

플러터(Flutter)에서 스택드(Stacked) 위젯을 사용하여 그리드 뷰(Grid View)를 구현하는 방법에 대해 알아보겠습니다.

스택드(Stacked) 위젯이란?

스택드(Stacked) 위젯은 위젯을 쌓아 올리는 데 사용되며, 일반적으로 z축을 기준으로 위젯을 배치합니다. 이를 통해 더 복잡한 레이아웃을 구현할 수 있게 됩니다.

그리드 뷰(Grid View) 구현

그리드 뷰는 다수의 위젯을 격자 형태로 배열하여 효율적으로 화면을 구성하는 데 사용됩니다. 이를 통해 사용자에게 다양한 컨텐츠를 한눈에 보여줄 수 있습니다.

import 'package:flutter/material.dart';

class MyGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Grid View Example'),
      ),
      body: GridView.count(
        crossAxisCount: 2,
        children: List.generate(10, (index) {
          return Center(
            child: Text(
              'Item $index',
              style: Theme.of(context).textTheme.headline5,
            ),
          );
        }),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: MyGridView(),
  ));
}

위 코드에서 GridView.count를 사용하여 2열의 그리드를 생성하고, List.generate를 사용하여 그리드 아이템을 생성합니다. 이를 통해 간단하게 그리드 뷰를 만들 수 있습니다.

결론

플러터에서 스택드(Stacked) 위젯과 그리드 뷰(Grid View)를 활용하여 복잡한 레이아웃을 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시키고, 다양한 컨텐츠를 효과적으로 표현할 수 있습니다.