title: Flutter - Provider not updating state stuck in Loading Screen
body: <p>I need expert opinion.
  I am new to flutter and I can't seem to solve this issue.</p>
  
  <p>Here is my issue:</p>
  
  <p>I am building an app that will connect to MQTT.
  Subscribe to a topic. Say topic A.
  After that, it will publish something to say Topic B.
  Then it'll receive some instructions in topic A.</p>
  
  <p>So when it is initializing MQTT and going through the process of connecting I want to show Loading Screen.
  When it completes the connection I want show Main Screen with just a text.</p>
  
  <p>This my provider handler;</p>
  
  <pre><code>import 'package:dnb/screens/loading_screen.dart';
  import 'package:dnb/screens/main_screen.dart';
  import 'package:flutter/material.dart';
  enum MQTTAppConnectionState { connected, disconnected, connecting }
  class MQTTAppState with ChangeNotifier {
    MQTTAppConnectionState _appConnectionState =
        MQTTAppConnectionState.disconnected;
    void setAppConnectionState(MQTTAppConnectionState state) {
      _appConnectionState = state;
      notifyListeners();
    }
    MQTTAppConnectionState get getAppConnectionState =&gt; _appConnectionState;
    Widget get getRoute {
      return _appConnectionState == MQTTAppConnectionState.connected
          ? MainScreen()
          : LoadingScreen();
    }
  }
  </code></pre>
  
  <p>Then this is my main.dart:</p>
  
  <pre><code>import 'package:dnb/services/MQTTAppState.dart';
  import 'package:dnb/services/MQTTService.dart';
  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  void main() =&gt; runApp(DigitalNoticeBoard());
  class DigitalNoticeBoard extends StatefulWidget {
    @override
    _DigitalNoticeBoardState createState() =&gt; _DigitalNoticeBoardState();
  }
  class _DigitalNoticeBoardState extends State&lt;DigitalNoticeBoard&gt; {
    @override
    void initState() {
      mqttService();
      super.initState();
    }
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        theme: ThemeData.dark(),
        home: ChangeNotifierProvider(
          create: (_) =&gt; MQTTAppState(),
          child: Scaffold(
            body: Consumer&lt;MQTTAppState&gt;(
                builder: (_, mqttAppState, __) =&gt; mqttAppState.getRoute),
          ),
        ),
      );
    }
  }
  </code></pre>
  
  <p>As you can see here in main.dart I am starting mqttService() in initState(). When I run the code this is what I get:</p>
  
  <pre><code>Performing hot restart...
  Syncing files to device POCOPHONE F1...
  Restarted application in 1,587ms.
  I/flutter (16925): ::Mosquitto client connecting....
  E/AccessibilityBridge(16925): VirtualView node must not be the root node.
  I/flutter (16925): ::OnConnected client callback - Client connection was sucessful
  I/flutter (16925): ::Mosquitto client connected
  I/flutter (16925): ::Subscription confirmed -&gt; topic -&gt; topicName
  I/flutter (16925): ::Change notification:: topic -&gt; &lt;topicName&gt;, payload -&gt;  &lt;00010000011000000000&gt; 
  </code></pre>
  
  <p>This expected output but my app is stuck in the loading screen. The moment it printed client connected my app should move to Main Screen from Loading Screen.
  This is what I'm doing in mqttService():</p>
  
  <pre><code>try {
    mqttAppState.setAppConnectionState(MQTTAppConnectionState.connecting); //Passing connecting
    await client.connect();
  } on Exception catch (e) {
    print('::client exception - $e');
    //client.disconnect();
  }
  </code></pre>
  
  <p>and then:</p>
  
  <pre><code>/// Check we are connected
  if (client.connectionStatus.state == MqttConnectionState.connected) {
    mqttAppState.setAppConnectionState(MQTTAppConnectionState.connected); //Passing connected
    print('::Mosquitto client connected');
  } else {
    /// Use status here rather than state if you also want the broker return code.
    print(
        '::ERROR Mosquitto client connection failed - disconnecting, status is ${client.connectionStatus}');
    client.disconnect();
  }
  </code></pre>