[Flutter] Stacked에서 view와 viewModel의 생성 순서

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

Stacked 패키지를 활용해 View와 ViewModel을 예시로 아래와 같이 만들어져있다고 가정할때, View와 ViewModel이 생성되는 순서를 살펴보고자 합니다.

아래 설명되어 있는 View와 ViewModel은 Stacked 패키지의 기본모델인 StartupView를 예로 들되, 기본적으로 쓰이는 BaseViewModel이 아닌 FutureViewModel을 기준으로 만들었을 때의 순서를 살펴보고자합니다.

 

하기에 적혀있는 A~F의 순서를 표현해 설명하도록하겠습니다.

import 'package:flutter/scheduler.dart';
import 'startup_viewmodel.dart';

...

class StartupView extends StackedView<StartupViewModel> {
  StartupView({Key? key}){
  	// A. View Constructor
  };

  @override
  Widget builder(
    BuildContext context,
    StartupViewModel viewModel,
    Widget? child,
  ) {
  	// B. View Builder
    return Scaffold(
    	...
    );
  }

  @override
  StartupViewModel viewModelBuilder(
    BuildContext context,
  ){
  	// C. View ViewModdel Builder Call
    return StartupViewModel();
  }

  @override
  void onViewModelReady(StartupViewModel viewModel) => SchedulerBinding.instance
      .addPostFrameCallback((timeStamp) => viewModel.runStartupLogic());
}

...

class StartupViewModel extends FutureViewModel {
  final _navigationService = locator<NavigationService>();

  StartupViewModel(){
  	// D. ViewModel Constructor
  }

  // Place anything here that needs to happen before we get into the application
  Future runStartupLogic() async {
    // E. ViewModel Scheduled

    _navigationService.replaceWithHomeView();
  }
  
  @override
  Future<void> futureToRun() async{
  	// F. FutureViewModel Runner
  }
}

 

 

---

2. Why? (원인)

• X

---

3. How? (해결책)

만들어지는 순서를 정리하면 아래와 같습니다.

• ----------------------------View--------------------------------
• STEP1. A. View Constructor : 먼저 View의 Constructor가 가장 먼저 불립니다.
  (항상 View와 View Model 모두 Constructor 가 우선입니다.)
• STEP2. C. View ViewModel BuilderCall : 자기 View를 Build하기 전에 View Model을 먼저 Build하라고 명령어를 보냅니다.
• ---------------------------ViewModel--------------------------
• STEP3. D. ViewModel Contructor : ViewModel 역시 Constructor가 가장 먼저 불립니다.
• STEP4. F. FutureViewModel Runner : ViewModel이 FutureViewModel인 경우, futureToRun()함수가 먼저 불립니다.
• ----------------------------View--------------------------------
• STEP5. B. View Builder : ViewModel이 완성되었으니, View를 Rendering하기 시작합니다.
• ---------------------------ViewModel--------------------------
• STEP6. E. ViewModel Scheduled : StackedView에서 상속가능한 onViewModelReady()라는 함수를 schedule해 실행합니다.
• ----------------------------View--------------------------------
• STEP7. B. View Builder : View를 다시한번 Rendering 합니다.

 

 

---

https://stacked.filledstacks.com/docs/getting-started/startup-logic