CupertinoPicker with multiple column fields

Question

Hey I'm looking to implement the above widget:

I'm a bit struggling to implement it using CupertinoPicker or CupertinoDatePicker.

How do I do that?

Answer 1

The solution was to upload two Cupertino.builders side by side.

The downside is that the onSelectedItemChanged value is related to each component separtly. It's not that a big problem since we can always merge their values later.

Here is the outcome:

My code:

Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            Expanded(
              child: CupertinoPicker.builder(
                childCount: 100,
                itemExtent: _kItemExtent,
                onSelectedItemChanged: (itemIndex) => context
                    .read<ScheduleCubit>()
                    .updateTimePreference(index, dateTimeIndex: itemIndex),
                itemBuilder: (context, index) {
                  final dateTextStyle = CupertinoTheme.of(context)
                      .textTheme
                      .dateTimePickerTextStyle;

                  final selectedDate = _selectedDate(index);
                  final dateText = index == 0
                      ? CupertinoLocalizations.of(context).todayLabel
                      : dateFormat04(selectedDate);
                  return Center(
                    child: Text(
                      dateText,
                      textAlign: TextAlign.center,
                      style: dateTextStyle,
                    ),
                  );
                },
              ),
            ),
            Expanded(
              child: CupertinoPicker(
                itemExtent: _kItemExtent,
                onSelectedItemChanged: (itemIndex) => context
                    .read<ScheduleCubit>()
                    .updateTimePreference(index, timeRangeIndex: itemIndex),
                children: List<Widget>.generate(
                  _timeRanges.length,
                  (index) => Center(child: Text(_timeRanges[index].toString())),
                ),
              ),
            )
          ],
        )