[Flutter]ドロップダウンボタンのパディングを設定する方法

どうも、ちょげ(@chogetarou)です。

ドロップダウンボタンのパディングを設定する方法を紹介します。

方法

ドロップダウンボタンのパディングを設定するには、「DropdownButton」ではなく、「DropdownButtonFormField」を使います。

まず、「DropdownButtonFormField」の引数「decoration」に、「InputDecoration」を指定します。

そして、「InputDecoration」の引数「contentPadding」で、パディングの設定をします。

以下は、使用例です。

DropdownButtonFormField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(30), //パディングの設定
    filled: true,
    fillColor: Colors.pink.withAlpha(50),
  ),
  value: _value,
  onChanged: (String? value) {
    setState(() {
      _value = value!;
    });
  },
  items: [
    DropdownMenuItem(
      child: Text('Hello'),
      value: 'Hello',
    ),
    DropdownMenuItem(
      child: Text('Halo'),
      value: 'Halo',
    ),
    DropdownMenuItem(
      child: Text('Hola'),
      value: 'Hola',
    ),
  ],
),

まとめ

ドロップダウンボタンのパディングを設定するには、DropDownButtonではなく、「DropdownButtonFormField」を使用します。

そして、DropdownButtonFormFieldに指定するInputDecorationの引数「contentPadding」でパディングを設定します。