Based on the serviceAreas list, I want to return the corresponding bus stops. For Instance, If a user selects Oyo in the serviceArea list, the list to return in the second cupertinoPicker should be the ibadanBusstop, and if a user selects Lagos in the first list, the return should be lagosBusstop list.
I'm open to other approaches to make this work but I don't want to use a dropdown.
class _BookingPageState extends State<BookingPage> {
FixedExtentScrollController scrollController = FixedExtentScrollController();
final List<String> ibadanBusstop = [
'Lead City Bus Stop',
'Olorunsogo Bus Stop',
'Challenge Bus Stop',
'Mokola Bus Stop',
];
final List<String> lagosBusstop = [
'Jibowu Bus Stop',
'Obalende Bus Stop',
];
final List<String> serviceAreas = [
'Lagos',
'Oyo',
];
int ibadanIndex = 0;
int lagosIndex = 0;
int serviceAreaIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: FraserDimensions.xFlexHeight(context, 24),
),
GestureDetector(
onTap: (() {
scrollController.dispose();
scrollController =
FixedExtentScrollController(initialItem: serviceAreaIndex);
showCupertinoModalPopup(
context: context,
builder: (context) => CupertinoActionSheet(
actions: [
SizedBox(
height: FraserDimensions.xFlexHeight(context, 3),
child: CupertinoPicker(
scrollController: scrollController,
itemExtent: 64,
onSelectedItemChanged: (index) {
setState(() {
this.serviceAreaIndex = index;
});
final item = serviceAreas[index];
print(item);
},
children: serviceAreas
.map((e) => Center(
child: Text(
e,
style: FraserTextStyle.textBlack24,
),
))
.toList()),
)
],
),
);
}),
child: Container(
width: FraserDimensions.xFlexWidth(context, 1),
height: FraserDimensions.xFlexHeight(context, 18),
decoration: BoxDecoration(
color: FraserColors.line,
borderRadius: const BorderRadius.all(
Radius.circular(24),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 24.0),
child: Text(
serviceAreas[serviceAreaIndex],
style: FraserTextStyle.textGrey16,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(
Icons.arrow_drop_down_outlined,
color: FraserColors.primaryBlack,
size: 22,
),
),
],
),
),
),
SizedBox(
height: FraserDimensions.xFlexHeight(context, 64),
),
GestureDetector(
onTap: (() {
scrollController.dispose();
scrollController =
FixedExtentScrollController(initialItem: ibadanIndex);
showCupertinoModalPopup(
context: context,
builder: (context) => CupertinoActionSheet(
actions: [
SizedBox(
height: FraserDimensions.xFlexHeight(context, 3),
child: CupertinoPicker(
scrollController: scrollController,
itemExtent: 64,
onSelectedItemChanged: (index) {
setState(() {
this.ibadanIndex = index;
});
final item = ibadanBusstop[index];
print(item);
},
children: ibadanBusstop
.map((e) => Center(
child: Text(
e,
style: FraserTextStyle.textBlack24,
),
))
.toList()),
)
],
),
);
}),
child: Container(
width: FraserDimensions.xFlexWidth(context, 1),
height: FraserDimensions.xFlexHeight(context, 18),
decoration: BoxDecoration(
color: FraserColors.line,
borderRadius: const BorderRadius.all(
Radius.circular(24),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.only(left: 24.0),
child: Text(
ibadanBusstop[ibadanIndex],
style: FraserTextStyle.textGrey16,
),
),
),
Padding(
padding: const EdgeInsets.only(right: 16.0),
child: Icon(
Icons.arrow_drop_down_outlined,
color: FraserColors.primaryBlack,
size: 22,
),
),
],
),
),
),
],
),
),
);
}
