Function from previous screen still calling when pushed to new Screen in Flutter

Question

I am new to flutter. I have two screens. My first screen is Stateful, it consists of a list view, which is developed using FutureBuilder, when I select an item, I am pushing the app to a new screen which is also of Stateful type.

When I am moving to the new screen, the functions from previous screen are still calling and I do not know why it is happening.

This is what I have done:

InkWell(
         onTap: () {
                      Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) => QuizDetail(
                            quizID: featuredContests.id,
                          ),
                        ),
                      );
                    },
                    child: Card(...))// InkWell Closed

Next Screen

class QuizDetail extends StatefulWidget {

  final int quizID;
  // In the constructor, require a QuizID.
  QuizDetail({Key key, @required this.quizID}) : super(key: key);

  @override
  _QuizDetailState createState() => _QuizDetailState();

}

class _QuizDetailState extends State<QuizDetail> {
  @override
  void initState() {

    super.initState();

    getQuizDetail(quizID: widget.quizID);

  }

It calls this function, but then also it calls the function from the previous screen which is used to fetch data from 'A' Network and the initState consists of a function which is used to fetch data from API 'B', but the data is not received from 'B', but comes from 'A' and entire process is dismissed. Can anyone help?

score 1 · Answer 1 · answered Aug 22 '19 at 11:18

1

If you are not going to go back to the first screen after pushing the new screen, try using Navigator.pushReplacement() instead of Navigator.push().

Navigator.push() only pushes the new screen above the current one. It does not discard the screen underneath and hence if you're rebuilding the widget tree at some point in your code, all the screens in the call stack will get rebuilt.

Navigator.pushReplacement() pops the current topmost screen and pushes the new one in its place.

Also, if you plan on going back to the first screen, you can mark the onTap method as async and use await to force your program to wait till the QuizDetail screen is popped using Navigator.pop().

More info about navigation in flutter can be found here.

Example -

onTap: () async{
  await Navigator.push(
    //Rest of the code is same.
  );
}

answered Aug 22 '19 at 11:18

bytesizedwizard

5,529
3
17
39

I have this `Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: IconButton( icon: Icon( Icons.arrow_back, color: Color(0xff6D6E70), ), onPressed: () async { await Navigator.pop(context); }), actions: [...` and await says `Awaits only futures.` – Rob13 Aug 22 '19 at 12:43
My apologies if I didn't make it clear in the answer. You need to use `await` before `Navigator.push()` and not `Navigator.pop()`. – bytesizedwizard Aug 22 '19 at 12:48
Also, did you try the first method using `Navigator.pushReplacement()` ? – bytesizedwizard Aug 22 '19 at 12:51
Yes, I have tried pushReplacement and also put await before `Navigator.push`, but somehow it was calling again, I am trying `FutureBuilder` now, but it is kind of unexpected situation. – Rob13 Aug 22 '19 at 13:01

Function from previous screen still calling when pushed to new Screen in Flutter

1 Answers1