DropdownButton options are displayed too high after hiding the keyboard

Question

When I touch a DropdownButton, the options are displayed in the correct position, like in this image. But if I touch the last TextFormField and then touch the DropdownButton the options show up too high, like in this image.

Here is my code:

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('App')),
      body: ListView(
        padding: const EdgeInsets.all(10),
        children: <Widget>[
          _customTextField(),
          _customTextField(),
          _customTextField(),
          _customTextField(),
          _customTextField(),
          Padding(
            padding: const EdgeInsets.all(10),
            child: DropdownButton<String>(
              value: '1',
              isExpanded: true,
              items: const <DropdownMenuItem<String>>[
                DropdownMenuItem(value: '1', child: Text('1')),
                DropdownMenuItem(value: '2', child: Text('2')),
                DropdownMenuItem(value: '3', child: Text('3')),
              ],
              onChanged: (value) {},
            ),
          ),
          _customTextField(),
          _customTextField(),
        ],
      ),
    );
  }

  Widget _customTextField() {
    return Padding(
      padding: const EdgeInsets.all(10),
      child: TextFormField(
        decoration: const InputDecoration(labelText: 'Text Field'),
      ),
    );
  }
}