Apologies if I am articulating it poorly but I have a main file called

Homescreen.dart

Two other files called

category_builder.dart

and

post_builder.dart
respectively.

In my homescreen file I have a scaffold being returned that has an app bar and a body. Now in the body I have a listview builder that builds my home screen with categories on the top and posts below it.

For ref heres my home screen code:

body: FutureBuilder(
        future: FirebaseFirestore.instance
            .collection('posts')
            .orderBy('createdDate', descending: true)
            .get(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return SizedBox(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: snapshot.data!.docs.length,
                itemBuilder: (context, index) {
                  if (index == 0) {
                    return Column(
                      children: [
                        Container(
                          width: MediaQuery.of(context).size.width,
                          padding: const EdgeInsets.fromLTRB(20, 10, 20, 0),
                          child: Row(
                            children: const [
                              Icon(
                                Icons.newspaper_outlined,
                                color: active,
                              ),
                              SizedBox(
                                width: 10,
                              ),
                              Text(
                                'Boards',
                                style: TextStyle(
                                    color: highlights,
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold),
                              ),
                            ],
                          ),
                        ),
                        SizedBox(
                          width: MediaQuery.of(context).size.width,
                          height: 95,
                          child: const BuildCat(),
                        ),
                        const SizedBox(
                          height: 5,
                        ),
                      ],
                    );
                  }
                  //index -= 1;
                  return SizedBox(
                    width: double.infinity,
                    child: PostBuilder(
                        postCallack: snapshot.data!.docs[index].data()),
                  );
                },
              ),
            );
          } else {
            return const Center(
                child: CircularProgressIndicator(
              color: Colors.white,
            ));
          }
        },
      ),

Now every time I scroll down at the bottom of the list, and when I scroll back up the category list is rebuild and reloaded, which is something I’m trying to avoid. I did try different thinks such as storing it in a variable and initializing it in initstate. But noting worked. Any help will be much apprectiated.

Also heres whats in Category file:

class BuildCat extends StatefulWidget {
  const BuildCat({super.key});

  @override
  State<BuildCat> createState() => _BuildCatState();
}

class _BuildCatState extends State<BuildCat> {
  List? catDataList;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    catdata();
  }

  Future<void> catdata() async {
    await FirebaseFirestore.instance
        .collection('boards')
        .doc('Boards')
        .get()
        .then((value) => catDataList = value.data()!['BoardsList']);
    setState(() {
      catDataList;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.separated(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.all(10),
          itemBuilder: (context, index) {
            if (catDataList == null) {
              return const Center(
                child: CircularProgressIndicator(color: Colors.white),
              );
            }

            return BuildCard(
                catDataList![index]['id'], catDataList![index]['img']);
          },
          separatorBuilder: (context, index) {
            return const SizedBox(width: 10);
          },
          itemCount: catDataList == null ? 0 : catDataList!.length),
    );
  }
}