[j Flutter] Top Navigationbar (내비게이션바 상단) 구현하기

3개의 메뉴가 상단에 보이게 구현해보자.

 

MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(text: 'Naver'),
                Tab(
                  text: 'Daum',
                ),
                Tab(text: 'Google'),
              ],
            ),
            title: Text('WebView Test'),
          ),
          body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            children: [
              WebPage('https://www.naver.com'),
              WebPage('https://www.daum.net'),
              WebPage('https://www.google.com'),
            ],
          ),
        ),
      ),
    )

AppBar() 속성 안에 TabBar부분을 넣어주면 상단 내비게이션 바가 구현이 된다.

 

TabBar에서 tabs부분에 메뉴 글씨나 아이콘을 넣어줄 수 있다.

 

TabBarView속성은 length의 길이에 맞게 페이지를 넣어주면 된다.