[Flutter]角丸のドロップダウンボタンを実装する方法

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

角丸のドロップダウンボタンを実装する方法を紹介します。

方法

角丸のドロップダウンボタンを実装するには、「DropdownButtonFormField」ウェジェットを使います。

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

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

最後に、OutlineInputBorderの引数「borderRadius」で角丸の設定をします。

DropdownButtonFormField(
  decoration: InputDecoration(
    border: OutlineInputBorder(
      borderRadius: const BorderRadius.all(
        const Radius.circular(30.0), //角丸の設定
      ),
    ),
  ),
・・・・
)