CODEWITHSUNDEEP
flutterdart
Yogesh Aggarwal
Yogesh Aggarwal

Reputation: 1125

Adding box shadow to TextInputField flutter

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?

Upvotes: 1

Views: 5913

Answers (2)

Viktar K
Viktar K

Reputation: 1528

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:

enter image description here

Upvotes: 2

Navin Kumar
Navin Kumar

Reputation: 4027

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,
      )
  );

Upvotes: 3

Related Questions