★★★★★
#UI·디자인 · claude-code
Bottom Navigation 셋업 — 3~5 탭 기본 구조
하단 탭 바(Bottom Navigation) 추가. 3~5개 탭으로 화면 전환.
#bottom-navigation#tab-bar#scaffold
변수 2개 — 여기 채우면 아래 프롬프트에 바로 들어가요
하단 탭 바(Bottom Navigation) 추가. 3~5개 탭으로 화면 전환.
요구사항:
- 탭 개수: {{TAB_COUNT}}
- 탭 이름: {{TAB_NAMES}} (줄바꿈 구분)
- 아이콘: Material Icons
기본 구조:
```dart
class MainScreen extends StatefulWidget {
@override
State<MainScreen> createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
int _selectedIndex = 0;
final List<Widget> _screens = [
HomeScreen(),
SearchScreen(),
SettingsScreen(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
body: _screens[_selectedIndex],
bottomNavigationBar: BottomNavigationBar(
currentIndex: _selectedIndex,
onTap: (index) => setState(() => _selectedIndex = index),
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
],
),
);
}
}
```
작업:
1. 탭 개수 맞춰서 `_screens` 리스트 생성
2. 각 스크린 파일 생성 (screens/home_screen.dart 등)
3. BottomNavigationBar items 구성
4. 아이콘 선택 (https://fonts.google.com/icons)
5. 색상 커스터마이징
{{TAB_COUNT}}개 탭으로 skeleton 코드 만들어줄까?
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.