flutterapifuturesetstate

setState not updating my star color because the FutureBuilder keeps rebuilding whenever I call setState



Positioned(
                                          top: 12,
                                          right: 12,
                                          child: SizedBox(
                                            height: 25,
                                            width: 25,
                                            child: CircleAvatar(
                                              backgroundColor: isGolden? Colors.amber :Colors.black87,
                                              child: IconButton(
                                                padding: EdgeInsets.zero,
                                                icon: Icon(Icons.star,),
                                                color: Color(0xFFFFFFD5),
                                                onPressed: (){
                                                  futureMessage = PostStoryFavoriteCreateDelete(snapshot.data!.data![index].id.toString());
                                                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(elevation: 20,content: FutureBuilder(
                                                    future: futureMessage,
                                                    builder: (context, snapshot){
                                                      if (snapshot.hasData) {
                                                        return Text("SuccessFully Updated");
                                                      } else if (snapshot.hasError) {
                                                        return Text("Failed To Update");
                                                      }
                                                      return const Text("Processing...");
                                                    },
                                                  ),));
                                                  setState(() {
                                                    isGolden == true ?isGolden = false:isGolden = true;
                                                  });
                                                },
                                              ),
                                            ),
                                          ),
                                        )
itemBuilder: (BuildContext context, index){
                            isGolden = snapshot.data!.data![index].favoriteStories!.length>0 ? true :false;

onPressed() don't update my state ie, change color of my star, I have to fetch api again in order to have updated color on my star. or I have to refresh my page.

Edit: My whole stateful widget.It is not updating the color of the star in realtime, have to refresh the page to get updated color of the star. or i have to refetch whole api to get updated golden star.

class DashBoard extends StatefulWidget {
  const DashBoard({Key? key}) : super(key: key);
  @override
  State<DashBoard> createState() => _DashBoardState();
}

class _DashBoardState extends State<DashBoard> {
  final drawerWidget = const DrawerWidget();
  late Future<StoriesMobilePrivate> futureStoriesMobilePrivate;
  late Future<StoryFavoriteCreateDelete> futureMessage;
  bool isGolden = false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    futureStoriesMobilePrivate = fetchFavoriteStoriesPrivate();
    isGolden = false;
    // isGolden = widget.isGolden;
  }
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      resizeToAvoidBottomInset: true,
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        centerTitle: true,
        elevation: 0.0,
        title: const Text(
          "My Talez",
          style: TextStyle(
              color: Colors.black87, fontWeight: FontWeight.bold, fontSize: 23),
        ),
        iconTheme: const IconThemeData(color: Colors.black87),
        actions: [
          IconButton(onPressed: (){},
              icon: Image.asset("assets/images/Frame.png"))
        ],
      ),
      drawer: drawerWidget,
      body: Container(
        width: MediaQuery.of(context).size.width,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/images/dashboard.png"),
            fit: BoxFit.cover,
          )
        ),
        child: Padding(
          padding: const EdgeInsets.only(top: 100),
          child: Column(
            children: [
              FutureBuilder(
                future: futureStoriesMobilePrivate,
                builder: (context, snapshot) {
                  if(snapshot.hasData){
                    return SingleChildScrollView(
                      child: SizedBox(
                        height: MediaQuery.of(context).size.height*.8,
                        child: GridView.builder(
                          padding: const EdgeInsets.all(20),
                          itemCount: snapshot.data!.data!.length,
                          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                            childAspectRatio: .85,
                            crossAxisCount: 2,
                            crossAxisSpacing: 8,
                            mainAxisSpacing: 8,
                          ),
                          itemBuilder: (BuildContext context, index){
                            isGolden = snapshot.data!.data![index].favoriteStories!.length>0 ? true :false;
                            return Card(
                              elevation: 7,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10),
                              ),
                              color: const Color(0xFF609FFB),
                              child: Container(
                                child: Column(
                                  children: [
                                    Stack(
                                      children: [
                                        snapshot.data!.data![index]
                                            .userStoryPages![0].mergedImage == null?
                                        Container(
                                          height: 160,
                                          width: 160,
                                          margin: const EdgeInsets.only(top: 8, right: 8, left: 8, bottom: 1),
                                          decoration: const BoxDecoration(
                                            color: Colors.white,
                                              image: DecorationImage(
                                                fit: BoxFit.fitHeight,
                                                image: AssetImage("assets/images/image 14.png"),
                                              )
                                          ),
                                        ):Container(
                                          height: 160,
                                          width: 160,
                                          margin: const EdgeInsets.only(top: 8, right: 8, left: 8, bottom: 1),
                                          decoration: BoxDecoration(
                                              image: DecorationImage(
                                                  fit: BoxFit.cover,
                                                  image: NetworkImage(snapshot.data!.data![index]
                                                      .userStoryPages![0].mergedImage.toString())
                                              )
                                          ),
                                        ),
                                        Positioned(
                                          top: 12,
                                          right: 12,
                                          child: SizedBox(
                                            height: 25,
                                            width: 25,
                                            child: CircleAvatar(
                                              backgroundColor: isGolden? Colors.amber :Colors.black87,
                                              child: IconButton(
                                                padding: EdgeInsets.zero,
                                                icon: Icon(Icons.star,),
                                                color: Color(0xFFFFFFD5),
                                                onPressed: (){
                                                  futureMessage = PostStoryFavoriteCreateDelete(snapshot.data!.data![index].id.toString());
                                                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(elevation: 20,content: FutureBuilder(
                                                    future: futureMessage,
                                                    builder: (context, snapshot){
                                                      if (snapshot.hasData) {
                                                        return Text("SuccessFully Updated");
                                                      } else if (snapshot.hasError) {
                                                        return Text("Failed To Update");
                                                      }
                                                      return const Text("Processing...");
                                                    },
                                                  ),));
                                                  // Future.delayed(Duration(microseconds: 2500),(){
                                                  //   setState(() {
                                                  //     futureStoriesMobilePrivate = fetchFavoriteStoriesPrivate();
                                                  //   });
                                                  // });
                                                  setState(() {
                                                    setState(() => isGolden =! isGolden);
                                                  });
                                                },
                                              ),
                                            ),
                                          ),
                                        )
                                      ],
                                    ),
                                    Padding(
                                      padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 8),
                                      child: Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: [
                                          Row(
                                            children: [
                                              // SizedBox(width: 7,),
                                              Text(snapshot.data!.data![index].title.toString(),
                                                style: TextStyle(color: Colors.white),
                                              ),
                                            ],
                                          ),
                                          Row(
                                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                            children: [
                                              const Icon(Icons.share,
                                                size: 18,
                                                color: Colors.white,),
                                              const SizedBox(width: 5,),
                                              Image.asset("assets/images/delete 6.png",
                                                height: 22,
                                              )
                                            ],
                                          ),
                                        ],
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                        ),
                      ),
                    );
                  } else if (snapshot.hasError){
                    return Text(snapshot.error.toString());
                  }
                  // By default, show a loading spinner.
                  return const CircularProgressIndicator();
                }
              ),
              Card(
                color: const Color(0xFFF96162),
                elevation: 8,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(4),
                ),
                child: SizedBox(
                  height: 55,
                  width: MediaQuery.of(context).size.width*.84,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Image.asset("assets/images/drawer icons/script 1.png"),
                      const SizedBox(width: 7,),
                      const Text("Create My Talez",
                        style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                      ),
                    ],
                  )
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

not be able to change the state of the star color because the FutureBuilder keeps rebuilding whenever you call setState


Solution

  • try this:

     setState(() {
       isGolden == true ?isGolden = false:isGolden = true;
                                                      }
    

    you are just checking if it is true or false , you were not changing it's value