Flutter 리스트뷰(ListView), 그리드뷰(GridView) 파헤치기

728x90

Flutter는 화면에 데이터를 표시하기 위한 다양한 위젯을 제공하는데, 그중에서도 ListView와 GridView는 데이터를 목록과 그리드 형식으로 깔끔하게 표현할 수 있어 자주 사용됩니다. 이 글에서는 ListView와 GridView의 기본 사용법과 실습 예제를 통해 어떻게 활용할 수 있는지 알아보겠습니다.

1. 리스트뷰(ListView)란 무엇인가?

ListView는 Flutter에서 수직으로 스크롤되는 목록을 만들기 위한 위젯입니다. 특히, 많은 양의 데이터를 화면에 표시할 때 유용하며, 각 항목을 쉽게 스크롤할 수 있도록 도와줍니다. ListView는 데이터를 나열할 때 사용할 수 있는 가장 기본적이고 강력한 위젯 중 하나입니다.

ListView의 종류

ListView는 다양한 방식으로 데이터를 표시할 수 있습니다.

ListView(): 모든 항목을 미리 렌더링하는 간단한 리스트입니다. 작은 데이터 목록에 적합합니다.
ListView.builder(): 많은 데이터를 효율적으로 렌더링할 수 있으며, 필요할 때마다 항목을 생성합니다. 메모리 사용을 최소화하는 데 유용합니다.
ListView.separated(): 각 항목 사이에 구분자를 삽입할 수 있는 리스트뷰입니다.
ListView.custom(): 커스텀 렌더링 로직을 추가하고 싶은 경우 사용합니다.

2. 리스트뷰(ListView) 기본 사용법

ListView를 사용하여 간단한 목록을 만들려면 다음과 같은 코드를 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView Example'),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.map),
              title: Text('Map'),
            ),
            ListTile(
              leading: Icon(Icons.photo_album),
              title: Text('Album'),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
          ],
        ),
      ),
    );
  }
}

위의 예제는 간단한 ListView를 생성하여 세 개의 항목을 화면에 표시합니다. ListTile은 리스트의 각 항목을 구성하는 데 자주 사용되는 위젯으로, 제목과 아이콘을 포함할 수 있습니다.

3. ListView.builder() 사용하기

ListView.builder()는 많은 양의 데이터를 효율적으로 표시할 때 사용됩니다. 항목을 스크롤할 때마다 필요한 항목만 렌더링하므로 성능을 개선할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<String> items = List<String>.generate(1000, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView.builder Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder Example'),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

위의 코드에서는 ListView.builder()를 사용하여 1000개의 항목을 동적으로 생성하고 표시합니다. itemBuilder는 리스트의 각 항목을 스크롤할 때마다 호출되므로 많은 데이터를 다룰 때 성능적인 이점이 있습니다.

완성 결과는 다음과 같습니다.

4. 그리드뷰(GridView)란 무엇인가?

GridView는 항목을 그리드 형식으로 배치하여 수평 및 수직으로 스크롤 가능한 화면을 만들 수 있습니다. ListView와 마찬가지로 다양한 데이터를 시각적으로 효과적으로 배치할 때 유용합니다.

4.1 GridView의 종류

GridView(): 모든 항목을 미리 렌더링하는 기본 그리드뷰입니다.
GridView.builder(): 많은 양의 데이터를 처리할 때 효율적인 그리드 뷰입니다.
GridView.count(): 열의 개수를 고정하여 그리드를 만드는 방식입니다.
GridView.extent(): 각 항목의 최대 너비를 지정하여 그리드를 구성합니다.

5. GridView.count() 사용법

GridView.count()를 사용하면 각 행에 들어갈 항목의 개수를 지정하여 간단한 그리드 뷰를 만들 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GridView Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView Example'),
        ),
        body: GridView.count(
          crossAxisCount: 2, // 한 행에 두 개의 항목을 배치
          children: <Widget>[
            Container(
              color: Colors.red,
              child: Center(child: Text('Item 1')),
            ),
            Container(
              color: Colors.green,
              child: Center(child: Text('Item 2')),
            ),
            Container(
              color: Colors.blue,
              child: Center(child: Text('Item 3')),
            ),
            Container(
              color: Colors.yellow,
              child: Center(child: Text('Item 4')),
            ),
          ],
        ),
      ),
    );
  }
}

이 예제에서는 crossAxisCount를 사용하여 한 행에 두 개의 항목이 배치되도록 설정한 GridView를 생성합니다. 각 항목은 Container로 감싸서 색상과 텍스트를 포함하도록 했습니다.

6. GridView.builder() 사용법

많은 데이터를 효율적으로 처리하기 위해 GridView.builder()를 사용할 수 있습니다. ListView.builder()와 유사하게 항목을 스크롤할 때마다 필요한 항목만 렌더링합니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<String> items = List<String>.generate(1000, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GridView.builder Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView.builder Example'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 한 행에 세 개의 항목을 배치
          ),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Card(
              color: Colors.amber,
              child: Center(child: Text(items[index])),
            );
          },
        ),
      ),
    );
  }
}

이 코드는 GridView.builder()를 사용하여 1000개의 항목을 동적으로 생성하여 그리드 형식으로 배치합니다. SliverGridDelegateWithFixedCrossAxisCount는 그리드의 행당 항목 수를 정의하는 역할을 합니다.