[Flutter]TextFormFieldに影(shadow)をつけるには？

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

TextFormFieldに影をつける方法を紹介します。

方法
使用例

方法

TextFormFieldに影をつけるには、InputDecorationとContainerを使います。

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

そして、InputDecorationの引数「filled」にtrue、引数「fillColor」にTextFormFieldの透明以外の背景色を指定します。

次に、TextFormFieldをContainerでラップし、Containerの引数「decoration」にBoxDecorationを指定します。

最後に、BoxDecorationの引数「boxShadow」で影の設定をします。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(),
    ],
  ),
  child: TextFormField(
    decoration: InputDecoration(
      fillColor: /*背景色*/,
      filled: true,
    ),
  ),
),

これでTextFormFieldに影をつけることが出来ます。

使用例

以下は、使用例です。

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        spreadRadius: 2,
        blurRadius: 3,
        color: Colors.grey,
        offset: Offset(2, 2),
      ),
    ],
  ),
  child: TextFormField(
    decoration: InputDecoration(
      fillColor: Colors.white,
      filled: true,
      border: OutlineInputBorder(),
    ),
  ),
),