CODEWITHSUNDEEP
flutterasynchronous
Morgan Lu
Morgan Lu

Reputation: 11

Best way to handle async backend call Flutter

I have a class called FeedbackEdit that requires data in a variable called feedback to run correctly. I must get feedback from a backend API call. Currently, the code I have runs, but it shows an error for one second while it is retrieving data from the back-end. What would be the best way to fix this so it runs continuously?

class FeedbackEdit extends StatefulWidget {
  @override
  _FeedbackEditState createState() => _FeedbackEditState();
}

class _FeedbackEditState extends State<FeedbackEdit> {
  MyFeedback feedback;
  void initState() {
    super.initState();
    asyncGetFeedback();
  }

  void asyncGetFeedback() async {
    MyFeedback data = await fetchFeedback(http.Client());
    setState(() {
      feedback = data;
    });
  } 
  Widget build(BuildContext context) { ...

Upvotes: 1

Views: 199

Answers (1)

keremistan
keremistan

Reputation: 444

it's because you are rendering your view while still fetching data from the backend. To solve the issue, you should use FutureBuilder (see) in your build method. That will make your view to wait the response being fetched from backend.

A sample code I wrote in one of my projects:

FutureBuilder<List<SingleQuestion>>(
    future: retrieveFavedQuestions(questionIds),
    builder: (context, favQuestionssnapshot) {
        if (favQuestionssnapshot.connectionState == 
            ConnectionState.done) {
            if (favQuestionssnapshot.hasError) {
                // check error
                }

            if (favQuestionssnapshot.hasData) {
                // continue working with your data
            }
        }
    );

Upvotes: 1

Related Questions