Flutter Flow 이해하기

 

Flutter Flow란?

코드 작성 없이 레이아웃 조정만으로 앱을 만들어주는 툴.

코드 없이 앱을 만들어 준다는 점에서 비용적으로나, 시간적으로나 절약할 수 있으나,
실제 코드로 앱을 만드는 것 만큼 자유도가 높지는 않다고 한다.

---

flutter flow 기초 

• FFAppState : central hub for managing the application's global state
  앱의 전역 상태를 관리하는 중간 허브같은 역할
  
  • 앱의 생명주기 동안 이 클래스에서 하나의 인스턴스만 가진다
  • ChangeNotifier를 상속받아 위젯의 상태 변경을 구독한다
  • 앱을 초기화하고 지속적인 상태를 업데이트하는 메서드를 포함한다
  • getter와 setter 처럼 값을 조정하는 상태 변수를 정의한다.
    
    예시

class FFAppState extends ChangeNotifier {
  static FFAppState _instance = FFAppState._internal();

  factory FFAppState() {
    return _instance;
  }

  FFAppState._internal();

  static void reset() {
    _instance = FFAppState._internal();
  }

  void update(VoidCallback callback) {
    callback();
    notifyListeners();
  }

   // App State variable of primitive type with a getter and setter
    bool _enableDarkMode = false;

    bool get enableDarkMode => _enableDarkMode;

    set enableDarkMode(bool value) {
    _enableDarkMode = value;
   }

}

위 코드를 이해하려면 singleton 패턴을 알아야 할 필요가 있겠다

• Singleton : 오직 하나의 인스턴스만을 만드는 디자인 패턴
  • 한 번 인스턴스가 생성되고 나면 생성된 인스턴스만을 반환하므로 고정된 메모리 영역을 차지한다.
  • 인스턴스는 전역으로 사용할 수가 있어 공유하기 쉽다
  • 단점으로는 자식 객체 가질 수 없음, 내부 구조 변경 불가 등이 있다.
  • 앱 전체에서 동일한 인스턴스를 유지할 때 유용

class SingletonCount {
  static final SingletonCount instance = SingletonCount._internal();
  
  factory SingletonCount()=>instance;
  
  SingletonCount._internal();
  
  int count = 0;
}

코드 출처 및 개념 이해에 도움 된 글 : https://velog.io/@tygerhwang/Flutter-Singleton-Pattern싱글톤-패턴

class Singleton {
  // 내부에서 사용할 정적 인스턴스
  static final Singleton _instance = Singleton._internal();

  // 외부에서 접근할 수 있는 factory 생성자
  factory Singleton() {
    return _instance;
  }

  // 프라이빗 생성자
  Singleton._internal();

  // 싱글톤 클래스의 메서드 및 변수
  String data = "Hello, Singleton!";

  void printData() {
    print(data);
  }
}

코드 출처 및 개념 이해에 도움 된 글 : https://benstagram.tistory.com/654

Rebuild

• 앱 상태 업데이트로 인한 현재 페이지 rebuild
  상응하는 setter가 호출되고 즉시 set State()가 적용된다.

SchedulerBinding.instance.addPostFrameCallback((_) async {
  FFAppState().enableDarkMode = !(FFAppState().enableDarkMode ?? true);
  setState(() {});
});

 

• 모든 페이지 rebulild
  setter가 호출되고 update 메서드를 따른다

SchedulerBinding.instance.addPostFrameCallback((_) async {
  FFAppState().enableDarkMode = !(FFAppState().enableDarkMode ?? true);
  FFAppState().update(() {});
});

---

FlutterFlow Model

FlutterFlow에서 사용되는 추상클래스로, 위젯의 상태와 behavior을 관리하기 위해 통일되고 통합된 구조를 제공한다. 
초기화, 상태관리, 제거등의 로직을 압축하여 위젯과 모델의 생명주기를 쉽게 다룰 수 있도록 한다.