this is a mvvm plugin

View Exmaple , there are only widgets

class AppView extends View<MyAppViewModel, AppStyle> {
  const AppView({super.key, required super.viewModel});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            title: ValueBuilder(
          builder: <int>(context, countVal) {
            return Text(
              'ViewModel demo${countVal.value}',
              style: style.textStyle,
            );
          },
          viewModel: viewModel.countVal,
        )),
        body: Center(
          child: InkWell(
            onTap: (){
              viewModel.countPP();
            },
            child: Text(
              'clicked me',
              style: style.textStyle2,
            ),
          ),
        ),
      ),
    );
  }
}

ViewModel Exmaple , proccess your service

class MyAppViewModel extends ViewModel {
  Value<int> countVal = Value(initValue: 1);

  void countPP(){
    //this code will refresh the view
    countVal.value = (countVal.value??0) + 1;
  }

   
  @override
  void onStyleInited() {
    setStyle(styles!.firstWhere((element) => element.name == (Random().nextBool()?'default':'dark') ));
  }

  @override
  void onCreated() {}

  @override
  void onDisposed() {}


 //config the theme style that will be choosed
  @override
  List<AppStyle>? get styles => [
        AppStyle(),
        DarkAppStyle(),
      ];
}

Style Example, Mutils Style provide to choose

class AppStyle extends Style {
  @override
  String get name => 'default';
  TextStyle textStyle = TextStyle(color: Colors.red, fontSize: 12);
  TextStyle textStyle2 = TextStyle(color: Colors.redAccent, fontSize: 12);
}

class DarkAppStyle extends AppStyle {
  @override
  String get name => 'dark';

  TextStyle textStyle = TextStyle(color: Colors.blueGrey, fontSize: 14);
  TextStyle textStyle2 = TextStyle(color: Colors.blueAccent, fontSize: 14);
}