[✈️] 항공권 가격 검색 앱 개발해보기 <2> 탭 컨트롤러

본격적으로 개발을 위해 UI 구조부터 생각해보자.

크게 이벤트페이지 탭, 항공권 검색 탭 2가지로 나눠서 보여주면 될 것 같다.

 

이번에는 일단 플러터 기본 구조를 익히고, 탭 구분까지 구현해 볼 예정이다.

 

코드 부분으로 들어가서 main.dart 파일을 보면 여러 클래스가 있는데, '위젯' 단위로 클래스를 정의한다고 한다.

 

다른 언어들과 마찬가지로 main() 함수가 시작점이 되고,

 

각 클래스에 대해 설명하면

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '항공권 가격 비교',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MainTabPage(),
    );
  }
}

 

MyApp 클래스(이름은 임의로 설정)는 앱의 최상위 설정을 담당한다.

 

내부의 build 함수는 위젯이 무엇을 그릴지 설명하는 함수이다.
플러터는 build 함수가 반환한 위젯을 읽어 실제 화면을 그린다.
모든 위젯은 build를 가지고, 재귀적으로 호출된다. (트리처럼)

 

그리고 반환하는 MaterialApp 클래스는 색상, 폰트, 스타일등을 세팅해주는 플러터 내부 클래스이다. (이것도 위젯)
앱 이름, 앱 전체 스타일, 시작 페이지를 정의한 모습이다.

 

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

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('항공권 가격 비교'),
          bottom: const TabBar(
            tabs: [ Tab(text: '이벤트'), Tab(text: '항공권 검색')],
          ),
        ),
        body: const TabBarView(
          physics: NeverScrollableScrollPhysics(),
          children: [ EventPage(), SearchPage() ],
        ),
      ),
    );
  }
}

이제 시작 페이지가 될 MainTabPage를 보자.
이번엔 DefaultTabController 위젯을 반환하는데, 이 위젯은 탭 상태를 관리하는 위젯으로 말그대로 탭의 컨트롤러 역할을 한다.

 

매개변수로는 length : 탭 개수, child : 이 컨트롤러를 적용할 위젯 트리 가 있고

 

child에는 Scaffold 클래스가 들어간다.
Scaffold는 화면의 뼈대를 잡는 역할을 하는 위젯이다.
실제로 내부를 보면
appBar(상단바)에 사용할 탭을 정의했고, body(바 아래)에 TabBarView 위젯을 넣었다.

 

TabBarView는 탭에 따라 바뀌는 본문 영역으로 사용할 페이지 위젯 2개를 넣었다. 
(NeverScrollableScrollPhysics는 기본적으로 스와이프로 탭을 바꿀 수 있는데, 내 앱의 경우 의도치 않게 탭이 변경될 수도 있을 것 같아 비활성화하였다)

 

이제부터 각 페이지들(EventPage, SearchPage)에 실제 내용을 구현하면 된다!

 

탭 구조만 적용하여 실행한 모습