Flutter ListView로 다이나믹 UI 만들기 — 반복되는 위젯을 더 똑똑하게 그리는 법

Flutter를 배우면서 가장 매력적이었던 건 간결함이었다.
그중에서도 ListView는 나처럼 백엔드에서 온 사람에게도 너무나 직관적으로 다가왔다.

---

🌿 ListView란?

ListView는 스크롤 가능한 리스트를 구성할 수 있게 도와주는 Flutter의 대표적인 위젯이다.
정적인 리스트부터 동적인 리스트까지 다양한 방법으로 사용할 수 있다.

🧩 ListView의 종류

• ListView(): 기본 리스트, 모든 children을 직접 나열함
• ListView.builder(): 빌더 패턴으로 동적으로 리스트 생성
• ListView.separated(): 각 아이템 사이에 separator(구분선) 추가 가능

🛠 기본 예제: ListView.builder

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index]),
    );
  },
)

이 방식은 특히 API로 받아온 데이터나 사용자가 입력한 내용 등을 리스트로 출력할 때 유용하다.

💡 예제 1: 간단한 문자열 리스트

final List<String> fruits = ['🍎 Apple', '🍌 Banana', '🍇 Grape'];

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Fruit List')),
    body: ListView.builder(
      itemCount: fruits.length,
      itemBuilder: (context, index) {
        return Card(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(fruits[index], style: TextStyle(fontSize: 18)),
          ),
        );
      },
    ),
  );
}

📌 예제 2: 모델 클래스 기반의 다이나믹 UI

class User {
  final String name;
  final int age;
  User(this.name, this.age);
}

final List<User> users = [
  User('민지', 24),
  User('지훈', 28),
  User('수아', 31),
];

...

ListView.builder(
  itemCount: users.length,
  itemBuilder: (context, index) {
    final user = users[index];
    return ListTile(
      leading: Icon(Icons.person),
      title: Text(user.name),
      subtitle: Text('나이: ${user.age}세'),
    );
  },
)

✨ 꿀팁: 스크롤 방향 바꾸기

ListView.builder(
  scrollDirection: Axis.horizontal,
  ...
)

위와 같이 scrollDirection을 설정하면 가로 스크롤도 가능하다.

📦 ListView에서 자주 쓰이는 위젯

• ListTile – 기본 리스트 구성에 최적
• Card – 리스트 항목을 카드 형태로 감싸서 예쁘게
• Divider – 항목 사이를 구분할 때
• Expanded, SizedBox – 사이즈 조절할 때 자주 사용

🧠 마치며

Flutter의 ListView는 반복되는 UI를 만들 때 가장 강력한 도구 중 하나이다.
초기엔 조금 헷갈릴 수 있지만, builder 패턴을 이해하면 정말 강력한 무기를 손에 쥐게 된 기분이다.
다음에는 이 ListView에 애니메이션 효과를 더하거나, 사용자 입력으로 동적으로 데이터를 추가하는 방법도 다뤄보고 싶다.

✍️ 이 글은 터미널 밖으로 나온 개발자의 Flutter 여정입니다.