Solved - flutter - setState does not update UI in the first time

The setState method in my app is triggered when a submit button to a dialog is clicked

            TextButton(
              child: Text("SUBMIT"),
              onPressed: () async {
                if (comment != null || rating != null) {
                  setState(() {
                    editReview();
                  });
                } else {
                  setState(() {
                    submitReview();
                  });
                }
              },
            ),

The edit review and submit review function is called:

  submitReview() async {
    final user = Provider.of<UsersProvider>(context, listen: false).user;
    final restaurant =
        Provider.of<RestaurantProvider>(context, listen: false).restaurant1;
    final comment = commentText.text;
    final rating = ratingValue;

    bool response =
        await Provider.of<RestaurantReviewProvider>(context, listen: false)
            .addReview(restaurant.id!, user.id!, rating, comment);

    if (response) {
      dx.showSuccessMsg(context, "Completed", "Thanks for your feedback");
    } else {
      dx.errorAlert(context, "Already submit the feedback.");
    }
  }

  editReview() async {
    final review =
        Provider.of<RestaurantReviewProvider>(context, listen: false).review;
    final user = Provider.of<UsersProvider>(context, listen: false).user;
    final restaurant =
        Provider.of<RestaurantProvider>(context, listen: false).restaurant1;
    final comment = commentText.text;
    final rating = ratingValue;

    bool response = await Provider.of<RestaurantReviewProvider>(context,
            listen: false)
        .updateReview(review.id!, restaurant.id!, user.id!, rating, comment);

    if (response) {
      dx.showSuccessMsg(
          context, "Update Successfull", "Your feedback has been updated!");
    } else {
      dx.errorAlert(context, "Invalid");
    }
  }

This is the UI I want to show the data:

  Widget showComment(BuildContext context, List<dynamic> data) {
    return SizedBox(
        child: ListView.builder(
            itemCount: data.length,
            shrinkWrap: true,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                margin: EdgeInsets.only(top: 10.h),
                padding: EdgeInsets.all(10.h),
                width: MediaQuery.of(context).size.width,
                height: 80.h,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                      children: [
                        Text(
                          "${data[index].userFullName}",
                          style: TextStyle(
                            fontSize: 12.h,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Spacer(),
                        RatingBar(
                          ignoreGestures: true,
                          initialRating: data[index].rating,
                          allowHalfRating: false,
                          direction: Axis.horizontal,
                          itemCount: 5,
                          itemSize: 15,
                          ratingWidget: RatingWidget(
                            full:
                                Icon(Icons.star_rounded, color: Colors.yellow),
                            half: Icon(Icons.star_half_rounded,
                                color: Colors.yellow),
                            empty: Icon(Icons.star_border_rounded,
                                color: Colors.black),
                          ),
                          onRatingUpdate: (rating) {},
                        ),
                      ],
                    ),
                    SizedBox(height: 4.h),
                    Text(
                      DateFormat('dd/MM/yyyy').format(data[index].createdDate),
                      style: TextStyle(fontSize: 8.h, color: Colors.grey),
                    ),
                    SizedBox(height: 10.h),
                    Text(
                      "${data[index].comment}",
                      style: TextStyle(
                        fontSize: 10.h,
                      ),
                    ),
                  ],
                ),
              );
            }));
  }

The UI updates only if I click the submit button two times, while the submitReview and editReview function is called and evaluated normally.

i think you should await where you call your functions before calling setState, you can try the code below.

 TextButton(
              child: Text("SUBMIT"),
              onPressed: () async {
                if (comment != null || rating != null) {
                 
                   await editReview();
                 setState(() {
                  });
                } else {
                  
                   await submitReview();
                   setState(() {
                  });
                }
              },
            ),

i hope this helps.