Flutter Day 5-2: 기본 위젯 ListView, GridView, PageView

Flutter

Flutter Day 5-2: 기본 위젯 ListView, GridView, PageView

@leem 2025. 1. 8. 17:18

1. ListView

ListView는 스크롤 가능한 리스트를 구현할 때 사용하는 Flutter의 기본 위젯입니다. 단순한 목록에서부터 동적인 데이터를 처리하는 복잡한 리스트까지, 다양한 방식으로 사용할 수 있습니다.

ListView 사용 방식

기본 ListView
- 적은 양의 데이터에 적합.
- children 속성에 리스트 항목을 직접 추가.
ListView.builder
- 많은 데이터를 처리할 때 효율적.
- itemCount와 itemBuilder를 사용해 동적으로 항목을 생성.
ListView.separated
- ListView.builder의 확장형으로, 항목 사이에 구분선을 추가.

주요 속성

reverse: true로 설정하면 리스트를 아래에서 위로 스크롤.
padding: 리스트의 내부 여백 설정 (EdgeInsets로 지정).
itemCount: 항목 개수 설정 (동적 리스트에서 사용).
itemBuilder: 리스트 항목을 정의하는 함수.
physics: 스크롤 동작 설정 (BouncingScrollPhysics 등 사용 가능).

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: ListView(
          children: [
            ListTile(
              leading: CircleAvatar(
                backgroundColor: Colors.amber,
                child: Text('1'),
              ),
              title: Text('Item 1'),
              subtitle: Text('Description for Item 1'),
              trailing: IconButton(
                onPressed: () {
                  print('Clicked Item 1');
                },
                icon: Icon(Icons.more_horiz),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

ListView.builder

ListView.builder(
  itemCount: 10, // 총 10개의 항목
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        backgroundColor: Colors.amber,
        child: Text('${index + 1}'),
      ),
      title: Text('Item ${index + 1}'),
      subtitle: Text('Description for Item ${index + 1}'),
    );
  },
);

2. GridView

GridView는 리스트 항목을 그리드 형태(행과 열)로 배치하는 스크롤 가능한 위젯입니다. 갤러리, 카드 레이아웃 등에서 유용하게 사용됩니다.

GridView 사용 방식

GridView.builder
- 항목을 동적으로 생성.
- itemCount와 itemBuilder로 항목 정의.
GridView.count
- 열 개수를 고정하여 간단히 사용.

주요 속성

gridDelegate: 그리드 레이아웃 설정.
- SliverGridDelegateWithFixedCrossAxisCount: 열 개수 고정.
- SliverGridDelegateWithMaxCrossAxisExtent: 항목 크기를 기준으로 열 개수 자동 설정.
scrollDirection: 기본은 세로 스크롤, 가로 스크롤도 가능.

GridView.builder

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 한 줄에 3개의 항목
    crossAxisSpacing: 8.0, // 열 간격
    mainAxisSpacing: 8.0, // 행 간격
  ),
  itemCount: 20, // 항목 개수
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue,
      child: Center(child: Text('Item $index')),
    );
  },
);

GridView.count

GridView.count(
  crossAxisCount: 4, // 한 줄에 4개의 항목
  children: List.generate(16, (index) {
    return Container(
      color: Colors.green,
      child: Center(child: Text('Item $index')),
    );
  }),
);

3. PageView

PageView는 스와이프 동작을 통해 페이지 전환을 구현할 수 있는 위젯입니다. 슬라이드형 화면이나 튜토리얼 화면 제작에 유용합니다.

PageView 주요 속성

controller: 페이지 컨트롤러를 설정.
initialPage: 첫 번째로 표시할 페이지 설정.
viewportFraction: 현재 페이지가 화면에 차지하는 비율 설정.

PageView

PageView(
  controller: PageController(
    initialPage: 0, // 첫 페이지
    viewportFraction: 0.9, // 화면의 90%를 현재 페이지가 차지
  ),
  children: [
    Container(color: Colors.red),
    Container(color: Colors.blue),
    Container(color: Colors.green),
  ],
);

PageView.builder

페이지를 동적으로 생성하려면 PageView.builder를 사용합니다.

PageView.builder(
  controller: PageController(initialPage: 1),
  itemCount: 5,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.primaries[index % Colors.primaries.length],
      child: Center(
        child: Text(
          'Page $index',
          style: TextStyle(fontSize: 24, color: Colors.white),
        ),
      ),
    );
  },
);

4. 비교

속성	ListView	GridView	PageView
스크롤 방향	세로(기본), 가로 가능	세로(기본), 가로 가능	좌우(기본), 세로 가능
항목 배치 방식	단일 열	여러 행과 열	하나의 페이지
사용 사례	텍스트, 이미지 리스트	갤러리, 카드 레이아웃	슬라이드형 페이지 UI
생성자	기본, builder, separated	기본, builder, count	기본, builder

Flutter에서 스크롤 가능한 UI를 구성할 때, ListView, GridView, 그리고 PageView는 필수적인 위젯들입니다. 각 위젯의 특징을 이해하고 상황에 맞게 활용하면 더 효율적인 개발이 가능합니다.