Flutter Mobx+Modular Data Not Loaded

Question

Opa I’m using mobx+modular in an app, but I’m having a problem, which I think should be a simple mistake my.

I have a Controller where I want to save the seller and default customer to always be pulled at the beginning of the app

import 'package:acmil_frontend_flutter/app/modules/Produto/repositories/produto_repository.dart';
import 'package:acmil_frontend_flutter/app/shared/models/Parametros_Model.dart';
import 'package:acmil_frontend_flutter/app/shared/models/PedidoVendaItens_Model.dart';
import 'package:acmil_frontend_flutter/app/shared/models/PedidoVenda_Model.dart';
import 'package:acmil_frontend_flutter/app/shared/models/Produto_Model.dart';
import 'package:acmil_frontend_flutter/app/shared/utils/Global_Scaffold.dart';
import 'package:mobx/mobx.dart';
import 'package:flutter_modular/flutter_modular.dart';

part 'pedido_venda_controller.g.dart';

@Injectable()
class PedidoVendaController = _PedidoVendaControllerBase  with _$PedidoVendaController;

abstract class _PedidoVendaControllerBase with Store {

  @observable
  PedidoVendaModel pedidoVenda = PedidoVendaModel();
  @observable
  bool lockIconeCliente = false;
  @observable
  bool lockIconeVendedor = false;

 @observable
  bool isMenuOpen = false;
  
  @action
  gravarParamCliente() async {
    Parametros parametros = Parametros();
    if (pedidoVenda.cODCLI != null){
      parametros.codCliente = pedidoVenda.cODCLI.toString();
      parametros.nomeCliente  = pedidoVenda.nomeCli;
      lockIconeCliente = true;
    }
    await parametros.gravarParametros();
  }

  @action
  gravarParamVendedeor() async {
    Parametros parametros = Parametros();
    if (pedidoVenda.cODVEND != null){
      parametros.codVendedor  = pedidoVenda.cODVEND.toString();
      parametros.nomeVendedor = pedidoVenda.nomeVend;        
      lockIconeVendedor = true;
    }
    await parametros.gravarParametros();
  }

  @action
  limpartParamCliente() async {
    Parametros parametros = Parametros();
    await parametros.limparParametros(4);
    await parametros.limparParametros(3);
    lockIconeCliente = false;
  }

  @action
  limpartParamVendedor() async {
    Parametros parametros = Parametros();
    await parametros.limparParametros(5);
    await parametros.limparParametros(6);
    lockIconeVendedor = false;
  }

  @action
  preencherTextoParam() async {

    Parametros parametros = Parametros();
    await parametros.buscarParametros();        
    if (parametros.codCliente != null){
      pedidoVenda.cODCLI = int.parse(parametros.codCliente);
      pedidoVenda.nomeCli = parametros.nomeCliente;
      lockIconeCliente = true;
    }else      
      lockIconeCliente = false;
    if (parametros.codVendedor != null) {
      pedidoVenda.cODVEND = int.parse(parametros.codVendedor);
      pedidoVenda.nomeVend = parametros.nomeVendedor;
      lockIconeVendedor = true;
    }else      
      lockIconeVendedor = false;
  }
}

and I have the page where I save the customer and seller, and where you should load them if there are already any saved

import 'package:acmil_frontend_flutter/app/modules/PedidoVenda/Utils/CustomDialogQteItemPV.dart';
import 'package:acmil_frontend_flutter/app/modules/PedidoVenda/Utils/OverlayEntry.dart';
import 'package:acmil_frontend_flutter/app/modules/PedidoVenda/pages/ClientePV.dart';
import 'package:acmil_frontend_flutter/app/modules/PedidoVenda/pages/VendedorPV.dart';
import 'package:acmil_frontend_flutter/app/shared/utils/formatter.dart';
import 'package:barcode_scan/barcode_scan.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:mobx/mobx.dart';
import 'pedido_venda_controller.dart';

class PedidoVendaPage extends StatefulWidget {
  final String title;
  const PedidoVendaPage({Key key, this.title = "Pré-Venda"}) : super(key: key);

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

class _PedidoVendaPageState extends ModularState<PedidoVendaPage, PedidoVendaController>
    with SingleTickerProviderStateMixin {
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  Formatter formatter = Formatter();
  final List<ReactionDisposer> disposers = [];

  @override
  void initState() {
    final _controller = controller;
    disposers.add(
      autorun((_) { 
        print('nome'+_controller.pedidoVenda.nomeVend);
        print('cod'+_controller.pedidoVenda.cODVEND.toString());
      }
      )
    );
    controller.preencherTextoParam();
    super.initState();
  }

  @override
  void dispose() {
    disposers.forEach((disposer) => disposer());
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      // drawer: DrawerWidget(),
      appBar: AppBar(
        title: Text(widget.title),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.history),
            onPressed: () {
              if (controller.isMenuOpen) {
                overlayEntry.closeMenu();
              }
            },
          ),
        ],
      ),
       body: Observer(builder: (_) {
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              padding: EdgeInsets.all(10),
              color: Color(0xfff0f3f4),
              child: Row(children: <Widget>[
                Expanded(
                  flex: 2,
                  child: GestureDetector(
                    child: Row(children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Icon(Icons.assignment_ind),
                      ),
                      Expanded(
                        flex: 3,
                        child: Text(
                          controller.pedidoVenda.nomeVend ?? "Vendedor",
                          style: TextStyle(
                            color: Colors.grey[700], fontSize: 13),
                          maxLines: 1
                        )
                      )
                    ]),
                    onTap: () {
                      if (controller.isMenuOpen) {
                        overlayEntry.closeMenu();
                      }
                      Navigator.of(context).push(MaterialPageRoute(
                          builder: (context) =>
                              VendedorPV(0, "", 0, controller.pedidoVenda)));
                    },
                  )
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border(
                        right: BorderSide(
                          color: Colors.black,
                          width: 0.5,
                        )
                      )
                    ),
                    child: Observer(builder: (_) {
                      return IconButton(
                        icon: controller.lockIconeVendedor
                            ? Icon(Icons.lock_outline)
                            : Icon(Icons.lock_open),
                        onPressed: () {
                          if (controller.lockIconeVendedor == false) {
                            controller.gravarParamVendedeor();
                          } else {
                            controller.limpartParamVendedor();
                          }
                          if (controller.isMenuOpen) {
                            overlayEntry.closeMenu();
                          }
                        },
                      );
                    })
                  )
                ),
                Expanded(
                  flex: 2,
                  child: Container(
                    child: GestureDetector(
                      child: Row(children: <Widget>[
                        Expanded(
                          flex: 1,
                          child: Icon(Icons.person_pin),
                        ),
                        Expanded(
                            flex: 3,
                            child: Text(
                                controller.pedidoVenda.nomeCli ?? "Cliente",
                                style: TextStyle(
                                    color: Colors.grey[700], fontSize: 13),
                                maxLines: 1)),
                      ]),
                      onTap: () {
                        if (controller.isMenuOpen) {
                          overlayEntry.closeMenu();
                        }
                        Navigator.of(context).push(MaterialPageRoute(
                            builder: (context) =>
                                ClientePV("", 0, "", 0, controller.pedidoVenda)));
                      },
                    )
                  )
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    child: Observer(builder: (_) {
                      return IconButton(
                        icon: controller.lockIconeCliente
                            ? Icon(Icons.lock_outline)
                            : Icon(Icons.lock_open),
                        onPressed: () {
                          if (controller.lockIconeCliente == false) {
                            controller.gravarParamCliente();
                          } else {
                            controller.limpartParamCliente();
                          }
                          if (controller.isMenuOpen) {
                            overlayEntry.closeMenu();
                          }
                        },
                      );
                    })
                  )
                )
              ])
            )
          ],
        );
      })
    );
  }
}

The problem is that when starting the page if there is already something saved it does not bring

line that should bring the seller saved

Text(
   controller.pedidoVenda.nomeVend ?? "Vendedor",
   style: TextStyle(color: Colors.grey[700], fontSize: 13),
   maxLines: 1
 )

I even tried to use an autorun, but I think I’m still not quite understanding its use. what could be the problem ?

Answer 1

The problem is that a property Observable only reflects your changes when your instance is changed, that is, another object is set as value.

In your case as your property is a Model, you are only changing its properties and not its instance.

There are two exits, one that I do not advise much (But it works) and another more correct:

1º - Seven another object

  @action
  preencherTextoParam() async {
    PedidoVendaModel novoPedido = PedidoVendaModel(); //<---------
    Parametros parametros = Parametros();
    await parametros.buscarParametros();        
    if (parametros.codCliente != null){
      novoPedido.cODCLI = int.parse(parametros.codCliente);
      novoPedido.nomeCli = parametros.nomeCliente;
      lockIconeCliente = true;
      pedidoVenda = novoPedido;           //<---------
    }else      
      lockIconeCliente = false;
    if (parametros.codVendedor != null) {
      novoPedido.cODVEND = int.parse(parametros.codVendedor);
      novoPedido.nomeVend = parametros.nomeVendedor;
      lockIconeVendedor = true;
      pedidoVenda = novoPedido;          //<---------
    }else      
      lockIconeVendedor = false;
  }

2º - Turn Pedidovendamodel also into a Mobx Store

class PedidoVendaModel Store {
  @observable
  cODVEND

  @observable
  nomeVend

  [...]
}

That way, your Model will also be reactive and the Widget Observer you will be able to hear the changes made to your properties.