Adding box shadow to TextInputField flutter

Question

I was working on a project involving inputs. I want a box-shadow to an input. I have tried the BoxShadow widget on the container but it drops the shadow on the content of that not the outside of it. How can I do this?

Answer 1

Wrap textField with Container and give boxShadow

Container(
      decoration:  BoxDecoration(
          color: Colors.white,
          borderRadius: new BorderRadius.circular(10.0),
          boxShadow: [
            BoxShadow(color: Colors.grey, blurRadius: 2.0, spreadRadius: 0.4)
          ]),
      child: TextField(
        decoration: InputDecoration(
            isDense: true,
            counterText: "",
            contentPadding: EdgeInsets.all(10.0),
            filled: true,
            fillColor: Colors.white,
            border: OutlineInputBorder(
                borderRadius:
                new BorderRadius.circular(10.0),
                borderSide: BorderSide.none)),
        textAlign: TextAlign.start,
        maxLines: 1,
        maxLength: 20,
        // controller: _locationNameTextController,
      )
  );

Answer 2

You can use control_style package. Just wrap border value of InputDecoration with DecoratedInputBorder and configure shadow in shadow parameter. The shadow configuration you can just copy from boxShadow decoration of your Container.

    TextField(
      decoration: InputDecoration(
          border: DecoratedInputBorder(
        child: OutlineInputBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        shadow: const [
          BoxShadow(
            color: Colors.blue,
            blurRadius: 12,
          )
        ],
      )),
    );

The result should looks this way: