[Flutter] 넷플릭스 클론 코딩 #2 | 하단 네비게이션 바 생성

하단 네비게이션 바를 생성하는 방법에 대해 정리!

 

하단 네비게이션 바라고 하면 

여기 사진에서 아래 홈 / 검색 / 저장 / 더보기 에 해당하는 네비게이션을 의미한다!

 

bottom_bar.dart

하단 네비게이션 바를 구현하는 소스

TabBar 사용.

각 탭은 아이콘 + 텍스트로 구성.

class Bottom extends StatelessWidget {
  const Bottom({super.key});

  @override
  Widget build(BuildContext context) {
    // for flexible size based on device display
    final Size screenSize = MediaQuery.of(context).size;
    final double screenHeight = screenSize.height;

    return Container(
        color: Colors.black,
        height: screenHeight * 0.1,
        child: const SizedBox(
            child: TabBar(
                labelColor: Colors.white,
                unselectedLabelColor: Colors.white60,
                indicatorColor: Colors.transparent,
                tabs: <Widget>[
                    Tab(
                      icon: Icon(
                        Icons.home,
                        size: 18,
                      ),
                      child: Text(
                        'HOME',
                        style: TextStyle(fontSize: 9),
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        Icons.search,
                        size: 18,
                      ),
                      child: Text(
                        'SEARCH',
                        style: TextStyle(fontSize: 9),
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        Icons.save_alt,
                        size: 18,
                      ),
                      child: Text(
                        'SAVED LIST',
                        style: TextStyle(fontSize: 9),
                      ),
                    ),
                    Tab(
                      icon: Icon(
                        Icons.list,
                        size: 18,
                      ),
                      child: Text(
                        'MORE',
                       style: TextStyle(fontSize: 9),
                      ),
                    ),
                ],
        )));
  }
}

 

main.dart

main 이 실행되면 아래 소스가 실행되도록 UI를 설정해준다.

각각 탭에 해당하는 위 화면을 구현해주는 부분.

테스트를 위해 각 탭이 실행되면 텍스트만 출력해주도록 구현해주었다.

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
        title: 'YoungFlix',
        theme: ThemeData(
            brightness: Brightness.dark,
            primaryColor: Colors.black,
            secondaryHeaderColor: Colors.white),
            home: DefaultTabController(
              length: 4,
              child: Scaffold(
                body: TabBarView(
                  physics:
                      const NeverScrollableScrollPhysics(), // block to swipe by user's touch motion.
                      children: <Widget>[
                        // put screent for displaying to children.
                        Container(
                          child: const Center(
                            child: Text('home'),
                          ),
                        ),
                        Container(
                          child: const Center(
                            child: Text('search'),
                          ),
                        ),
                        Container(
                          child: const Center(
                            child: Text('save'),
                          ),
                        ),
                        Container(
                          child: const Center(
                            child: Text('more'),
                          ),
                        ),
                      ],
                ),
              bottomNavigationBar: const Bottom(), // 위에서 구현한 Bottom을 불러와서 하단 네비게이션바로 등록을 해준다.
           ),
        )
    );
}

 

gitHub : https://github.com/leehy0321/NetflixClone/commit/03fd3ff2350cbf7517fc0128e889f5b079d393b8