Flutter: CupertinoPicker's items are on the right side when it first clicked

Question

Container(
        color: Colors.yellow,
        width: _filterOpen() ? 700 : 0,
        height: _filterOpen() ? 250 * 0.300 : 0,
        child: Column(
          children: [
            SizedBox(
              height: 225,
              child: CupertinoPicker(
                itemExtent: 35,
                backgroundColor: Colors.orange,
                onSelectedItemChanged: (v) {
                  print(v);
                },
                children: [
                  Text('Item01'),
                  Text('Item02'),
                  Text('Item03'),
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Padding(
                  padding: EdgeInsets.only(right: 50),
                  child: TextButton(
                      onPressed: () {
                        
                      },
                      child: Text(
                        'Ok',
                        style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.bold),
                      )),
                ),
              ],
            ),
          ],
        ),
      );

I have placed the CupertinoPicker() inside the container.

But, when I open the picker first. It looks like on the left picture. When I scroll, it becomes normal like on the right side and then it stays that way after closing and reopening the picker.

How can I fix this though? I want the picker's items stay in the middle like the one on the right side.

Answer 1

Try wrapping each child (Text('Item01')...etc) in a Center() widget