CODEWITHSUNDEEP
flutterdart
K.k
K.k

Reputation: 489

Loading state via ChangeNotifierProvider is not showing

This is my code. I want to show CircularprogressIndicator when tapped the SpeedDialChild. So I made ChangeNotifier as below. And show CircularprogressIndicator as stack using Consumer. But Consumer doesn't upadate my ui. How can solve this problem?

Widget build(BuildContext context) {
    return ChangeNotifierProvider<loading>(
      create: (_) => loading(),
      child: Scaffold(
        body: Stack(
          children: [
            Container(
              child: GoogleMap(
                initialCameraPosition: _currentlo,
              ),
            ),
            Consumer<loading>(
              builder: (context, value, child) => value.getloading() ?
              Center(child: CircularProgressIndicator()) : Container(),
            ),
          ],
        ),
        floatingActionButton: Builder(
          builder: (BuildContext context){
            return SpeedDial(
              children: [
                SpeedDialChild(
                    backgroundColor: Colors.white,
                    child: Icon(Icons.refresh, color: Colors.black,),
                    onTap: (){
                      Provider.of<loading>(context, listen: false).yesloading();
                      refreshMarkers();
                      Provider.of<loading>(context, listen: false).noloading();
                    }
                ),
              ],
            );
          },
        ),
      ),
    );
  }

class loading with ChangeNotifier{
  bool _isloading = false;

  bool getloading(){
    return _isloading;
  }

  void yesloading(){
    _isloading = true;
    notifyListeners();
  }

  void noloading(){
    _isloading = false;
    notifyListeners();
  }
}

Upvotes: 0

Views: 985

Answers (1)

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126894

This happens because you set your loading variable to false again immediately (synchronously):

Provider.of<loading>(context, listen: false).noloading();

If you remove this line, your loading indicator will be displayed.

You probably want to await your refreshMarkers call instead. If refreshMarkers returns a Future, you should be able to do that:

onTap: () async {
  Provider.of<loading>(context, listen: false).yesloading();
  await refreshMarkers();
  Provider.of<loading>(context, listen: false).noloading();
}

Now, you will see your loading indicator while refreshMarkers is completing.

Learn about asynchronous programming in Dart.
Furthermore, you can and probably should take a look at the Effective Dart: Style guide in order to make your code readable.

Upvotes: 1

Related Questions