[Flutter]ドロップダウンボタンに枠線を追加するには？

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

ドロップダウンボタンに枠線を追加する方法を紹介します。

方法

ドロップダウンボタンに枠線を追加するには、「DropDownButton」ではなく、DropdownButtonFormFieldを使います。

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

そして、指定した「InputDecoration」クラスの引数「border」に「OutlineInputBorder」を指定します。

以下は、実際の使用例です。

DropdownButtonFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
  ),
  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',
    ),
  ],
),