Flutter 게시판 앱 만들기 — 반복되는 위젯을 더 똑똑하게 그리는 법

게시판이라면 가장 먼저 떠오르는 건 바로 "글 목록"이다.
많은 글을 한 번에 보여주려면 일일이 위젯을 나열하는 건 비효율적이다.
Flutter에서는 이럴 때 ListView.builder를 사용하면 깔끔하게 해결할 수 있다.

이번 글에서는 게시글 리스트 화면을 Flutter의 ListView로 구성해 보자.
반복되는 UI를 자동으로 만들어주는 아주 유용한 위젯이다.

---

📜 ListView란?

Flutter에서 스크롤 가능한 목록을 만들 때 사용하는 위젯이다.
특히 ListView.builder는 반복되는 항목을 효율적으로 그릴 수 있다.

예시 코드를 보자:

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

이 코드는 items 배열의 길이만큼 ListTile을 자동으로 생성해 준다.

---

🧪 예제: 게시글 목록 만들기

다음은 실제 게시글 데이터를 만들어 ListView에 출력하는 코드이다.

final List<Map<String, String>> posts = [
  {'title': '첫 번째 글', 'author': '작성자1', 'date': '2025.05.20'},
  {'title': 'Flutter 게시판 만들기 시작!', 'author': '작성자2', 'date': '2025.05.21'},
  {'title': '상태관리 어떻게 하지?', 'author': '작성자3', 'date': '2025.05.22'},
];

ListView.builder(
  itemCount: posts.length,
  itemBuilder: (context, index) {
    final post = posts[index];
    return Card(
      margin: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: ListTile(
        title: Text(post['title']!),
        subtitle: Text('${post['author']} ・ ${post['date']}'),
        onTap: () {
          // 상세 보기 이동 (다음 글에서 구현)
        },
      ),
    );
  },
)

이 코드를 실행하면 리스트 형태로 게시글들이 출력되고,
각 항목은 Card로 감싸져 있어 디자인적으로도 깔끔해진다.

---

🛠 ListView.builder 구조 정리

• itemCount: 총 아이템 개수
• itemBuilder: 각 항목을 어떻게 그릴지 정의
• index: 현재 항목의 인덱스

이 구조 덕분에 데이터만 있다면 UI는 자동으로 생성된다.
이게 바로 ListView.builder의 가장 강력한 점이다.

---

🌱 다음 단계

다음 글에서는 게시글을 눌렀을 때 상세 페이지로 이동하고 내용을 볼 수 있는 기능을 구현할 것이다.

이제 게시판 앱이 점점 '앱다워'지고 있다.

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