MVVM pattern in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding MVVM Roles in Flutter

In the MVVM pattern for Flutter apps, which component is primarily responsible for holding the UI state and business logic, and notifying the UI about changes?

A The View

B The ViewModel

C The Model

D The Controller

💡 Hint

Think about which part acts as a bridge between UI and data, and updates the UI when data changes.

In MVVM, the ViewModel holds the UI state and business logic. It exposes data and notifies the View when changes occur, enabling the UI to update reactively.

❓ ui_behavior

intermediate

View Update Trigger in MVVM Flutter

Given a Flutter app using MVVM, what happens when the ViewModel calls notifyListeners() in a ChangeNotifier class?

A The app navigates to a new screen automatically

B The Model fetches new data from the server

C The View rebuilds to reflect updated data

D The ViewModel resets its state to default values

💡 Hint

Consider how Flutter widgets listen to changes in data and update accordingly.

Calling notifyListeners() tells Flutter widgets listening to the ViewModel to rebuild, so the UI updates with the latest data.

❓ lifecycle

advanced

Proper ViewModel Disposal in Flutter MVVM

In a Flutter MVVM app using ChangeNotifier for the ViewModel, which method should you override to properly clean up resources when the ViewModel is no longer needed?

A didChangeDependencies()

B initState()

C build()

D dispose()

💡 Hint

Think about the method that is called to release resources and listeners.

The dispose() method is used to clean up resources like streams or listeners when the ViewModel is destroyed.

❓ navigation

advanced

Navigation Trigger in MVVM Flutter

In MVVM Flutter apps, where should navigation logic ideally be placed to keep the View clean and maintain separation of concerns?

A Inside the ViewModel

B Directly in the View's build method

C In the Model layer

D In a separate Controller class

💡 Hint

Consider which component handles user actions and business logic.

The ViewModel handles user actions and business logic, including navigation commands, keeping the View focused on UI rendering.

🔧 Debug

expert

Debugging MVVM Flutter State Update Issue

You have a Flutter MVVM app where the ViewModel updates data but the UI does not refresh. Which of the following is the most likely cause?

Flutter

class MyViewModel extends ChangeNotifier {
  int counter = 0;

  void increment() {
    counter++;
    // Missing notifyListeners()
  }
}

A notifyListeners() was not called after updating the counter

B The increment method should be async

C The View should call setState() instead of listening to ViewModel

D The counter variable should be declared as final

💡 Hint

Think about how Flutter widgets know when to rebuild after data changes.

Without calling notifyListeners(), the ViewModel does not inform the UI about changes, so the UI does not rebuild.