[Flutter][TIL]하단 탭 네비게이션 바 만드는 법

body 안에 TabBarView 넣는 걸로 시작

 

pyshics 는

physics: NeverScrollableScrollPhysics(),

로 해서 사용자가 옆으로 넘기는 제스처를 해도 넘어가지 않게 설정 가능하고 

children 안에 Container() 들 넣어줬다.

 

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late TabController controller;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'netflix',
      theme: ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.black,
          accentColor: Colors.white),
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              Container(),
              Container(),
              Container(),
              Container(),
            ],
          ),
          bottomNavigationBar: Bottom(),
        ),
      ),
    );
  }
}

하단 네비게이션바를 Bottom 이라는 위젯으로 따로 만들어줬는데

여기선 TabBar() 로 탭들을 만들어줌. 이 안에 tabs 를 여러개의 Tab() 들로 만들어주면 됨.

class Bottom extends StatelessWidget {
  const Bottom({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      child: Container(
        height: 50,
        child: TabBar(
          labelColor: Colors.white,
          unselectedLabelColor: Colors.white60,
          indicatorColor: Colors.transparent,
          tabs: <Widget>[
            Tab(
                icon: Icon(
                  Icons.home,
                  size: 18,
                ),
                child: Text(
                  '홈',
                  style: TextStyle(fontSize: 9),
                )),
            Tab(
                icon: Icon(
                  Icons.search,
                  size: 18,
                ),
                child: Text(
                  '검색',
                  style: TextStyle(fontSize: 9),
                )),
            Tab(
                icon: Icon(
                  Icons.save_alt,
                  size: 18,
                ),
                child: Text(
                  '저장한 콘텐츠 목록',
                  style: TextStyle(fontSize: 9),
                )),
            Tab(
                icon: Icon(
                  Icons.list,
                  size: 18,
                ),
                child: Text(
                  '더보기',
                  style: TextStyle(fontSize: 9),
                )),
          ],
        ),
      ),
    );
  }
}