flutter에서 bottom Navigation 구현하기

시작하기

어플리케이션을 사용해보면 하단에 스크린을 손쉽게 이동할 수 있도록 도와주는 네비게이션이 있습니다. 플러터에서도 이 네비가 탑재가 되어있습니다.

bottom nav

구현하기

기본 MyApp에서 MyBottomNavigationBar 클래스를 MaterialApp 내부 home에 실행시켜주도록 합니다.

main.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '타이틀',
debugShowCheckedModeBanner: false,
home: MyBottomNavigationBar()
);
}
}
1
2
3
4
5
final List<Widget> _children = <Widget>[
FavoriteScreen(),
SearchScreen(),
SettingScreen(),
];

배열 children은 각자 스크린을 가져옵니다. children[0]는 FavoriteScreen, children[1]는 SearchScreen, children[2]는 SettingScreen를 나타냅니다.

1
2
3
4
5
int _selectedIndex = 0;

<!-- ... -->
currentIndex: _selectedIndex,
<!-- ... -->

현재 선택된 인텍스입니다. 처음 시작하는 인덱스가 0인데 1로 변경을 한다면 1에 해당하는 페이지가 먼저실행됩니다.

BottomNavigation은 BottomNavigationBar 내부에 BottomNavigationBarItem들이 배열로 들어가 있는 형태입니다. 요약하자면 다음과 같은 형태입니다.

1
2
3
4
5
6
7
8
Scaffold(
body: _children.elementAt(_selectedIndex),
bottomNavigationBar: BottomNavigationBar(
BottomNavigationBarItem(...),
BottomNavigationBarItem(...),
BottomNavigationBarItem(...),
)
)

최종 완성된 코드입니다.

main.dart
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '타이틀',
debugShowCheckedModeBanner: false,
home: MyBottomNavigationBar()
);
}
}

class MyBottomNavigationBar extends StatefulWidget {
MyBottomNavigationBar({Key key}) : super(key: key);

@override
_MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
int _selectedIndex = 0;
final List<Widget> _children = <Widget>[
FavoriteScreen(),
SearchScreen(),
SettingScreen(),
];

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

@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(child: _children.elementAt(_selectedIndex)),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.favorite, size: 40, color: Colors.black),
activeIcon: Icon(Icons.favorite, size: 40, color: Colors.orange),
label: 'Favorite',
),
BottomNavigationBarItem(
icon: Icon(Icons.search, size: 40, color: Colors.black),
activeIcon: Icon(Icons.search, size: 40, color: Colors.orange),
label: 'search',
),
BottomNavigationBarItem(
icon: Icon(Icons.setting, size: 40, color: Colors.black),
activeIcon: Icon(Icons.setting, size: 40, color: Colors.orange),
label: 'setting',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.orange,
showSelectedLabels: false,
showUnselectedLabels: false,
onTap: _onItemTapped,
),
);
}
}
Share