[Flutter]DropdownButtonに色付きの枠線をつけるには？

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

DropdownButtonに色付きの枠線をつける方法を紹介します。

方法

DropdownButtonに色付きの枠線をつけるには、Containerを使います。

まず、DropdownButtonをContainerでラップします。

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

そして、BoxDecorationの引数「boder」にBorder.all()を指定し、Border.allの引数「color」に枠線の色を指定しまうs。

Container(
  decoration: BoxDecoration(
    border: Border.all(color: /*枠線の色*/),
  ),
  child: DropdownButton(
      value: _text,
      items: [
        ・・・
      ],
      onChanged: (String? value) {
        ・・・
      },
    ),
),

Contaienrを使えば、DropdownButtonに枠線をつけることが出来ます。

使用例

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.pink),
  ),
  padding: EdgeInsets.all(8.0),
  child: DropdownButtonHideUnderline(
    child: DropdownButton(
      value: _text,
      items: [
        DropdownMenuItem(
          child: Text('Hello'),
          value: 'Hello',
        ),
        DropdownMenuItem(
          child: Text('Hola'),
          value: 'Hola',
        ),
        DropdownMenuItem(
          child: Text('こんにちは'),
          value: 'こんにちは',
        ),
      ],
      onChanged: (String? value) {
        setState(() {
          _text = value ?? 'Hello';
        });
      },
    ),
  ),
),

[Flutter]DropdownButtonFormFieldにバリデーターを追加するには？

DropdownButtonFormFieldにバリデーターを追加する方法を紹介します。

www.choge-blog.com

2022.01.05

[Flutter]DropdownButtonの値が変更された時に処理をするには？

DropdownButtonの値が変更された時に処理をする方法を紹介します。

www.choge-blog.com

2022.01.05

[Flutter]DropdownButtonのアイコンを横幅の変更に合わせるには？

デフォルトでは、DropdownButtonの横幅を変えると、アイコンの位置がずれます。DropdownButtonの横幅を変えても、アイコンの位置がずれないようにする方法を紹介します。

www.choge-blog.com

2022.01.05

[Flutter]DropdownButtonを横幅いっぱいにするには？

DropdownButtonを横幅いっぱいにする方法を紹介します。

www.choge-blog.com

2022.01.04