MVVM Design Pattern in Flutter

Question

we try to develop a flutter app and we create a stateful widget as a page .
we want to separate build function from other state variable and state function in 2 different file that build function can access to this of state class we creating a class :

PageClassState extend State<PageClass>{
    string value = 'string value';
}

and extend it in a new class that can access PageClassState this variable we write :

PageClassView extend PageClassState{
    @override
    Widget Build(){
      return(new Text(this.value))
    }
} 

but in PageClassState we get an error say we must override build method in the class . is there any suggestion to fix the problem and implement MVVM Design pattern in flutter?

Answer 1

I suggest moving your ViewModel code into a separate class that does not extend State. Keep the ViewModel platform independent. Your Widgets state can have an instance of the viewModel and interact with it.

You can find a more detailed example here

If child Widgets need to access your ViewModel you can use a Inherited Widget as suggested by @Rémi Rousselet. I quickly implemented this for you:

class ViewModelProvider extends InheritedWidget {
  final ViewModel viewModel;

  ViewModelProvider({Key key, @required this.viewModel, Widget child}) 
  : super(key: key, child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => true;

  static ViewModel of(BuildContext context) =>
      (context.inheritFromWidgetOfExactType(ViewModelProvider) as 
  ViewModelProvider).viewModel;
}

Child widgets can grab the ViewModel by calling

var viewModel = ViewModelProvider.of(context);

Let me know if you have any questions :)

Answer 2

That's not the proper approach. You shouldn't split State<T> and it's build method. The thing is, don't extend widgets. Compose them.

A correct way to achieve something similar is to use InheritedWidget. These will hold you data but do nothing else. And it's children will be able to request those datas using a MyInherited.of(context).

You could also create a builder. Something like :

typedef Widget MyStateBuilder(BuildContext context, MyStateState state);

class MyState extends StatefulWidget {
  final MyStateState builder;

  const MyState({this.builder}) : assert(builder != null);

  @override
  MyStateState createState() => new MyStateState();
}

class MyStateState extends State<MyState> {
  String name;

  @override
  Widget build(BuildContext context) {
    return widget.builder(context, this);
  }
}