[Flutter]TextFormFieldの背景(background)に画像(image)を表示するには？

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

TextFormFieldの背景に画像を表示する方法を紹介します。

方法
使用例

方法

TextFormFieldの背景に画像を表示するには、Containerを使います。

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

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

そして、BoxDecorationの引数「image」に画像を指定します。

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('Asset path'),
    ),
  ),
  child: TextFormField(),
),

これでTextFormFieldの背景に画像が表示されます。

使用例

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('asset/images/frame.png'),
                  fit: BoxFit.fill,
                ),
              ),
              child: TextFormField(
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(20),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }