2025. 1. 20. 22:53ㆍ모바일어플개발/Flutter
안녕하세요 totally 개발자입니다.
오늘 이 시간에는 GetX 상태 관리 패키지, Dio를 이용하여 setState 사용 없이 간단하게 상태를 업데이트할 수 있도록 리스트를 만들어 보겠습니다. 페이지 1개, model 객체 1개, controller 1개씩 이용하여 만들어보도록 하겠습니다. 데이터는 https://jsonplaceholder.typicode.com/todos 여기에서 받아오도록 하겠습니다.
GetX의 기본 원리는 아래와 같습니다.
1) 기존 MaterialApp 대신 GetMaterialApp으로 감싸줍니다.
2) UI에서 사용될 페이지가 로딩됩니다.
3) 페이지에서 사용할 상태를 컨트롤러를 등록 및 활용하여 업데이트한다.
4) GetX, GetBuilder, Obx 등의 위젯을 사용하여서 컨트롤러에서 업데이트된 변수의 상태를 관찰하여 즉각 화면을 업데이트합니다.
5) 특정 컨트롤러가 더 이상 사용되지 않는 경우 컨트롤러를 제거합니다. (보통 바인딩하는 경우 해당 페이지를 벗어나면 자동 제거됩니다)
Step 1: 먼저 pubspec.yaml에 dio 패키지와 get 패키지를 등록해줍니다.
Step 2: 위 json 데이터 리스트를 웹사이트로 열어서 확인해보면 아래와 같이 나오는데 데이터 객체를 Todo 클래스로 정의하여 아래처럼 만들어줍니다. factory Todo.fromJson 메소드를 통하여 Todo 인스턴스를 만들어주도록 합니다.
Step 3: todo_controller.dart 파일을 생성 후 Controller 클래스를 만들어줍니다. 먼저 RxList 변수를 지정하여 해당 부분이 변화하는지 감지할 수 있도록 만드시고 그 다음 getTodoList를 만들어서 Dio 패키지를 사용 및 데이터를 불러옵니다.
Step 4: todo_list_page.dart 파일을 생성해서 TodoListPage 클래스를 만듭니다. 여기에서 initState를 통해 먼저 위에서 만든 TodoController를 등록해줍니다. 등록 없이는 컨트롤러 사용을 할 수 없고 바로 오류가 표시 됩니다. 앱 사이즈가 어느 정도 되어서 별도 Routing를 하고 Get.toNamed 형태로 네비게이션 라우팅을 한다면 GetPage를 사용하여 컨트롤러를 바인딩할 수 있습니다. Get.put이 바로 컨트롤러를 등록하는 메소드이고 Get.find가 등록된 컨트롤러를 찾아 접근하는 메소드입니다.
Step 5: Widget build 부분을 아래와 같이 작성해줍니다. 여기서 중요한 것은 Obx 위젯이며 Obx 위젯에는 반드시 Rx 또는 .obs 형태의 타입을 사용한 변수가 들어가야 합니다. 아까 컨트롤러에서 일반 List가 아니라 RxList 타입을 사용하였습니다. 이것을 통해서 RxList에 변화가 생기는 즉시 바로 화면에 업데이트 됩니다. 이렇게 하기 때문에 setState 사용 없이 바로 화면에 업데이트 되는 것입니다. 원래 setState를 사용한다면 Dio 패키지에서 데이터를 불러온 다음 setState를 통해 렌더링 작업을 다시 해주어야 화면에 표시됩니다. (전체 코드는 맨 아래에 첨부하였습니다)
Step 6: 실행한 모습입니다.
[main.dart]
[todo_list_page.dart]
[todo_controller.dart]
[todo.dart]
[유튜브 강좌 영상]