Is SelectorViewModelWidget<ViewModel, MyOwnDataType> possible?

[JohnnyRainbow81]

Hi,

I try to use SelectorViewModelWidget with my own data type but it doesn't seem to work, since the SelectorViewModelWidget won't be updated.

With regular data types like int I don't have problems.

Since I thought that an update of SelectorViewModelWidget might require a new object, I switched to a copyWith-constructor to swap out the whole object and refresh the internal pointer. But still no effect..

import 'package:flutter/material.dart';
import 'package:stacked/stacked.dart';

class MyViewModel extends BaseViewModel {
  Bundle bundle = Bundle(value1: 0, value2: 0, value3: 0);

  Future<void> increment() async {
    for (int i = 0; i < 100; i++) {
      debugPrint(i.toString());
      await Future.delayed(const Duration(seconds: 1));
      bundle.copyWith(value1: i);
      bundle.copyWith(value2: 1000 - i);
      bundle.copyWith(value3: 500 + i);
      notifyListeners();
    }
  }
}

class ParentScreen extends StatelessWidget {
  const ParentScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder.nonReactive(
      viewModelBuilder: (() => MyViewModel()),
      onModelReady: (model) => model.increment(),
      builder: (context, model, child) => Scaffold(
        body: Center(child: ChildWidget()),
      ),
    );
  }
}

class ChildWidget extends SelectorViewModelWidget<MyViewModel, Bundle> {

  @override
  Widget build(BuildContext context, Bundle value) {
    return Column(mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(value.value1.toString()),
        Text(value.value2.toString()),
        Text(value.value3.toString()),
      ],
    );
  }

  @override
  Bundle selector(MyViewModel model) {
    return model.bundle;
  }
}

class Bundle {
  int value1 = 0;
  int value2 = 0;
  int value3 = 0;
  Bundle({
    required this.value1,
    required this.value2,
    required this.value3,
  });

  Bundle copyWith({
    int? value1,
    int? value2,
    int? value3,
  }) {
    return Bundle(
      value1: value1 ?? this.value1,
      value2: value2 ?? this.value2,
      value3: value3 ?? this.value3,
    );
  }
}

[FilledStacks]

Hey @JohnnyRainbow81

@saileshbro built the feature. Lets see if he can provide some insights as to why that's not working.

[saileshbro]

@JohnnyRainbow81 I think you missed

bundle = bundle.copyWith(value1: i);
bundle = bundle.copyWith(value2: 1000 - i);
bundle = bundle.copyWith(value3: 500 + i);

Since you are not reassigning the bundle the same instance is there, hence the state is not updated, so you are not getting new value.
Basically selector will check the == operator.
More docs here
https://github.com/rrousselGit/provider/blob/master/lib/src/selector.dart#L101...L138

Working example

class MyViewModel extends BaseViewModel {
  Bundle bundle = Bundle(value1: 0, value2: 0, value3: 0);

  Future<void> increment() async {
    for (int i = 0; i < 100; i++) {
      debugPrint(i.toString());
      await Future.delayed(const Duration(seconds: 1));
      bundle = bundle.copyWith(value1: i);
      bundle = bundle.copyWith(value2: 1000 - i);
      bundle = bundle.copyWith(value3: 500 + i);
      notifyListeners();
    }
  }
}

class ParentScreen extends StatelessWidget {
  const ParentScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return ViewModelBuilder.nonReactive(
      viewModelBuilder: () => MyViewModel(),
      onModelReady: (model) => model.increment(),
      builder: (context, model, child) => Scaffold(
        body: Center(child: ChildWidget()),
      ),
    );
  }
}

class Bundle {
  Bundle({
    required this.value1,
    required this.value2,
    required this.value3,
  });
  int value1 = 0;
  int value2 = 0;
  int value3 = 0;

  Bundle copyWith({
    int? value1,
    int? value2,
    int? value3,
  }) {
    return Bundle(
      value1: value1 ?? this.value1,
      value2: value2 ?? this.value2,
      value3: value3 ?? this.value3,
    );
  }
}

class ChildWidget extends SelectorViewModelWidget<MyViewModel, Bundle> {
  @override
  Widget build(BuildContext context, Bundle value) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(value.value1.toString()),
        Text(value.value2.toString()),
        Text(value.value3.toString()),
      ],
    );
  }

  @override
  Bundle selector(MyViewModel model) {
    return model.bundle;
  }
}

You can write ChildWidget as this as well

class ChildWidget extends ViewModelWidget<MyViewModel> {
  const ChildWidget({super.key}) : super(reactive: false);

  @override
  Widget build(BuildContext context, MyViewModel viewModel) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SelectorViewModelBuilder<MyViewModel, int>(
          selector: (model) => model.bundle.value1,
          builder: (context, val, _) {
            return Text(val.toString());
          },
        ),
        SelectorViewModelBuilder<MyViewModel, int>(
          selector: (model) => model.bundle.value2,
          builder: (context, val, _) {
            return Text(val.toString());
          },
        ),
        SelectorViewModelBuilder<MyViewModel, int>(
          selector: (model) => model.bundle.value3,
          builder: (context, val, _) {
            return Text(val.toString());
          },
        ),
      ],
    );
  }
}

Hope that helps

[JohnnyRainbow81]

Thank you very much, @saileshbro, for this awesome quick answer! Made my day 👍

[saileshbro]

@JohnnyRainbow81 you are welcome 💯

[FilledStacks]

Thanks @saileshbro I appreciate the response.

[JohnnyRainbow81]

Just found out that SelectorViewModelWidgets in a ViewModelBuilder.reactive-context don't necessarily rebuild when the data they specifically listen to isn't touched when you fire notifyListeners() - awesome!

[saileshbro]

@JohnnyRainbow81 yeah thats what we need to do, only rebuild when required.
ViewModelBuilder is only used to add the viewmodel to the provider so that it will be accessed from provider in selector viewmodel widget.