FlutterFlow Classes

FlutterFlowModel

The FlutterFlowModel class residing in flutter_flow/flutter_flow_model.dart is an abstract class in Flutter designed to manage the state and lifecycle of widgets in FlutterFlow. Let's break down its key components and functionalities:

Initialization Process

The initialization process in FlutterFlowModel involves a few key steps.

First, it checks if the model has already been initialized using a flag (_isInitialized) to prevent redundant setups. If not initialized, the initState method is called, which is defined in each subclass for specific initialization tasks.

During this process, the model also associates itself with the corresponding widget (of type W) to link the model's state and logic with the widget's properties.

This setup ensures that each model is correctly initialised once and linked to its specific widget, laying the groundwork for effective state management and interaction within the app.

Disposal Process

The disposal process in FlutterFlowModel is designed for efficient resource management and cleanup. It hinges on the disposeOnWidgetDisposal flag, which determines if the model should be disposed of when its associated widget is no longer needed. Typically, this is set to true for page models and false for component models.

The actual cleanup tasks are defined in the dispose method, implemented in subclasses. The maybeDispose method checks the flag and, if set to true, calls dispose to perform necessary cleanup actions.

Finally, the model's reference to its associated widget (_widget) is set to null, which is crucial for freeing up memory and aiding in garbage collection. This process ensures that resources are released and memory is managed effectively when widgets are no longer in use.

Update Process

The update process in FlutterFlowModel is designed to synchronize state changes in the model with updates to the user interface. It starts with the updateOnChange flag, which controls whether the UI should be updated when the model's state changes.

When the state changes, the onUpdate method is called. If updateOnChange is true, the model executes a predefined callback function (_updateCallback), set using the setOnUpdate method. This callback function specifies the actions to be taken when the model updates, typically involving UI refreshes to reflect the new state. This process ensures that the model and the UI stay in sync, allowing for dynamic and responsive app behavior.

---

FFAppState

The FFAppState class in FlutterFlow acts as a central hub for managing the application's global state. It's designed as a singleton, meaning there's only one instance of this class throughout the app's lifecycle. This class extends ChangeNotifier, allowing widgets to listen and react to state changes.

It includes methods for initializing and updating the app's persisted state and also defines various state variables with corresponding getters and setters for manipulating these values.

Here is a template of the class in its most basic form:

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

  factory FFAppState() {
    return _instance;
  }

  FFAppState._internal();

  static void reset() {
    _instance = FFAppState._internal();
  }
  
   // Example state variable with a getter and setter
  String _exampleStateVariable = '';
  String get exampleStateVariable => _exampleStateVariable;
  set exampleStateVariable(String value) {
    _exampleStateVariable = value;
    notifyListeners();  // Notify listeners of the change.
  }
  
}

The _exampleStateVariable is a state variable with a corresponding getter and setter. When the setter is called, it updates the variable and calls notifyListeners(), which is crucial for updating any widgets that depend on this variable.

In your FlutterFlow widget files, you'll also notice the following line within the build method:

@override
Widget build(BuildContext context) {
  context.watch<FFAppState>(); // Listening to changes in App State
  ...
}

This line plays a crucial role in state management. By using context.watch<FFAppState>(), the widget is effectively subscribing to any changes in FFAppState. Whenever there's a change in the FFAppState object, this widget automatically rebuilds itself to reflect those changes. This ensures your widget always displays the most current data and state of the app, maintaining an up-to-date and reactive user interface.