BasePage를 이용하여 공통 페이지 구성 만들기

공통페이지를 만들어서 프로젝트 구성 시 조금더 간편하게 구현하는 방법에 대해 알아보았다. 

 

STEP 1: 

우선 base 라는 폴더를 만들어 준 뒤 그곳에 공통이 될 BasePage와 BaseController를 생성해 준다. 

 

 

 

STEP 2 : 

abstract class BasePage<T> extends StatelessWidget {
  // Controller
  late BasePageController ctrl;

  final _scaffoldKey = GlobalKey<ScaffoldState>();

  BasePage({Key? key, BasePageController? controller}) : super(key: key) {
    if (controller != null) {
      ctrl = controller;
    }
  }

  // 화면에서 사용
  AppBar? setAppBar();

  // 화면에서 사용
  Widget setBuild();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: setAppBar(),
      body: setBuild(),
      key: _scaffoldKey,
    );
  }
}

코드 재사용과 확장성, 일반화를 위해 추상 클래스로 BasePage를 구성한다. 

여기서 중요한 것은 override 된 곳의 Scaffold 구성이다. appBar에는 setAppBar() 를 사용한다 명시해두고 body에는 setBuild() 를 사용한다 표기 해 두었다. 이제 이 프로젝트들은 setAppBar() 를 통해 appBar를 구성하고 setBuild() 를 통해 body를 구성할 것이다.   

 

STEP 3 : 

메인페이지를 구성 해 보자. 하단에 NavigationBar를 두고, body 부분을 Navigation이 가르키는 Widget을 Obx를 이용하여 보여줄 것이다. 

그래서 MainPage.dart의 위젯을 이렇게 구성 하였다. 따라서 NavigationBar가 Tap 될 때 value 값에 따라 setCurrentWidget에 페이지를 이동 할 수 있게 구현 해 두었다. 여기서 사용 된 _globalCtrl 은 다음에 자세하게 다루어 보아야겠다.  

 onTap: (value) {
        _globalCtrl.selectedIndex.value = value;
        switch (value) {
          case 0:
            _globalCtrl.setCurrWidget(HomePage());
            break;
            .
            .
            .

 

 

STEP 4 : 

이제 MainPage 에서 HomePage를 클릭해서 이동 되었다면 HomePage의 구성이 어떻게 생겼는지 확인 할 차례이다. 

 

아까 BasePage에 구현 해 두었던 setAppBar() 와 setBuild()를 사용하여 화면을 간편하게 구성해 준다.