Skip to content

View Models

Dustin Catap edited this page Jun 19, 2024 · 2 revisions

View Models contains the state of your view.

@injectable
class HomeViewModel extends ViewModel {
  final ValueNotifier<int> _count = ValueNotifier(0);

  ValueListenable<int> get count => _count;

  void increment() => _count.value++;
}

Initialization and Disposal

You can implement the following interfaces to perform initialization and disposal logic in your view model.

Initializable

Implement the interface Initializable, which provides the onInitialize method. This method is called after the view model is created.

@injectable
class HomeViewModel implements Initializable {
  @override
  Future<void> onInitialize(Object? args) async {
    // perform initialization logic here
  }
}
  • args is an optional parameter that can be passed when navigating. To know how to extract parameters passed during navigation, read about it here.

IMPORTANT

  • onInitialize is marked as Future<void>, so you can perform asynchronous operations for initialization. But this method is unawaited when called from the ViewModelBuilder or AutoViewModelBuilder. This means that the UI will not wait for the initialization to complete before rendering. Be sure to handle such cases.

FirstRenderable

Implement the interface FirstRenderable, which provides the onFirstRender method. This method is called after the view model is created and the view is rendered for the first time.

@injectable
class HomeViewModel implements FirstRenderable {
  @override
  Future<void> onFirstRender() {
    // perform logic here
  }
}

Disposable

Implement the interface Disposable, which provides the dispose method. This method is called when the view of the view model is removed from the widget tree.

@injectable
class HomeViewModel implements Disposable {
  @override
  void dispose() {
    // perform disposal logic here
  }
}

Observer Mixins

You can observe app lifecycle changes and route changes by mixing in the following observer mixins.

AppLifecycleAwareMixin

You can mix AppLifeCycleAwareMixin to your ViewModel class. It implements the WidgetsBindingObserver.

You can observe app lifecylce changes by overriding any the following:

@protected
@override
Future<void> onAppPaused() {
  // do something when app is paused
}

@protected
@override
Future<void> onAppResumed() {
  // do something when app is resumed
}

@protected
@override
Future<void> onAppInactive() {
  // do something when app is inactive
}

@protected
@override
Future<void> onAppDetached() {
  // do something when app is detached
}

@protected
@override
Future<void> onAppHidden() {
  // do something when app is hidden
}

RouteAwareMixin

You can mix RouteAwareMixin to your ViewModel class. It implements the RouteAware.

You can observe route changes by overriding the following:

@protected
@override
Future<void> didPop() {
  // do something when the current route has been popped
}

@protected
@override
Future<void> didPush() {
  // do something when the current route has been pushed
}

@protected
@override
Future<void> didPopNext() {
  // do something when the current route is visible after the previous route has been popped
}

@protected
@override
Future<void> didPushNext() {
  // do something when the current route is no longer visible after the new route has been pushed
}