[SOLVED] Flutter Hooks with Realtime

    print('building');

    ref.watch(locationsProvider);

    /// Locations is a future, so when the data comes back the build method rebuilds.
    final locations = ref.watch(locationsListController); 

    /// Realtime variables
    RealtimeSubscription? subscription;
    final client = ref.read(appwriteClientProvider);
    final realtime = Realtime(client);
    final subscriptionActive = useState(false);

    useEffect(() {

      /// Subscribe to realtime only once here. The issue is when the locations provider
      /// finshes getting the data, this useEffect method reruns and throws a null check         /// error
      /// when disposing in the return method.

      subscriptionActive.value = true;
      subscribe(
          ref: ref, subscriptionActive: subscriptionActive, realtime: realtime);

      return () {
        /// When i leave the page this line tries to close the subscription
        /// but throws a null check error.
        subscription!.close();
      };
    });

    useValueChanged<bool, void>(subscriptionActive.value, (_, __) {
      if (subscriptionActive.value == false) {
        /// The done method executed from the subscribe method.
        /// resubscribe here
        subscriptionActive.value = true;
        subscribe(
            ref: ref,
            subscriptionActive: subscriptionActive,
            realtime: realtime);
      }
    });```

    required WidgetRef ref,
    required ValueNotifier<bool> subscriptionActive,
    required Realtime realtime,
  }) {

    /// Subscribe to the locations documents
    RealtimeSubscription subscription = realtime.subscribe([
      'databases.default.collections.locations.documents',
    ]);

    /// Listen to realtime stream
    subscription.stream.listen(
      (response) {
        /// Get incoming event and filter out the collection and type of event
        List<String> parts = response.events[0].split('.');
        String collection = parts[3];
        String event = parts.last;

        print(parts);
        print(collection);
        print(event);
      },
      onDone: () {
        /// This line throws a ValueNotifer<bool> was used after being disposed.
        subscriptionActive.value = false;
      },
    );
  }```

            backgroundColor: AppColors.background,
            body: locations.when(
                  data: (data) { ... Listview builder here using data returned

      /// Subscribe to realtime only once here. The issue is when the locations provider
      /// finshes getting the data, this useEffect method reruns and throws a null check error
      /// when disposing in the return method.
      ///
      locations.whenData((value) {
        subscriptionActive.value = true;
        subscribe(
            ref: ref,
            subscriptionActive: subscriptionActive,
            realtime: realtime);
      });

      return () {
        /// When i leave the page this line tries to close the subscription
        /// but throws a null check error.
        ///

        locations.whenData((value) => subscription!.close());
      };
    });```

      /// Subscribe to realtime only once here. 
      if (!locations.isLoading) {
        subscriptionActive.value = true;
        subscribe(
            ref: ref,
            subscriptionActive: subscriptionActive,
            realtime: realtime);
      }

      return () {
        /// Getting a null check error here when i exit the page.
        if (!locations.isLoading) {
          subscription!.close();
        }
      };
    });```