2025년 11월 7일 금요일 (110일차)

Jeonghoon·2025년 11월 7일

jeonghoon's Study

목록 보기

113/128

🐦 Flutter 위젯 & 라우팅 정리

📱 [ Flutter 기본 개념 ]

Flutter는 모든 UI를 위젯(Widget) 으로 구성하며,
각 위젯은 상태 관리 방식에 따라 StatelessWidget / StatefulWidget 으로 구분된다.

🔁 [ StatefulWidget ]

상태(State) 가 존재하는 위젯으로, 값이 변하면 화면이 리렌더링된다.
setState() 메서드를 사용해 상태를 변경한다.

🧩 하단 네비게이션바 (BottomNavigationBar)

여러 탭을 전환할 수 있는 하단 메뉴바 구성

📘 예시 코드

import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text("홈 화면")),
    Center(child: Text("검색 화면")),
    Center(child: Text("설정 화면")),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '검색'),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: '설정'),
        ],
      ),
    );
  }
}

💡 Tip:
BottomNavigationBar를 사용할 때는 반드시 List + Index 조합으로 페이지를 관리하는 것이 효율적이다.

⚙️ [ StatelessWidget ]

상태가 없는 위젯 (한 번 렌더링되면 변경되지 않음)
화면이 단순하고 변경될 데이터가 없는 경우에 사용

📘 예시 코드

class MyTitle extends StatelessWidget {
  final String title;
  const MyTitle({required this.title});

  @override
  Widget build(BuildContext context) {
    return Text(title, style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold));
  }
}

🧠 비교 요약
| 구분 | StatefulWidget | StatelessWidget |
| :-- | :-- | :-- |
| 상태 관리 | ✅ 가능 | ❌ 불가능 |
| 재렌더링 | 가능 (setState()) | 불가능 |
| 사용 예시 | 탭, 버튼, 입력 필드 등 | 로고, 텍스트, 아이콘 등 |

🧭 [ routes (라우트 설정) ]

페이지 이동을 담당하는 Navigator 시스템
각 페이지(화면)는 라우트(Route)로 관리된다.

🧱 주요 설정

속성	설명
`initialRoute`	앱 시작 시 표시할 최초 경로 지정
`routes`	경로와 해당 위젯을 연결하는 Map 구조

📘 예시 코드

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomePage(),
      '/about': (context) => AboutPage(),
    },
  ));
}

🚀 [ Navigator ]

Flutter의 페이지 이동을 위한 내비게이션 도구

함수	설명
`Navigator.pushNamed(context, '/about')`	지정한 경로로 페이지 이동
`Navigator.pop(context)`	가장 최근에 열었던 페이지로 돌아감

📘 예시 코드

ElevatedButton(
  onPressed: () {
    Navigator.pushNamed(context, '/about');
  },
  child: Text('About 페이지로 이동'),
);

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: Text('뒤로가기'),
);