My page overlaps when I switch between screens - flutter

Question

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,
);
}

Answer 1

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