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.

Answer 1

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],
          ),
        ),