how to change the circular progress indicator after loading the data Flutter

the circular progress indicator dont disappear after loading the data .

this is my code where im using the progress indicator

and when i reach the end of the grid view it should load the other data but

the progress indicator makes the same thing it loads and dont disappear after getting data .

i tried to make a boolean isLoading and tried to change it true or false but couldnt find the place where i can do this

int pageNumber = 1;
String filterName = '';

class ShowsListDesign extends StatefulWidget {
  @override
  _ShowsListDesignState createState() => _ShowsListDesignState();
}

class _ShowsListDesignState extends State<ShowsListDesign> {
  ScrollController controller = ScrollController();
  ServicesClass service = ServicesClass();
  bool isLoading = false;

  @override
  void initState() {
controller.addListener(listenScrolling);
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
  future: service.getFilms('posts/$pageNumber/$filterName'),
  builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
    if (snapshot.hasData) {
      return Stack(
        alignment: Alignment.bottomCenter,
            children: [
              GridView.builder(
                itemCount: snapshot.data.length,
                gridDelegate: const             
SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 250,
                  crossAxisSpacing: 24,
                  mainAxisSpacing: 24,
                  childAspectRatio: (3 / 5),
                ),
                controller: controller,
                itemBuilder: (context, index) {
                  return FilmsCard(
                    image: snapshot.data[index]['thumbnailUrl'],
                    title: snapshot.data[index]['title'],
                    year: snapshot.data[index]['year'],
                  );
                },
              ),
              FloatingActionButton(
                onPressed: () {
                  scrollUp();
                },
                elevation: 24,
                backgroundColor: PRIMARY,
                child: const Text(
                  'Scroll Up',
                  textAlign: TextAlign.center,
                  style: TextStyle(
                    fontSize: 12,
                  ),
                ),
              ),
            ],
          );
        } else {
          return const Center(
            child: CircularProgressIndicator(),
          );
        }
      },
    );
  }

  void scrollUp() {
    const double start = 0;
    controller.animateTo(start,
        duration: const Duration(seconds: 1, milliseconds: 50),
        curve: Curves.easeIn);
  }

  void listenScrolling() {
    if (controller.position.atEdge) {
      final isTop = controller.position.pixels == 0;
      if (isTop) {
      } else {
        setState(() {
          pageNumber++;

          ShowsListDesign();
        });
      }
    }
  }
}

It is possible to get errors or no data on future, it will be better with handling those states.

builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
  if (snapshot.connectionState == ConnectionState.waiting) {
    return const Center(
      child: CircularProgressIndicator(),
    );
  } else if (snapshot.hasData &&
      snapshot.connectionState == ConnectionState.done) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [...],
    );
  } else if (!snapshot.hasData &&
      snapshot.connectionState == ConnectionState.done) {
    return const Text("couldn't find any data");
  } else if (snapshot.hasError) {
    return Text("${snapshot.error}");
  } else {
    return const Text(" any other");
  }
},

More about FutureBuilder class.