My page overlaps when I switch between screens

https://www.veed.io/view/a97effbf-7aad-4c0a-8fd7-8fce2be4808e?sharingWidget=true&panel=share

I hate how when I slide between screens the layout overlaps to the next screen before rendering what's supposed to be there. How do I fix this?
This is the code for the page:

class StallPage extends StatefulWidget {
  final Stall stall;

  const StallPage({super.key, required this.stall});

  @override
  State<StallPage> createState() => _StallPageState();
}

class _StallPageState extends State<StallPage> {
  var selected = 0;
  final pageController = PageController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff392850), //kBackground,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CustomAppBar(
            Icons.arrow_back_ios_outlined,
            Icons.search_outlined,
            leftCallback: () => Navigator.of(context).pop(),
            rightCallback: () => Navigator.of(context).pushNamed(searchRoute),
          ),
          StallInfo(
            stall: widget.stall,
          ), //
          FoodList(
            selected,
            (int index) {
              setState(() {
                selected = index;
              });
              pageController.jumpToPage(index);
            },
            widget.stall,
          ),
          Expanded(
            child: FoodListView(
              selected,
              (int index) {
                setState(() {
                  selected = index;
                });
              },
              pageController,
              widget.stall,
            ),
          ),
          Container(
            padding: EdgeInsets.symmetric(horizontal: 25),
            height: 60,
            child: SmoothPageIndicator(
              controller: pageController,
              count: widget.stall.menu.length,
              effect: CustomizableEffect(
                dotDecoration: DotDecoration(
                  width: 8,
                  height: 8,
                  color: Colors.grey.withOpacity(0.5),
                  borderRadius: BorderRadius.circular(8),
                ),
                activeDotDecoration: DotDecoration(
                  width: 10,
                  height: 10,
                  color: kBackground,
                  borderRadius: BorderRadius.circular(10),
                  dotBorder: const DotBorder(
                    color: kPrimaryColor,
                    padding: 2,
                    width: 2,
                  ),
                ),
              ),
              onDotClicked: (index) => pageController.jumpToPage(index),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        backgroundColor: kPrimaryColor,
        elevation: 2,
        child: IconButton(
          icon: Icon(Icons.shopping_cart_outlined),
          color: Colors.black,
          onPressed: () {
            Navigator.of(context).pushNamed(cartRoute);
            context.read<TotalPrice>().update();
          },
        ),
      ),
    );
  }
}

FoodList: //I'm positive the problems somewhere here

class FoodList extends StatelessWidget {
  final int selected;
  final Function callback;
  final Stall stall;

  const FoodList(this.selected, this.callback, this.stall);

  @override
  Widget build(BuildContext context) {
    final category = stall.menu.keys.toList();
    return Container(
      height: 100,
      padding: const EdgeInsets.symmetric(vertical: 30),
      child: ListView.separated(
        padding: const EdgeInsets.symmetric(horizontal: 25),
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) => GestureDetector(
          onTap: () => callback(index),
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              color: selected == index ? kPrimaryColor : Colors.white,
            ),
            child: Text(
              category[index],
              style: const TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        separatorBuilder: (_, index) => const SizedBox(width: 20),
        itemCount: category.length,
      ),
    );
  }
}

FoodListView:

class FoodListView extends StatelessWidget {
  final int selected;
  final Function callback;
  final PageController pageController;
  final Stall stall;

  const FoodListView(
    this.selected,
    this.callback,
    this.pageController,
    this.stall,
  );

  @override
  Widget build(BuildContext context) {
    final category = stall.menu.keys.toList();
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 25),
      child: PageView(
          controller: pageController,
          onPageChanged: (index) => callback(index),
          children: category
              .map((e) => ListView.separated(
                    padding: EdgeInsets.zero,
                    itemBuilder: (context, index) => GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (context) => DetailPage(
                                stall.menu[category[selected]]![index],
                              ),
                            ),
                          );
                        },
                        child:
                            FoodItem(stall.menu[category[selected]]![index])),
                    separatorBuilder: (_, index) => const SizedBox(height: 15),
                    itemCount: stall.menu[category[selected]]!.length,
                  ))
              .toList()),
    );
  }
}

Stall:

class Stall {
  String name;
  String label;
  String logoUrl;
  String desc;
  num score;
  Map<String, List<Food>> menu;
  Stall(
    this.name,
    this.label,
    this.logoUrl,
    this.desc,
    this.score,
    this.menu,
  );
}

No need to pass selected to FoodListView and also FoodListView will be like following

class FoodListView extends StatelessWidget {
  final Function callback;
  final PageController pageController;
  final Stall stall;

  const FoodListView(
    this.callback,
    this.pageController,
    this.stall,
  );

  @override
  Widget build(BuildContext context) {
    final menuList = stall.menu.values.toList();
    return Container(
        padding: EdgeInsets.symmetric(horizontal: 25),
        child: PageView.builder(
          controller: pageController,
          onPageChanged: (index) => callback(index),
          itemCount: menuList.length,
          itemBuilder: (context, menuIndex) {
            final menu = menuList[menuIndex];
            return ListView.separated(
              padding: EdgeInsets.zero,
              itemBuilder: (context, index) => GestureDetector(
                  onTap: () {
                    Navigator.of(context).push(
                      MaterialPageRoute(
                        builder: (context) => DetailPage(
                          menu[index],
                        ),
                      ),
                    );
                  },
                  child: FoodItem(menu[index])),
              separatorBuilder: (_, index) => const SizedBox(height: 15),
              itemCount: menu.length,
            );
          },
        ));
  }
}

Remove selected where you call FoodListView