user interface - Flutter TextField add box shadow

Question

I tried create TextField with shadow effect using Container like this:

Code:

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: new BorderRadius.circular(5.0),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        spreadRadius: 1,
        blurRadius: 3,
      ),
    ],
  ),
  child: TextFormField(
    validator: (value) {
      if (value.isEmpty) {
        return 'Product title required';
      }
      return null;
    },
    decoration: InputDecoration(
      isDense: true,
      hintText: 'Product title',
      contentPadding: EdgeInsets.all(18.0),
      filled: true,
      fillColor: Colors.white,
      border: OutlineInputBorder(
        borderRadius: new BorderRadius.circular(10.0),
        borderSide: BorderSide.none,
      ),
    ),
    textAlign: TextAlign.start,
    maxLines: 1,
  ),
)

But when validation has error then error message shows inside Container which is incorrect in my case:

How I can create TextField like this shadow with correctly displaying error message and error border colors like this but with shadow:

question from:https://stackoverflow.com/questions/65879043/flutter-textfield-add-box-shadow

Answer 1

Try to wrap it with "Material" widget

Material(
 elevation: 5,
 child: TextFormField(
    validator: (value) {
      if (value.isEmpty) {
        return 'Product title required';
      }
      return null;
    },
    decoration: InputDecoration(
      isDense: true,
      hintText: 'Product title',
      contentPadding: EdgeInsets.all(18.0),
      filled: true,
      fillColor: Colors.white,
      border: OutlineInputBorder(
        borderRadius: new BorderRadius.circular(10.0),
        borderSide: BorderSide.none,
      ),
    ),
    textAlign: TextAlign.start,
    maxLines: 1,
  ),
),