Flutter: scoped model access in StatefulWidget

I have scoped model lib/scoped_models/main.dart:

import 'package:scoped_model/scoped_model.dart';

class MainModel extends Model {
  int _count = 0;

  int get count {
    return _count;
  }
  
  void incrementCount() {
    _count += 1;
    notifyListeners();
  }

  void setCount(int value) {
    _count = value;
    notifyListeners();
}

And very simple app lib/main.dart:

import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';
import 'package:scoped_m_test/scoped_models/main.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ScopedModel<MainModel>(
        model: MainModel(),
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        )
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final MainModel _model = MainModel();

  void initState() {
    super.initState();
    // _model.incrementCount(); // <-- doesn't work !!!
  }
  
  void _incrementCounter() {
    setState(() {
      // _model.incrementCount(); // <-- doesn't work !!!
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            ScopedModelDescendant<MainModel>(
              builder: (BuildContext context, Widget child, MainModel model) {
                return Text(
                  '${model.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              }
            )
          ],
        ),
      ),
      floatingActionButton: ScopedModelDescendant<MainModel>(
        builder: (BuildContext context, Widget child, MainModel model) {
          return FloatingActionButton(
            onPressed: () {
              model.incrementCount(); // <-- only this works !!!
              // _incrementCounter(); // <-- doesn't work !!!
            },
            tooltip: 'Increment',
            child: Icon(Icons.add),
          );
        }
      )
    );
  }
}

The problem that I can't access MainModel outside of ScopedModelDescendant widget.

How to call MainModel methods at the beginning of _MyHomePageState class?

I believe it is possible because I don't want to keep all logic just in MainModel class and call every method in ScopedModelDescendant widget because it would be very inconvenient if there were many nested widgets.

So, how to get access to scoped model in StatefulWidget?

Use Scoped Model as provider

• add ScopedModel just before the widget which use it (MyHomePage)
• use ScopedModel.of<MainModel>(context) to control the model
• use ScopedModelDescendant<MainModel> to listen the model

The advantage of using this:

• You can access the same model in the descendants and share data easily
• rebuild widget as small as possible (only ScopedModelDescendant part will be rebuilt)

code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ScopedModel<MainModel>(
        model: MainModel(),
        child: MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void initState() {
    super.initState();
  }

  void _incrementCounter() {
    ScopedModel.of<MainModel>(context).incrementCount();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            ScopedModelDescendant<MainModel>(
              builder: (context,child, model){
                return Text(
                  '${model.count}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _incrementCounter();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Put MainModel as a Singleton

As your solution, you create MainModel once and make it final. This can be more simple like below:

MainModel

final MainModel mainModel = MainModel();

class MainModel{
  int _count = 0;

  int get count {
    return _count;
  }

  void incrementCount() {
    _count += 1;
  }

  void setCount(int value) {
    _count = value;
  }
}

MyHomePage

• MainModel even no need to extend Model or use notifyListeners becaue the widget use setState to rebuild

code:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  void initState() {
    super.initState();
  }

  void _incrementCounter() {
    setState(() {
      mainModel.incrementCount();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${mainModel.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _incrementCounter();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}