Set state of markers when a condition become true

Question

I have a marker in map that shows the state of a place open or close. I am using the following method to check every place if it is open or close.

bool chekIfIsOpen() {
          var now = DateTime.now();
          int hour = int.parse(now.hour.toString() + mintues);
          if (hour >= horaireOfToDay && hour <= horaireOfToDay)
            return true;
          else
            return false;
        }




setState(() {
      _markers.add(Marker(
          markerId: MarkerId(
              p.geoPoint.longitude.toString()),
          position: point,
          onTap: ,
          icon: status == Status.open
              ? BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen)
                  : BitmapDescriptor.defaultMarkerWithHue(
                      BitmapDescriptor.hueRed)));
    });

Now my question is, how can I update the state of markers automatically when the var now = DateTime.now.hour() is between the given hours without further user interaction?

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

A. Time Comparison

As a human, we always think it will be more straight-forward to compare hour value of 2 time windows.

But, actually, for dart, it is faster to compare two time windows along with its minutes and seconds.

To get this privilege, we need to convert all timestamp format, which usually comes with String type.

We will convert it to DateTime by using this syntax :

    var someTimestamp = "2020-06-19 09:00:00";
    var someDatetimeObject = DateTime.parse(someTimestamp); // 9 a.m.

or, if you are new to dart, you can make it more intuitive by pairing their Type.

In this example below, we will replace var which shows dynamic variable, to more static type :

    String someTimestamp = "2020-06-19 09:00:00";
    DateTime someDatetimeObject = DateTime.parse(someTimestamp); // 9 a.m.

In short, I think you will have this part of code :

A.1 Final Code

  bool checkIfIsOpen() {
    var horaireOfTodayOpen = DateTime.parse("2020-06-19 09:00:00"); // 9 a.m.
    var horaireOfTodayClose = DateTime.parse("2020-06-19 17:00:00"); // 5 p.m.
    var now = new DateTime.now();
    if (now.isBefore(horaireOfTodayClose) && now.isAfter(horaireOfTodayOpen)) {
      return true;
    } else {
      return false;
    }
  }

A.2 Detail Explanation Steps

1. First you need to have two time window

For example, some organization opens at 9 a.m. and closes at 5 p.m

    var horaireOfTodayOpen = DateTime.parse("2020-06-19 09:00:00"); // 9 a.m.
    var horaireOfTodayClose = DateTime.parse("2020-06-19 17:00:00"); // 5 p.m.

2. Then you need to have current time

Using standard syntax :

    var now = new DateTime.now();

3. Lastly, compare it using instance method

You can read it in this official docs page

    if (now.isBefore(horaireOfTodayClose) && now.isAfter(horaireOfTodayOpen)) {
      return true;
    } else {
      return false;
    }
  }

B. Periodically Refresh Page / Widget

We need to trigger setState, let say every 5 seconds.

1. Make Timer Property and init the with it

import 'dart:async'; // add this

class MapMarkerPage extends State<MyHomePage> {
  Timer timer; // add this

  @override
  void initState() {
    super.initState();
    const oneSec = const Duration(seconds: 5); // add this
    timer = new Timer.periodic(oneSec, (Timer t) => refreshMarkers()); // add this
  }

...
}

2. Loop Through Possible Markers

Please note, in this section, I will post PSEUDUCODE related to markers, because I don't know specifically you solve this.

After we have refreshMarkers, in first section, we now know, that it will be executed every 5 seconds.

Now, we need to define its business-logic :

import 'dart:async';

class MapMarkerPage extends State<MyHomePage> {
  List<dynamic> markers = []; // add this

  bool checkIfIsOpen(horaire) {
    var horaireOfTodayOpen = DateTime.parse("2020-06-19 09:00:00"); // 9 a.m.
    var horaireOfTodayClose = DateTime.parse("2020-06-19 17:00:00"); // 5 p.m.
    var now = new DateTime.now();
    if (now.isBefore(horaireOfTodayClose) && now.isAfter(horaireOfTodayOpen)) {
      return true;
    } else {
      return false;
    }
  }

  void refreshMarkers() {
    List<Widget> tempMarkers = [];

    // Loop through possible organization
    // Pseudocode
    for (horaire in horaires){  
      if checkIsOpen(horaire){
        tempMarkers.add(Marker(
          markerId: MarkerId(
              p.geoPoint.longitude.toString()),
          position: point,
          onTap: ,
          icon: status == Status.open
              ? BitmapDescriptor.defaultMarkerWithHue(BitmapDescriptor.hueGreen)
                  : BitmapDescriptor.defaultMarkerWithHue(
                      BitmapDescriptor.hueRed)));
      }
    }

    markers = tempMarkers; // Renew markers 
    setState(() {}); // Force Widget to Update
  }
}

I hope you will understand the main idea, the final code may not 100% applicable to your app, but I hope it will be clearer now

thanks for you answer , the problem is how to call this function dynamicly, late say i am in the place X time is 1659 so i is open but i still in the same page a minute without refrshing so normally the place is been closed , how to change this state — Merym, Jun 19 '20 at 03:42
so without further user interaction, you need to trigger setState periodically ? Is that what you mean ? — ejabu, Jun 19 '20 at 03:44
I just updated in addition to Refreshing functionality. You need to see this ref https://stackoverflow.com/questions/54610121/flutter-countdown-timer, and later add dispose method by yourself — ejabu, Jun 19 '20 at 04:15