말랑한 하루
[Flutter] (Project) MapleApp: 26. 예외 처리 작업-5 본문
반응형
🥕 notifier 안에 stateProvider로 사용자 흐름 제어하기
입력 받은 텍스트에 대해 유효성 검사를 진행 한 후에, 모든 결과를 만족하면 다음 페이지로 넘어가도록 설정해주는 작업을 해야 했다. 그러기 위해서 현재 http request를 진행 중인지, Response는 무엇인지, Error는 없는지 확인해야 했다. 그래서 http 통신을 위한 fetch 기반 AsyncNotifier에서, 현재 페이지의 여러 상태들을 관리하기 위한 Notifier를 Controller 형식으로 설계하여 UI와 로직을 분리하기 위한 노력을 했다.
현재 진행 중인지를 나타내는 isLoading, 에러가 있는지 확인하는 hasError, 에러가 존재하는 경우 사용자를 위한 문구를 제공하는 errorMessage 등의 변수를 StateProvider로 Notifier안에 선언하고, Notifier를 사용하려는 페이지에서 controller로 불러와 사용하였다. 간단한 구조는 다음과 같다.
class MainPage {
...
Widget build() {
final mainController = ref.watch(mainControllerProvider.notifier)
...
}
}
class MainController extends Notifier {
final isLoading = StateProvider((_) => false);
}
controller의 내부 변수들에 접근하기 위해 notifier까지 불러와야 하고, 내부에서 정적인 값을 사용할 때는 그냥 사용하면 되지만, 동적인 값으로 StateProvider를 주었다면 다음과 같이 활용해야 한다.
ref.watch(mainController.isLoading)
화면과 ui로직을 분리하는 것은 코드 품질을 유지하기에 아주 좋은 행위이므로 항상 유념하길 바란다. 또한 MainPage에서 작동하는 클릭 이벤트 이외 추가 로직 함수들 모두 Controller에 작성하여 관리하는 것이 좋다.
반응형
'개발 > Flutter' 카테고리의 다른 글
[Flutter] (Project) MapleApp: 28. 예외 처리 작업-마무리 (0) | 2024.01.23 |
---|---|
[Flutter] (Project) MapleApp: 27. 예외 처리 작업-6 (0) | 2024.01.22 |
[Flutter] (Project) MapleApp: 25. 예외 처리 작업-4 (0) | 2024.01.20 |
[Flutter] (Project) MapleApp: 24. 예외 처리 작업-3 (0) | 2024.01.19 |
[Flutter] (Project) MapleApp: 23. 예외 처리 작업-2 (0) | 2024.01.18 |
Comments