Searching for a location in Autocomplete search bar and selecting it , makes the floating card shows loading indicator infinitely - IOS Specific

[maheshwara-bwd]

The Floating card shows the loading indicator infinitely when i search for a location in search bar and selecting it. I could see that the SearchingState is not set to Idle after a location is found. But the floatingCard works perfectly when the pin is moved and the selected location is shown correctly

Can you pls provide a quick fix on this

Thanks in advance

[ZikunWang24]

I encountered this issue on iOS too. However, it worked fine on Android.

[maheshwara-bwd]

I encountered this issue on iOS too. However, it worked fine on Android.

Yes, It works fine in android, only IOS have the issue

[ZikunWang24]

Any clue how to work around this?

[maheshwara-bwd]

Any clue how to work around this?

Yes, i used a work around by using the 'selectedPlaceWidgetBuilder' and providing my own floating card. In selectedPlaceWidgetBuilder function we can get the SearchingState and PickResult. The default floating card shows the Loading indicator when the state is Searching , In our case SearchingState is not changed to Idle, I did manually change the State to Idle if we have any data in PickResult. Hope this helps.

[ZikunWang24]

Any clue how to work around this?

Yes, i used a work around by using the 'selectedPlaceWidgetBuilder' and providing my own floating card. In selectedPlaceWidgetBuilder function we can get the SearchingState and PickResult. The default floating card shows the Loading indicator when the state is Searching , In our case SearchingState is not changed to Idle, I did manually change the State to Idle if we have any data in PickResult. Hope this helps.

Thanks so much!

[ZikunWang24]

I modified my code and it works fine most of the time, but sometimes it falsely thinks I am dragging the pin (even I am not) and stuck at the following situation:

I use something like this to check the state

selectedPlace == null ? Center( child: CircularProgressIndicator()) : Column( ...

Have you encountered something similar?

[maheshwara-bwd]

Yeah, i'm also facing the same issue, haven't found a solution yet. Pls post here, if you do find any workarounds.

[alejandroaap]

The problem is that the call provider.placeSearchingState = SearchingState.Idle which is done after the_moveTo (provider.selectedPlace.geometry.location.lat, provider.selectedPlace.geometry.location.lng);is not notifying listeners to update status. The solution that I have done is to make a delay of 500 milliseconds and this has solved the problem.

Before: provider.placeSearchingState = SearchingState.Idle Then: Future.delayed (Duration (milliseconds: 500), () => provider.placeSearchingState = SearchingState.Idle);

@fysoul17 Can you implement this solution or can you propose a different solution?

[abdullah-khudher]

I fixed it by adding this

          bool changeStateManually = false;
          if (selectedPlace != null){changeStateManually = true;}
          else{changeStateManually = false;}

in selectedPlaceWidgetBuilder function.

and add changeStateManually == false with state condation will be state == SearchingState.Searching && changeStateManually == false

full code of the function

 selectedPlaceWidgetBuilder: (_, selectedPlace, state, isSearchBarFocused) {
          bool changeStateManually = false;
          if (selectedPlace != null){changeStateManually = true;}
          else{changeStateManually = false;}
          return isSearchBarFocused
              ? Container(color: Colors.red)
          // Use FloatingCard or just create your own Widget.
              : FloatingCard(
            bottomPosition: 0.0,    // MediaQuery.of(context) will cause rebuild. See MediaQuery document for the information.
            leftPosition: 0.0,
            rightPosition: 0.0,
            width: MediaQuery.of(context).size.width,
            height: 300,
            borderRadius: BorderRadius.circular(12.0),
            child: state == SearchingState.Searching  && changeStateManually == false?
            Center(child: Text('wait !!!')) :
            Column(
              children: [
                Text(selectedPlace.formattedAddress),
                RaisedButton(onPressed: () { print("do something with [selectedPlace] data"); },),
              ],
            ),
          );
        },

[abdulrehmank7]

I created a utility class using Google place rest APIs - https://arkapp.medium.com/flutter-and-google-map-for-beginners-part-1-fdba4ab22148