Flutter 게시판 앱 만들기 — Navigator 완전 정복 🌈

사용자가 글을 클릭하면 어떤 화면이 떠야 할까?
당연히 글의 상세 내용이 보이는 화면으로 이동해야 한다.
Flutter에서는 이 동작을 Navigator로 처리한다.

이번 글에서는 Navigator의 사용법과 함께 실제 글 클릭 시 상세 페이지로 넘어가는 기능을 구현해 본다.

---

🧭 Navigator란?

Flutter에서 화면을 전환(페이지 이동)할 때 사용하는 내장 위젯이다.
기본적으로 스택(Stack) 구조를 사용하며, push/pop 방식으로 이동한다.

• Navigator.push(): 새 페이지를 추가
• Navigator.pop(): 현재 페이지를 제거하고 이전으로 돌아감

---

📄 상세 페이지 만들기

이전 글에서 만들었던 posts 리스트 중 하나를 눌렀을 때
글 상세 페이지로 이동하도록 만들어보자.

우선 PostDetailScreen을 새로 생성한다:

import 'package:flutter/material.dart';

class PostDetailScreen extends StatelessWidget {
  final String title;
  final String author;
  final String date;

  const PostDetailScreen({
    required this.title,
    required this.author,
    required this.date,
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('상세 보기')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
            SizedBox(height: 8),
            Text('작성자: $author'),
            Text('작성일: $date'),
            SizedBox(height: 16),
            Text('이곳에 게시글 내용을 출력할 수 있어요!'),
          ],
        ),
      ),
    );
  }
}

그다음, 기존 ListTile에 아래와 같이 Navigator.push 코드를 추가한다:

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => PostDetailScreen(
        title: post['title']!,
        author: post['author']!,
        date: post['date']!,
      ),
    ),
  );
},

이렇게 하면 글을 탭 했을 때 상세 화면으로 부드럽게 전환된다!

---

🔄 돌아가기

상세 페이지에서 AppBar의 뒤로 가기 버튼을 누르면
자동으로 이전 화면으로 돌아간다. 이것은 Navigator의 pop() 동작이다.

---

🌱 다음 단계

이제 글을 조회할 수 있게 되었으니, 다음 글에서는 직접 글을 작성하는 기능을 만들 것이다.

TextField, Form, 그리고 Validation까지. Flutter에서 입력 폼을 다루는 법을 배워보자.

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