4

Page별 Controller

• Page마다 Controller 를 두고 관리해주는 것이 좋다.
• 예를 들어
  • LoginPage 인 경우, LoginController 를 만들어서 사용한다.
  • SignupPage 인 경우, SignupController 를 만들어서 사용한다.
  • PostPage 인 경우, PostController 를 만들어서 사용한다.
  • PostDetailPage 인 경우, PostDetailController 를 만들어서 사용한다.

대체 Controller를 왜 만들어야 할까?

• 기존의 플러터 앱을 만들 때, Flutter 상단에 함수도 넣었고, 데이터를 긁어오는 함수를 넣어도 이상없이 잘 작동했다.
• 그러나 더럽다. 개발자들이 좋아하는 것 -> 관심사 분리
• Screen 은 따로 관리하고, model은 따로 관리하자.
• 화면을 동작하게 하는 애들을 전부 컨트롤러로 따로 관리해보자

무언가의 동작과 행동을 전부 컨트롤러화 한다.

• LoginPage인 경우, LoginController를 만들어서 사용한다.

class LoginController extends GetxController{
     String id;
     String pw;
     
     final idController = TextEditingController();
     final pwController = TextEditingController();
     
     login(){
       var res = await Api() login(idController.text, pwController.text)
       return res;
     
     }
}

 class LoginPage extends StatelessWidget {
 
 var controller = Get.put(LoginController());
    ...
    return Column(
    children: [
       TextField(),
       TextField(controller : controller.pwController),
       Text(
          onpressed: ,
          child: Text('로그인하기'),
      ]
    )
  }
}

• SignupPage인 경우, SignupController를 만들어서 사용한다.

class SignUpController extends GetxController{
     RxInt curpage = 0.obs;
     
     final idController = TextEditingController();
     final pwController = TextEditingController();
     final pw2Controller = TextEditingController();
     
     nextPage() => curpage(curpage.value+1;)
     prevPage() => curpage(curpage.value-1;)


     signup(){
       if(pwController.text == pw2Controller ll idController != ''){
          return null;
       }
       .. 회원가입 ..
     }
}

• PostPage인 경우, PostController를 만들어서 사용한다.

class PostController extends GetxController{
     RxList<Post> posts = [];
     
     @override
     onInit(){
        super.onInit();
        readPosts();
        // GetxController가 생성이 되면 onInit() 실행됨
        // onInit() 안의 함수 readPosts() 실행
        // readPosts()는 Post Api를 긁어와서 posts 리스트 변수에 넣어주게됨
     }
     
     readPosts() async{
      posts(await Api.readPosts());
     }
}

• PostdDetailPage인 경우, PostDetailController를 만들어서 사용한다.

class PostDetailController extends GetxController{
     RxList<Post> posts = [];
     
     @override
     onInit(){
        super.onInit();
        readPosts();
        // GetxController가 생성이 되면 onInit() 실행됨
        // onInit() 안의 함수 readPosts() 실행
        // readPosts()는 Post Api를 긁어와서 posts 리스트 변수에 넣어주게됨
     }
     
     readPosts() async{
      posts(await Api.readPosts());
     }
}