Flutter TabBar 기본 사항

많은 앱이 TabBar와 함께 제공됩니다. 앱을 빠르게 탐색하기 위해 표시되는 아이콘 막대입니다.

이러한 TabBar의 몇 가지 예는 Twitter 또는 Instagram 앱에서 찾을 수 있습니다.



그리고 네, 오늘 Flutter에서 이것을 만드는 방법을 배울 것입니다.

Flutter에서 TabBar 만들기

우리의 basic Flutter application부터 시작하여 오늘부터 시작하겠습니다. lib/main.dart 파일에서 모든 코드를 수행할 것입니다.

이제 TabBar를 포함하도록 기본 기능을 수정하겠습니다.

void main() async {
  runApp(
    MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Tabs Demo'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    ),
  );
}

이것은 Flutter의 TabBar에 대한 가장 기본적인 설정입니다. 보시다시피 AppBar를 활용하고 하단 부분을 제공합니다.
이 하단 부분에는 몇 가지 아이콘이 있는 TabBar가 포함되어 있습니다.

그런 다음 응용 프로그램의 실제 본문에서 동일한 수의 자식이 있는 TabBarView를 추가해야 합니다.

이를 통해 아이콘을 클릭하거나 스 와이프하여 스크롤할 수도 있습니다!



전체 코드 예제를 찾으려면 GitHub에서 다운로드하십시오.

기본 Flutter TabBar가 상단에 위치한다는 것을 눈치채셨을 것입니다. 이후 글에서는 하단에 설정하는 방법에 대해 알아보도록 하겠습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나