flutterdartobservablemobx

How to fix "No observables detected in the build method of Observer" in Flutter MobX?


I'm encountering the "No observables detected in the build method of Observer" error in my Flutter MobX project. Here's the relevant code and error message.

Error Message:

I/flutter (15344): No observables detected in the build method of Observer 
I/flutter (15344): Observer constructed from: Cronometro.build (package:braintrinig/components/cronometro.dart:29:11) 
...

Code:

class Cronometro extends StatelessWidget {
  const Cronometro({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final store = Provider.of<PomodoroStore>(context);

    return Container(
      color: store.isWorking() ?  Colors.redAccent : Colors.greenAccent,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
          store.isWorking() ? "Time to work" : "Time to rest",
        style: TextStyle(
          fontSize: 40,
          color: Colors.white
            ),
          ),
          SizedBox(height: 20,),
          Observer(
            builder: (_) => Text(
            '${store.minutos.toString().padLeft(2, '0')}:${store.segundos.toString().padLeft(2, '0')}',
            style: TextStyle(
                fontSize: 120,
                color: Colors.white
            ),
          ),),
          SizedBox(height: 20,),
          Observer(builder: (_) => SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                if(!store.start)
                  Padding(
                    padding: const EdgeInsets.only(right: 10),
                    child: CronometroButton(
                      text: 'Start',
                      icon: Icons.play_arrow,
                      click: store.startworking,
                    ),
                  ),
                if(store.start)
                  Padding(
                    padding: const EdgeInsets.only(right: 10),
                    child: CronometroButton(
                      text: 'Stop',
                      icon: Icons.stop,
                      click: store.stop,
                    ),
                  ),
                Padding(
                  padding: const EdgeInsets.only(left: 10),
                  child: CronometroButton(
                    text: 'Restart',
                    icon: Icons.refresh,
                    click: store.restart,
                  ),
                ),
              ],
            ),
          ),
          ),
        ],
      ),
    );
  }
}

Context: The error occurs within my Cronometro widget. I believe the issue is related to how I'm using MobX observables, but I'm unsure how to resolve it.


Solution

  • Remove Observers when using provider. Observer is used with MobX.