[Flutter]ドロップダウンボタンにラベルを表示する方法

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

ドロップダウンボタンにラベルを表示する方法を紹介します。

方法

ドロップダウンボタンにラベルを表示するには、まず「DropDownButton」を「DropdownButtonFormField」にします。

DropdownButtonFormField(
  ・・・
),

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

DropdownButtonFormField(
  decoration: InputDecoration(),
  ・・・
),

最後に、InputDecorationの引数「labelText」にラベルの文字列を設定します。

DropdownButtonFormField(
  decoration: InputDecoration(
    labelText: 'あいさつ',
  ),
  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',
    ),
  ],
),

まとめ

ドロップダウンボタンにラベルを表示するには、まず「DropdownButtonFormField」の引数「decoration」に「InputDecoration」を指定します。

そして、「InputDecoration」の引数「labeText」に「文字列」を指定します。