카테고리 탭 만들기 — 정치, 경제, 스포츠를 손쉽게 구분하기

뉴스를 더 보기 좋게 나누는 방법은 다양하지만, 가장 흔하고 효과적인 방식은 카테고리 탭이다.
정치, 경제, 스포츠, 기술 등 관심 있는 분야만 쏙쏙 골라보는 경험은 사용자에게 편안함을 준다.

이번 글에서는 Flutter에서 TabBar와 TabBarView를 활용해 뉴스 앱에 탭 형태의 카테고리 UI를 구현해보자.

---

📐 기본 구조 — DefaultTabController

가장 간단한 방식은 DefaultTabController를 사용하는 것이다. 탭 개수만 정해주면 된다.

DefaultTabController(
  length: 3, // 탭 수
  child: Scaffold(
    appBar: AppBar(
      title: Text("뉴스 카테고리"),
      bottom: TabBar(
        tabs: [
          Tab(text: "정치"),
          Tab(text: "경제"),
          Tab(text: "스포츠"),
        ],
      ),
    ),
    body: TabBarView(
      children: [
        CategoryNewsView(category: 'politics'),
        CategoryNewsView(category: 'economy'),
        CategoryNewsView(category: 'sports'),
      ],
    ),
  ),
)

TabBar는 상단 UI, TabBarView는 실제 콘텐츠를 보여주는 부분이다.
같은 인덱스로 매칭되기 때문에 순서가 중요하다.

---

🧱 카테고리별 뉴스 불러오기 구조

각 탭은 해당 카테고리에 맞는 뉴스를 불러와야 한다. 이를 위해 CategoryNewsView라는 재사용 가능한 위젯을 만들자.

class CategoryNewsView extends StatelessWidget {
  final String category;
  const CategoryNewsView({super.key, required this.category});

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<News>>(
      future: fetchNewsByCategory(category),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }
        if (snapshot.hasError) {
          return Center(child: Text("에러 발생"));
        }
        final newsList = snapshot.data!;
        return ListView.builder(
          itemCount: newsList.length,
          itemBuilder: (context, index) {
            return NewsCard(news: newsList[index]);
          },
        );
      },
    );
  }
}

이 구조를 통해 코드 중복 없이 카테고리 탭별 뉴스 뷰를 깔끔하게 분리할 수 있다.

---

🎨 디자인 팁: 탭 스타일 다듬기

bottom: TabBar(
  labelColor: Colors.black,
  unselectedLabelColor: Colors.grey,
  indicatorColor: Colors.blueAccent,
  indicatorWeight: 3,
  tabs: [...],
),

탭의 선택/비선택 상태 컬러, 인디케이터 스타일을 조절하면 브랜드 느낌에 더 잘 맞게 구성할 수 있다.

---

💡 상태 관리가 필요하다면?

• 카테고리 선택 → 상태로 저장 (ex. Riverpod, Provider)
• 앱 내 전역 카테고리 유지 시에도 연동 가능
• 탭 이동 시마다 API 요청 or 캐싱 처리 선택 가능

작은 프로젝트는 FutureBuilder로, 큰 프로젝트는 상태 관리 라이브러리와 함께 사용하자.

---

🧘 마무리하며

정치든 경제든, 사용자는 자신이 원하는 콘텐츠에 빠르게 접근하고 싶다.
Flutter에서의 탭 UI는 그 흐름을 자연스럽게 만들어준다.

한 줄 한 줄의 뉴스보다, 하나의 탭이 더 많은 차이를 만든다.

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