How can I create a multi-level dependent list (dropdown) using CupertinoPicker in flutter?

Question

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

}

Answer 1

Because I don't have the BookingPage I can't render to check the result.

But I think you should put some conditions where the ibadanBusstop list and lagosBusstop list is being used. So based on the position of the serviceAreaIndex you make some decision. So say the we are using busStopList Eg. busStopList = serviceAreaIndex == 0 ? ibadanBusstop : lagosBusstop;.

With this the logic of deciding the kind of list is taken care of by the condition.