Flutter, navigation animation not smooth when I was trying to fetch http response during the animation

Question

Maybe the title is a bit confuse, here is the problem.

When I navigate to a new page, I will send an http request and show the loading spinner, the page content will be replaced when I get the http response back.

But sometimes, the http response is too fast, I always get the response when the animation have not completed yet, so the loading spinner will be replaced to the page content during the animation.

In the moment of replacing, the animation will be stuck a little bit.

I'm trying to send the http request after the animation complete, but I haven't find the way to do it.

Dose anyone has any idea to solve this issue ?

push to new page:

Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (BuildContext context) => NewPage(id)),
            );

NewPage Wigets:

class _NewPageState extends State<NewPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
  body: StreamBuilder(
    stream: Repository().getItem(widget.id),
    builder: (context, AsyncSnapshot<Model> itemsSnapshot) {
      if (itemsSnapshot.hasError) {
         return ErrorWigets();
      }

     if (itemsSnapshot.data == null) {
         return Spinner();
     }


      return ListView(
        children: <Widget>[
           // page content
        ],
      );
    },
  ),
);
}
}

Http request:

class Repository {
  Observable<Model> getItem(String id) {
    return Observable.fromFuture(http.get(
        'api_url${id}'))
    .map((response) {
  if (response.statusCode == 200) {
    return Model.fromJson(json.decode(response.body));
  } else {
    throw Exception('request Failed');
  }
});

My current approach is to use the streambuilder, so it will make the http request immediately when I'm trying to navigate to a new page.