I'm trying to manage the state of a button in between switching bottom tabs, but each time I leave one tab to another the state of the button is returned to the initial state

here are my code snippets:

//this is the function returning the list of cards containing the button whose state i hope to manage
 browseCard(List<AllJobsResult> itemList) {
    final jobOverviewController = Get.put(JobApplicationOverviewController());
    return ListView.builder(
      controller: jobPreferenceController.scrollController.value,
      shrinkWrap: true,
      itemCount: itemList.length,
      itemBuilder: (context, index) {
        var datas = itemList[index];
        var splitDate = datas.dateCreated.toString().split(".");
        var dateCreated = splitDate[0].split(" ");
        return itemList.length == 0
            ? CircularLoader()
            : GestureDetector(
                onTap: () async {
                  ...
                },
                child: Container(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 10.0,
                      vertical: 5.0,
                    ),
                    child:SaveJobBtn(
                                    isSaved: datas.isSaved,
                                    jobID: datas.id,
                                    showText: true,
                                  )
                            
                              )
  }

and this is the custom save button widget

class SaveJobBtn extends StatefulWidget {
  bool isSaved;
  final int jobID;
  final bool showText;

  SaveJobBtn({Key key, this.isSaved, this.jobID, this.showText})
      : super(key: key);
  @override
  _SaveJobBtnState createState() => _SaveJobBtnState();
}

class _SaveJobBtnState extends State<SaveJobBtn> {
  bool isSavedJOb = false;

  @override
  void initState() {
    isSavedJOb = widget.isSaved;
    super.initState();
  }

  var ctr = Get.put(BrowseAllJobsController());

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          ctr.saveJob(widget.jobID);
          isSavedJOb = !isSavedJOb; //toggling button
        });
      },
      child: Container(
        padding: EdgeInsets.all(6),
        decoration: BoxDecoration(
            color: isSavedJOb == false ? Colors.transparent : Color(0xffF6FCFF),
            borderRadius: BorderRadius.circular(4)),
        child: Row(children: [
          isSavedJOb == false
              ? SvgPicture.asset(
                  'assets/svgs/bookmark.svg',
                  color: isSavedJOb == false ? enumGrey3 : kPrimaryColor,
                  height: 20,
                )
              : Container(
                  height: 20,
                  padding: EdgeInsets.symmetric(horizontal: 4),
                  child: SvgPicture.asset(
                    'assets/svgs/bookmark_colored.svg',
                    height: 16,
                  ),
                ),
          widget.showText
              ? Text(
                  isSavedJOb == false ? ' Save' : ' Saved',
                  style: TextStyle(
                    fontFamily: 'GoogleFonts.dmSans',
                    fontWeight: FontWeight.w400,
                    color: isSavedJOb == false ? enumGrey3 : kPrimaryColor,
                    fontSize: 14,
                  ),
                )
              : SizedBox(),
        ]),
      ),
    );
  }
}

My Question now lies: How do I use GetX to update the state of the button so I don't get false each time I rebuild?

CodePudding user response：

You can put a getxbuilder in listview:

browseCard(List<AllJobsResult> itemList) {
    final jobOverviewController = Get.put(JobApplicationOverviewController());
    return GetX<JobApplicationOverviewController>(
        builder: (jaoc) =>

ListView.builder(
      controller: jaoc.scrollController.value,
      shrinkWrap: true,
      itemCount: itemList.length,
      itemBuilder: (context, index) {
        var datas = itemList[index];
        var splitDate = datas.dateCreated.toString().split(".");
        var dateCreated = splitDate[0].split(" ");
        return itemList.length == 0
            ? CircularLoader()
            : GestureDetector(
                onTap: () async {
                  ...
                },
                child: Container(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 10.0,
                      vertical: 5.0,
                    ),
                    child:SaveJobBtn(
                                    isSaved: datas.isSaved,
                                    jobID: datas.id,
                                    showText: true,
                                  )
                            
                              )
    );
  }