Flutter 게시판 앱 만들기 — Scaffold, AppBar, BottomNavigationBar 완전 이해하기

앱을 만든다는 건 결국 화면을 구성하는 일이다.
Flutter에서는 이 화면을 구성할 때 가장 기본이 되는 구조가 있다. 바로 Scaffold다.

이번 글에서는 Flutter 게시판 앱의 첫 화면을 구성하면서 앱의 뼈대를 만들어볼 거다.
마치 텅 빈 공책 위에 선을 긋고, 테두리를 그리는 느낌처럼 말이다.

---

🧱 Scaffold란?

Flutter에서 화면의 기본 틀을 잡아주는 위젯이다.
AppBar, Body, Drawer, BottomNavigationBar 등 주요 구성 요소를 한 번에 담을 수 있다.

Scaffold(
  appBar: AppBar(
    title: Text('Flutter 게시판'),
  ),
  body: Center(
    child: Text('내용이 여기에 들어갑니다'),
  ),
  bottomNavigationBar: BottomNavigationBar(...),
)

---

🎨 기본 레이아웃 설계

이제 실제로 앱을 실행해보자. 아래와 같은 코드를 main.dart에 작성하면 홈 화면이 구성된다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 게시판',
      theme: ThemeData(primarySwatch: Colors.teal),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 게시판'),
      ),
      body: Center(
        child: Text(
          '현재 페이지: $_selectedIndex',
          style: TextStyle(fontSize: 18),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
          BottomNavigationBarItem(icon: Icon(Icons.create), label: '글쓰기'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '설정'),
        ],
      ),
    );
  }
}

이 코드를 실행하면 앱 상단에는 AppBar가, 하단에는 BottomNavigationBar가 나타나고,
가운데엔 현재 선택된 페이지 번호가 출력된다.

---

🛠 구성 요소 정리

• AppBar: 앱의 상단 제목바
• Body: 실질적인 화면 내용
• BottomNavigationBar: 하단 탭 메뉴

이 세 가지를 통해 앞으로의 게시판 UI를 계속해서 확장해 나갈 수 있다.

---

🌱 다음 단계

다음 글에서는 게시판의 핵심, 바로 게시글 리스트 화면을 만들 것이다.
ListView.builder를 활용해서 동적인 글 목록을 어떻게 그릴 수 있는지 살펴보자.

Flutter 게시판의 진짜 시작은 이제부터다.

---

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