Flutter CupertinoPicker UI breaks and children are not displayed properly

Question

I am quite new to Flutter and was trying to implement the CupertinoPicker Widget. When I press a button I want to be able to replace the current CupertinoPicker with another one. Unfortunately when I try this the text from the second UI is quite distorted.

Here are some images to help you understand my issue.

What exactly am I missing here?

Here is my code

Code on Github

Answer 1

Just wrap the Center widget with a Container widget. Here's a screenshot of the app and the code.

Widget _second() {
    return Container(
      child: Center(
        child: CupertinoPicker(
          selectionOverlay: null,
          onSelectedItemChanged: (value) {},
          itemExtent: 30,
          children: [
            Text("City 1"),
            Text("City 2"),
            Text("City 3"),
            Text("City 4"),
            Text("City 5"),
            Text("City 6"),
            Text("City 7"),
          ],
        ),
      ),
    );
  }