Dynamic multilevel CupertinoPicker skews alignment of first Text item when switching between lists

Question

I am trying to create a dynamic multilevel CupertinoPicker. When you select a location type from the first list, it displays the list of locations that match that type. This part is working fine, the problem is that if I swap to a different list of locations, the first Text widget of the second list of locations is indented according to the first Text widget of the first list of locations.

I've tried specifying that the Text widget should be aligned to the center using 'alignment: TextAlignment.center'. I also tried setting the location to null when swapping between location lists. Neither of these solved the problem or had any apparent effect.

return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(bottom: 5.0),
          height: pickerHeight,
          width: logicalSize.width,
          child: CupertinoPicker(
            backgroundColor: Colors.white,
            itemExtent: 32.0,
            onSelectedItemChanged: (selectedIndex) {
              setState(() {
                location = null;
                locationType = locationTypeList[selectedIndex];
              });
            },
            children: pickerLocationType,
          ),
        ),
        Container(
          height: pickerHeight,
          width: logicalSize.width,
          child: CupertinoPicker(
            backgroundColor: Colors.white,
            itemExtent: 30.0,
            onSelectedItemChanged: (selectedIndex) {
              setState(() {
                location = null;
                if (locationType == 'Campus') {
                  location = campusList[selectedIndex];
                }
                if (locationType == 'City') {
                  location = cityList[selectedIndex];
                }
              });
            },
            children: pickerMap[locationType],
          ),
        ),

The result should be that the first line is (imagine this set into a CupertinoPicker):

----------------------------------City 1--------------------------------------

----------------------------------City 2--------------------------------------

But it looks more like:

-------------------------------City 1-----------------------------------------

----------------------------------City 2--------------------------------------

If images are needed, I will edit this post with the link to them.

score -1 · Answer 1 · answered Nov 01 '19 at 20:38

I have discovered the solution. See below:

Container(
          key: ValueKey(this._locationType),
          height: pickerHeight,
          width: logicalSize.width,
          child: CupertinoPicker(
            backgroundColor: Colors.white,
            itemExtent: 30.0,
            onSelectedItemChanged: (selectedIndex) {
              setState(() {
                location = null;
                if (locationType == 'Campus') {
                  location = campusList[selectedIndex];
                }
                if (locationType == 'City') {
                  location = cityList[selectedIndex];
                }
              });
            },
            children: pickerMap[locationType],
          ),
        ),

You should describe the solution not just paste a load of code! — K-Dawg, May 30 '20 at 20:34
looking at your example it seems you added key: ValueKey(this._locationType). I tried setting the key and it worked for me. I wish you'd written this up in your answer so that I didn't have to compare the code to try and figure out what you'd changed. Update your answer and I'll remove the downvote. — K-Dawg, May 30 '20 at 20:40

Dynamic multilevel CupertinoPicker skews alignment of first Text item when switching between lists

1 Answers1