how to reset flutter picker and force a value and a position?

Question

Hi there I'm new to flutter and I have some issue that needs help ..

I have two pickers in my layout (A) & (B), The user chooses from picker (A) and based on his choice a custom function shall be called to get values of picker(B) based on his choice of course.

One problem is when the user changes (A), the values of (B) gets updated but its position is not, B keeps last user input position even to blank if the new array is shorter.

Example: If the the user chose from B lets say the 10th choice, then didn't find what he wanted, so he got back and changed A, now the array in B is only 8, what I find on the screen is that picker (B) keeps it's 10th position on a blank cell till the user flips up 2 blank choices and the 8th choice start to appear, now the blank choices are gone .. I want picker B position to get to 0 after each change in values.

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

class CasingDataScreen extends StatefulWidget {
  @override
  _CasingDataScreenState createState() => _CasingDataScreenState();
}

class _CasingDataScreenState extends State<CasingDataScreen> {
  int pickerIndexA;
  int pickerIndexB;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            Row(
              children: [
                CupertinoPicker(
                  onSelectedItemChanged: (i) {
                    setState(() {
                      pickerIndexA = i;
                    });
                  },
                  children: _getPicker(['a', 'b', 'c']),
                ),
                CupertinoPicker(
                  onSelectedItemChanged: (j) {},
                  children: _getPicker(myCustomFunction(pickerIndexA)),
                 ),
              ],
            ),
           ],
        ),
       ),
    );
  }
}


List<Container> _getPicker(List<String> data) {
  List<Container> pickerWidgets = [];
  for (String item in data) {
    pickerWidgets.add(
      Container(
        child: Text(item),
      ),
    );
  }

return pickerWidgets; }

Solution

How about this...

In your first picker's onSelectedItemChanged, call jumpToItem(...) of the second picker's FixedExtentScrollController.

class _CasingDataScreenState extends State<CasingDataScreen> {
  final List<List<String>> _test = <List<String>>[
    <String>['a1', 'a2', 'a3'],
    <String>['b1', 'b2', 'b3', 'b4'],
    <String>['c1', 'c2', 'c3', 'c4', 'c5'],
  ];
  final FixedExtentScrollController _controller =
      FixedExtentScrollController(initialItem: 0);

  int pickerIndexA = 0;
  int? pickerIndexB;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          children: [
            Row(
              children: [
                Expanded(
                  child: CupertinoPicker(
                    itemExtent: 50,
                    onSelectedItemChanged: (i) {
                      setState(() {
                        print('>>> pickerIndexA $i');
                        pickerIndexA = i;
                      });
                      _controller.jumpToItem(0);
                    },
                    children: _getPicker(['a', 'b', 'c']),
                  ),
                ),
                Expanded(
                  child: CupertinoPicker(
                    itemExtent: 50,
                    onSelectedItemChanged: (j) {},
                    children: _getPicker(
                      _test[pickerIndexA],
                    ),
                    scrollController: _controller,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  List<Container> _getPicker(List<String> data) {
    print('>>>>> $data');
    List<Container> pickerWidgets = [];

    for (String item in data) {
      pickerWidgets.add(
        Container(
          child: Text(item),
        ),
      );
    }

    return pickerWidgets;
  }
}

Comments

[Khaled Mahmoud]

I added to both pickers scrollController: FixedExtentScrollController(initialItem: 0) but nothing happens

[Khaled Mahmoud]

A solution that might be acceptable is deleting the blank options in B whenever A changes, and grabbing the current value of B. The user would be free to change and not necessarily start from 0 the problem is with blank options.

[Khaled Mahmoud]

for some reason it didn't work with me, also I put _controller.jumpToItem(0); in a separate function, but when the line reaches _controller.jumpToItem(0); it doesn't execute and skips the remaining lines of the function!!

[Khaled Mahmoud]

Worked finally, just deleted app from device and installed a clean build it finally worked. Thanks a lot, you are amazing.

[rickimaru]

@KhaledMahmoud Nice! Good luck!