플러터 앱프로그래밍 Day7

플러터 앱프로그래밍 Day7

 

지난 시간에는 계산기를 만들어 봤었다.

이번에는 '탭(tab)' 에 대해 알아볼 것이다. 

우리가 보통 인스타그램이나, 카카오톡에서 아주 많이 사용하는 탭바를 알고 있다면

기능 이해에 대해서는 조금 쉽게 접근할 수 있다. 

 

 

 

각 화면을 탭으로 연결한 탭바를 이용하면 관련 있는 내용끼리 묶을 수 있다. 

메인화면에서 탭을 눌러 화면을 이동할 수 있기 때문에 좀 더 직관적인 앱을 만들 수 있다. 

 

 

 

여러 페이지 만들고 이동하기 

우선, 여러 화면을 만들고 각 화면을 탭바에 연결해 사용자가 탭을 눌렀을 때 화면으로 이동하는 앱을 구현해보겠다.

 

모바일 앱 개발에서는 이를 내비게이션(navigation)이라고 한다. 

내비게이션은 다음 포스팅 때 다뤄보고 오늘은 탭바를 이용해보겠다. 

 

class FirstApp extends StatelessWidget {
	@override
    Widget build(BuildContext context) {
    	return Scaffold(
        	body: Container(
            	child: Center(
                	child: Text("First Page"),
                ),
             ),
          );
       }
    }

 

sub 폴더에 secondPage.dart를 만들고 위의 코드와 똑같이 Text만 변경해 SecondApp 클래스를 작성한다.

 

탭바 위젯을 사용하려면 탭 컨트롤러가 필요하다.

main.dart에서 _MyHomePageState 클래스를 아래와 같이 수정한다. 

with 키워드를 추가하고 SingleTickerProviderStateMixin 클래스를 지정해야 vsync:this에 오류가 사라진다. 

 

class _MyHomePageState extends State<MyHomePage> 
	with SingleTickerProviderStateMixin {
	TabController? controller;
    
    @override
    void initState() {
    	super.initState();
        controller = TabController(length: 2, vsync: this);
        // length : 몇 개의 탭을 만들 지 정함 
        // vsync : 탭이 이동할 때 호출되는 콜백 함수를 어디서 처리할 지 결정
     }
  }

 

탭 컨트롤러는 애니메이션을 이용하기 때문에 dispose() 함수를 호출해줘야

메모리 누수를 막을 수 있다. 

_MyHomePageState() 클래스에 아래 재정의 코드를 추가해준다. 

 

'''

@override
void dispose() {
	controller!.dispose();
    super.dispose();
}

'''

 

이제 화면 구성을 해보겠다.

스캐폴드로 appBar와 body 그리고 bottomNavigation을 선언한다. 

body에는 TabBarView 위젯을, bottomNavigation에는 TabBar 위젯을 만든다. 

 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('TabBar Example'),
        ),
        body: TabBarView(
          children: <Widget>[FirstApp(), SecondApp()],
          controller: controller,
        ),
        bottomNavigationBar: TabBar(tabs: <Tab>[
          Tab(icon: Icon(Icons.looks_one, color: Colors.blue),) ,
          Tab(icon: Icon(Icons.looks_two, color: Colors.blue),)
        ], controller: controller,
        )
    );
  }