Flutter Web horizontal scroll with responsive webapp - flutter

Question

I want to figure out the position of scroll and depending on that results, I want to show some buttons.
This is my code of Scroll Widget.
Flexible(
child: Container(
constraints: BoxConstraints(
maxWidth: 730,
),
child: ListView.separated(
controller: _platformController,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
String platform = platformlistA[index].toLowerCase();
return InkWell(
onTap: () {
if (platformIndex !=
platformlistA.indexWhere(
(element) => element == platformlistA[index])) {
setState(() {
platformIndex = platformlistA.indexWhere(
(element) => element == platformlistA[index]);
});
} else {
setState(() {
platformIndex = -1;
});
}
},
child: Container(
alignment: Alignment.center,
height: 37,
width: platform != 'fortnite' ? 100 : 85,
padding: EdgeInsets.symmetric(
horizontal: 5,
),
child: WebsafeSvg.asset(
'assets/$platform.svg',
color: platformIndex ==
platformlistA.indexWhere(
(element) => element == platformlistA[index])
? Colors.black
: Color(0xffb7b7b7),
),
),
);
},
separatorBuilder: (context, index) {
return SizedBox(width: 7);
},
itemCount: platformlistA.length),
),
),
and this is the code getting the position of Scroll widget.
WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
setState(() {
if (_platformController.position.maxScrollExtent > 0) {
if (_platformController.position.atEdge) {
if (_platformController.position.pixels == 0) {
print('left edge');
// show -> button at right
} else {
print('right edge');
// show <- button at left
}
} else {
print('middle of the scroll');
// show <-, -> buttons at both side
}
} else {
print('not scrollable');
// do not show any button.
}
});
});
I used WidgetsBinding.instance!.addPostFrameCallback because, it shows error if I handle with controller before the build.
Eventually, this works functionally, but it is too slow since WidgetsBinding.instance!.addPostFrameCallback in build function continues to run. I cannot put it in initstate because if() phrase has to be called everytime when the size of web application changes.
Is there any faster way than this method??? Please help!!

Answer 1

Map<String, dynamic> toJson() => {
'name': name,
'email': email,
};
Try adding => front of toJson()