[Flutter]ドロップダウンボタンの左側にアイコンを表示するには？

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

ドロップダウンボタンの左側にアイコンを表示する方法を紹介します。

方法

ドロップダウンボタンの左側にアイコンを表示するには、まず「DropDownButton」を「DropdownButtonFormField」にします。

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

最後に、指定した「InputDecoration」クラスの引数「prefixIcon」に、アイコンを設定します。

DropdownButtonFormField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.person), //左側のアイコン
  ),
  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の引数「decoration」に指定する「InputDecoration」の「prefixIcon」プロパティでアイコンを設定します。