icantcode
icantcode

Reputation: 160

CupertinoPicker cannot return Text from selected value

I am expecting the textfield to display "A" / "B" / etc upon selection, however it is returning the index "0" / "1" / "2" / ... only, why ???

full widget code below:

UPDATED:

  int selectedValue;

  Future showPicker() async {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return CupertinoPicker(
            backgroundColor: Colors.white,
            scrollController: FixedExtentScrollController(initialItem: 3),
            onSelectedItemChanged: (value) {
              setState(() {
                if (value != null) {
                  selectedValue = listTextValues[value];
                  regionController.value = TextEditingValue(text: selectedValue.toString());
                }
              });
            },
            itemExtent: 32.0,
            children: const listTextValues = [
              Text('Eastern'),
              Text('South'),
              Text('West'),
              Text('North'),
              Text('Island'),
            ],
          );
        }
        );

  }

Below code is workable, just wonder how to simplify the code as i am using 2 list, one for picker and one for mapping the index

Solution:

    int selectedValue;
  final List<String> listTextValues = ['Eastern', 'South', 'West', 'North', 'Island'];

  Future showPicker() async {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return CupertinoPicker(
            backgroundColor: Colors.white,
            scrollController: FixedExtentScrollController(initialItem: 3),
            onSelectedItemChanged: (value) {
              setState(() {
                if (value != null) {
                  selectedValue = value;
                  regionController.value = TextEditingValue(text: listTextValues[selectedValue].toString());
                }
              });
            },
            itemExtent: 32.0,
            children: const [
              Text('Eastern'),
              Text('South'),
              Text('West'),
              Text('North'),
              Text('Island'),
            ],
          );
        }
        );

  }

Upvotes: 0

Views: 1770

Answers (1)

FDuhen
FDuhen

Reputation: 4836

With the method onSelectedItemChanged: (value), the "value" is the selected index.
You have to store your list of letters in a variable in your widget

const listTextValues = [
      Text('A'),
      Text('B'),
      Text('C'),
      Text('D'),
      Text('E'),
    ];

and get the item at the selected index in the onSelectedItemChanged implementation

selectedValue = listTextValues[value];

Edit

The final result should look like the following

int selectedValue;
final List<Widget> listTextValues = [
              Text('Eastern'),
              Text('South'),
              Text('West'),
              Text('North'),
              Text('Island'),
            ];

  Future showPicker() async {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return CupertinoPicker(
            backgroundColor: Colors.white,
            scrollController: FixedExtentScrollController(initialItem: 3),
            onSelectedItemChanged: (value) {
              setState(() {
                if (value != null) {
                  selectedValue = listTextValues[value];
                  regionController.value = TextEditingValue(text: selectedValue.toString());
                }
              });
            },
            itemExtent: 32.0,
            children: listTextValues,
          );
        }
        );

  }

Upvotes: 2

Related Questions