Custom navigation optimisation issue

Question

I'm using a custom navigation for my project by keeping a List<Widget> for pages in a provider class, and using the last element of that list as page to display.

The provider has methods for push (which adds a widget into the list) and pop (removes the last element of the list). And each method has notifyListener()

Everytime I push a widget into the list I'm able to see that widget as the page infront and calling pop() takes me back to the previous page.

here is the provider class,

class PaginationProvider extends ChangeNotifier {
  final List<Widget> _pagesStack = [const FirstPage()];

  List<Widget> get pagesStack=>_pagesStack;

  push(Widget page) {
    _pagesStack.add(page);
    notifyListeners();
  }

  pop(){
    _pagesStack.removeLast();
    notifyListeners();
  }

}

and the main page part,

 Widget build(BuildContext context) {
    return Consumer<PaginationProvider>(
        builder: (context, paginationProvider, _) {
      return Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: paginationProvider.pagesStack.last,
      );
    });
  }

The problem is that every time I go back to a page that page getting rebuilt as if it is being called for the first time. Which causes API calls associated with that page to recall.

I tried making those page stateful and stateless but no effect. How can I save the state of each page even after a new page is added to the list and removed.