First, u need to create a FixedExtentScrollController
, which allows u to conveniently work with item indices rather than working with a raw pixel scroll offset as required by the standard ScrollController
(source from the Flutter doc):
FixedExtentScrollController? _scrollWheelController;
final String? value;
final String values = ['male','female','other'];
@override
void initState() {
super.initState();
_scrollWheelController = FixedExtentScrollController(
/// Jump to the item index of the selected value in CupertinoPicker
initialItem: value == null ? 0 : values.indexOf(value!),
);
}
Then connect it to the CupertinoPicker
so that u can control the scroll view programmatically:
CupertinoPicker.builder(scrollController: _scrollWheelController);
If u want to jump to the item index of the selected value as soon as the ModalBottomSheet
pops up, the following code will help u achieve this:
showModalBottomSheet<String>(
context: context,
builder: (_) {
/// If the build() method to render the
/// [ListWheelScrollView] is complete, jump to the
/// item index of the selected value in the controlled
/// scroll view
WidgetsBinding.instance!.addPostFrameCallback(
/// [ScrollController] now refers to a
/// [ListWheelScrollView] that is already mounted on the screen
(_) => _scrollWheelController?.jumpToItem(
value == null ? 0 : values.indexOf(value!),
),
);
return SizedBox(
height: 200,
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: TextButton(
onPressed: () => Navigator.pop(context),
child: Text('Done'),
),
),
const Divider(thickness: 1),
Expanded(
child: CupertinoPicker.builder(
/// if [itemExtent] is too low, the content for each
/// item will be squished together
itemExtent: 32,
scrollController: _scrollWheelController,
onSelectedItemChanged: (index) => setState(() => values[index]),
childCount: values.length,
itemBuilder: (_, index) => Center(
child: Text(
valueAsString(values[index]),
style: TextStyle(
color: Theme.of(context).accentColor,
),
),
),
),
),
],
),
);
},
);
WidgetsBinding.instance!.addPostFrameCallback()
will ensure all the build()
methods of all widgets to be rendered in the current frame is complete. If _scrollWheelController
refers to a ListWheelScrollView
that is not yet fully built, the jumpToItem()
won't work.
Read this thread for more info on how to run method on Widget build complete