Flutter의 반응형 리스트뷰 구현 방법

Flutter에서 리스트뷰(ListView)는 스크롤 가능한 목록을 쉽게 구현할 수 있도록 돕는 중요한 위젯입니다. 하지만 다양한 화면 크기와 장치 유형에 대응하기 위해서는 반응형 디자인이 필수적입니다. 이 글에서는 반응형 리스트뷰를 구현하는 방법을 살펴보고, 효과적인 코드 예제와 함께 설명하겠습니다.

---

1. 반응형 리스트뷰란?

반응형 리스트뷰란 화면 크기에 따라 자동으로 레이아웃을 조정하여 다양한 장치에서 최적의 사용자 경험을 제공하는 리스트뷰를 의미합니다. 일반적인 ListView는 기본적으로 스크롤이 가능한 리스트를 제공하지만, 반응형 디자인을 적용하지 않으면 태블릿이나 웹 화면에서 가독성이 떨어질 수 있습니다.

---

2. 반응형 리스트뷰 구현 방법

(1) 기본 ListView 사용

Flutter에서 가장 기본적인 리스트뷰는 ListView.builder를 사용하여 생성할 수 있습니다. 하지만 기본적인 ListView는 화면 크기에 따라 유동적으로 변하지 않습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('기본 ListView')),
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) {
            return ListTile(
              leading: Icon(Icons.person),
              title: Text('사용자 ${index + 1}'),
            );
          },
        ),
      ),
    );
  }
}

위의 코드는 단순한 리스트뷰를 생성하지만, 화면 크기에 따라 적절한 배치가 이루어지지 않을 수 있습니다.

---

(2) 반응형 리스트뷰 적용

반응형 리스트뷰를 만들기 위해 LayoutBuilder 또는 MediaQuery를 활용할 수 있습니다. 예제에서는 화면 너비에 따라 컬럼 또는 그리드 형태로 변환하는 방식을 사용하겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ResponsiveListView(),
    );
  }
}

class ResponsiveListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('반응형 ListView')),
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 600) {
            // 태블릿 이상의 크기에서는 GridView 사용
            return GridView.count(
              crossAxisCount: 2,
              children: List.generate(20, (index) {
                return Card(
                  child: ListTile(
                    leading: Icon(Icons.person),
                    title: Text('사용자 ${index + 1}'),
                  ),
                );
              }),
            );
          } else {
            // 모바일에서는 기본 ListView 사용
            return ListView.builder(
              itemCount: 20,
              itemBuilder: (context, index) {
                return ListTile(
                  leading: Icon(Icons.person),
                  title: Text('사용자 ${index + 1}'),
                );
              },
            );
          }
        },
      ),
    );
  }
}

위 코드에서는 LayoutBuilder를 사용하여 화면의 최대 너비(maxWidth)를 확인하고, 태블릿 이상 크기일 때는 GridView를 사용하여 두 개의 열을 만들도록 설정했습니다.

---

(3) Flexible과 Expanded 활용

Flexible과 Expanded 위젯을 활용하면 리스트뷰가 화면 크기에 맞게 조정되도록 만들 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flexible ListView')),
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: 20,
                itemBuilder: (context, index) {
                  return ListTile(
                    leading: Icon(Icons.person),
                    title: Text('사용자 ${index + 1}'),
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

이 방식은 리스트뷰가 다른 UI 요소와 함께 조화롭게 레이아웃을 차지하도록 도와줍니다.

---

결론

Flutter에서 반응형 리스트뷰를 구현하는 방법에는 여러 가지가 있습니다. LayoutBuilder와 MediaQuery를 활용하면 화면 크기에 따라 동적으로 레이아웃을 변경할 수 있으며, GridView를 함께 사용하여 더 나은 사용자 경험을 제공할 수 있습니다. 또한, Flexible과 Expanded를 적절히 활용하면 리스트뷰가 다른 UI 요소와 조화롭게 배치될 수 있습니다.

이제 반응형 리스트뷰를 적용하여 다양한 화면 크기에서도 최적화된 UI를 제공해 보세요!