MVVM pattern in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a ViewModel class in Flutter.

Flutter

class CounterViewModel extends ChangeNotifier {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count[1];
    notifyListeners();
  }
}

Drag options to blanks, or click blank then click option'

A-= 1

B+= 1

C*= 1

D/= 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' decreases the count instead of increasing it.

Using '*=' or '/=' does not increment the count properly.

The increment method should add 1 to the _count variable using the += operator.

2fill in blank

medium

Complete the code to notify listeners when the count changes in the ViewModel.

Flutter

void increment() {
  _count += 1;
  [1]();
}

Drag options to blanks, or click blank then click option'

AnotifyListeners

BupdateUI

Crefresh

DsetState

Attempts:

3 left

💡 Hint

Common Mistakes

Using setState inside ViewModel is incorrect; setState is for Widgets.

Using updateUI or refresh are not valid ChangeNotifier methods.

In Flutter's ChangeNotifier, notifyListeners() tells the UI to update when data changes.

3fill in blank

hard

Fix the error in the View code to listen to the ViewModel changes.

Flutter

class CounterView extends StatelessWidget {
  final CounterViewModel viewModel;

  CounterView({required this.viewModel});

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider.value(
      value: viewModel,
      child: Consumer<CounterViewModel>(
        builder: (context, model, child) {
          return Text('Count: ${model.[1]');
        },
      ),
    );
  }
}

Drag options to blanks, or click blank then click option'

AnotifyListeners

B_count

Cincrement

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Using the private variable '_count' directly causes an error.

Using 'increment' or 'notifyListeners' in the Text widget is incorrect.

The View should access the public getter count to display the current count.

4fill in blank

hard

Fill both blanks to create a button that calls the ViewModel's increment method when pressed.

Flutter

ElevatedButton(
  onPressed: [1],
  child: Text([2]),
)

Drag options to blanks, or click blank then click option'

AviewModel.increment

BviewModel.increment()

C'Increment'

D'Add'

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function with parentheses in onPressed causes it to run immediately.

Using 'Add' instead of 'Increment' may confuse the user.

The onPressed expects a function reference without parentheses, and the button label should be 'Increment'.

5fill in blank

hard

Fill all three blanks to define a simple ViewModel with a private count, a getter, and an increment method.

Flutter

class CounterViewModel extends ChangeNotifier {
  int [1] = 0;

  int get [2] => [3];

  void increment() {
    _count += 1;
    notifyListeners();
  }
}

Drag options to blanks, or click blank then click option'

A_count

Bcount

Dtotal

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the private variable without underscore breaks encapsulation.

Getter returning a wrong variable name causes errors.

The private variable is named _count. The getter is count which returns _count.

Practice

1. What is the main role of the ViewModel in the MVVM pattern in Flutter?

easy

A. To handle user input events directly from the UI

B. To hold data and business logic, notifying the View of changes

C. To display the user interface elements on the screen

D. To manage navigation between different screens

Solution

1. Step 1: Understand MVVM roles

   The ViewModel acts as a middleman holding data and logic separate from UI.

2. Step 2: Identify ViewModel responsibility

   It notifies the View when data changes so UI updates automatically.

3. Final Answer:

   To hold data and business logic, notifying the View of changes -> Option B

4. Quick Check:

   ViewModel = Data + Logic holder [OK]

Hint: ViewModel holds data and logic, not UI display [OK]

Common Mistakes:

• Confusing ViewModel with View
• Thinking ViewModel handles UI rendering
• Assuming ViewModel manages navigation

2. Which of the following is the correct way to notify the View about data changes in a ViewModel using Flutter's ChangeNotifier?

easy

A. call notifyListeners() inside the ViewModel after data update

B. call setState() inside the ViewModel after data update

C. call build() method directly from the ViewModel

D. call dispose() method after data update

Solution

1. Step 1: Recall ChangeNotifier usage

   ChangeNotifier requires calling notifyListeners() to update listeners.

2. Step 2: Identify correct notification method

   notifyListeners() triggers UI rebuilds in listening Views.

3. Final Answer:

   call notifyListeners() inside the ViewModel after data update -> Option A

4. Quick Check:

   notifyListeners() updates View [OK]

Hint: Use notifyListeners() in ViewModel to update UI [OK]

Common Mistakes:

• Using setState() inside ViewModel (wrong place)
• Trying to call build() manually
• Calling dispose() instead of notifyListeners()

3. Given this ViewModel code snippet in Flutter:

class CounterViewModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

What will be the value of count after calling increment() twice starting from 0?

medium

A. 0

B. 1

C. 2

D. Error: notifyListeners() not called

Solution

1. Step 1: Analyze initial value and increment

   _count starts at 0, increment() adds 1 each call.

2. Step 2: Calculate after two increments

   After two calls, _count = 0 + 1 + 1 = 2.

3. Final Answer:

   2 -> Option C

4. Quick Check:

   Two increments = count 2 [OK]

Hint: Each increment adds 1; two calls add 2 total [OK]

Common Mistakes:

• Forgetting notifyListeners() updates UI but doesn't change count
• Assuming count resets after notifyListeners()
• Confusing initial value with updated value

4. Identify the error in this ViewModel code snippet:

class UserViewModel extends ChangeNotifier {
  String _name = '';
  String get name => _name;

  void updateName(String newName) {
    _name = newName;
  }
}

Why won't the UI update when updateName is called?

medium

A. notifyListeners() is missing after updating _name

B. Getter method name is incorrect

C. ChangeNotifier should not be extended

D. updateName should be async

Solution

1. Step 1: Check data update method

   updateName changes _name but does not notify listeners.

2. Step 2: Understand UI update trigger

   Without notifyListeners(), UI won't rebuild on data change.

3. Final Answer:

   notifyListeners() is missing after updating _name -> Option A

4. Quick Check:

   Missing notifyListeners() blocks UI update [OK]

Hint: Always call notifyListeners() after data changes [OK]

Common Mistakes:

• Forgetting notifyListeners() after state change
• Thinking getter name causes UI update
• Assuming async needed without async code

5. You want to build a Flutter app using MVVM where the View updates automatically when the ViewModel's list of items changes. Which approach correctly implements this behavior?

hard

A. Store the list in View and pass it to ViewModel without notifications

B. Directly modify the list in the View and call setState() in ViewModel

C. Use a StatefulWidget for ViewModel and call build() manually after list changes

D. Use a ChangeNotifier in ViewModel, call notifyListeners() after modifying the list, and use a Consumer widget in View

Solution

1. Step 1: Understand MVVM data flow

   ViewModel holds data and notifies View on changes using ChangeNotifier.

2. Step 2: Identify correct Flutter pattern

   Calling notifyListeners() after list changes triggers Consumer widget rebuild in View.

3. Step 3: Eliminate incorrect options

   setState() belongs in View, not ViewModel; manual build() calls are incorrect; storing list only in View breaks MVVM.

4. Final Answer:

   Use a ChangeNotifier in ViewModel, call notifyListeners() after modifying the list, and use a Consumer widget in View -> Option D

5. Quick Check:

   ChangeNotifier + notifyListeners() + Consumer = MVVM update [OK]

Hint: Use ChangeNotifier + notifyListeners() + Consumer for auto UI update [OK]

Common Mistakes:

• Calling setState() in ViewModel instead of View
• Modifying data only in View without notifications
• Manually calling build() method