[Flutter] TabBarView

대게 튜토리얼의 온보딩 화면에서 나오는 어플 소개 예시 페이지를 만들고자 할 때 TabBarView를 사용하면 좋을 것 같다.

1. TabBarView의 children 리스트에 보여주고 싶은 페이지를 담기
2. TabBarView를 DefaultTabController로 감싸고 페이지 수 length를 입력
3. 맨 밑 bottomNavigationBar에 Row로 TabPageSelector를 사용하여 현재 페이지 위치를 표시
   
   
   

1. 이런식으로 보여주고 싶은 페이지를 담는다.

TabBarView(
	children: [
		Padding(
			padding: EdgeInsets.symmetric(
				horizontal: Sizes.size24,
			),
			child: Column(...),
		Padding(
			padding: EdgeInsets.symmetric(
				horizontal: Sizes.size24,
			),
			child: Column(...),
		Padding(
			padding: EdgeInsets.symmetric(
				horizontal: Sizes.size24,
			),
			child: Column(...),
	]

2. 이것을 DefaultTabController로 감싸고 페이지 수를 length에 입력한다. 실제?로는 아래와 같이 Scafflod로 감싼 것을 감싼다!

DefaultTabController(
      length: 3,
      child: Scaffold(
        body: const SafeArea(
          child: TabBarView(
            children: [...]

3. 현재 어느 페이지에 있는지 가로로 동그라미 표시로 표현하기 위해 TabPageSelector를 Row로 묶어야 한다.

bottomNavigationBar: Container(
	padding: const EdgeInsets.symmetric(
		vertical: Sizes.size48,
	),
	child: Row(
  		mainAxisAlignment: MainAxisAlignment.center,
		children: [
			TabPageSelector(
				color: Theme.of(context).canvasColor,
                selectedColor: Theme.of(context).cardColor,
			),
		],
	),
),