[Flutter]ContainerでInputDecorationを使うには？

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

ContainerでInputDecorationを使う方法を紹介します。

方法

ContainerでInputDecorationを使うには、まず「Container」を「InputDecorator」の「child」に指定します。

そして、InputDecoratorの引数「decoration」に「InputDecoration」を指定します。

InputDecorator(
  decoration: InputDecoration(),
  child: Container(),
),

これでContainerでInputDecorationを使えるようになります。

以下は、使用例です。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: InputDecorator(
            decoration: InputDecoration(
              labelText: 'Container',
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
            ),
            child: Container(
              height: 200,
              color: Colors.blue,
            ),
          ),
        ),
      ),
    );
  }