How to hide the things behind the textfield border?

Question

I am trying to make a textfield with rounded border and some drop shadow, when i use elevation it shows some parts outside the border, please have alook in the image i had attached.

Container(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 30.0,
          child: Material(
            elevation: 2.0,
            shadowColor: Colors.grey,
            child: TextField(
              autofocus: false,
              style: TextStyle(
                  color: Colors.black,
              ),
              decoration: kTextFieldDecorationCircular,
              onChanged: (value){
                searchWord = value;
              },
              onEditingComplete: searchTheWord,
            ),
          ),
        ),
      ),
    );

const kTextFieldDecorationCircular = InputDecoration(
  contentPadding: EdgeInsets.all(2.0),
  filled: true,
  fillColor: Colors.white,
  prefixIcon: Icon(Icons.search, color: Colors.grey,),
  hintText: 'Search',
  hintStyle: TextStyle(color: Colors.grey),
  border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(50.0)),
  ),
);

This is my code. Thank you in advance.

Solution

You could add this to your Material widget:

borderRadius: BorderRadius.all(Radius.circular(50.0)),

Comments

[Hannes Küttner]

What are you using to achieve the elevation? Could you share the surrounding widget?

[Alvin John Niravukalayil]

@HannesKüttner I just want to show a text field with the border radius as shown and add some shadows, but don't you see there some parts of the textfield are showing outside the border.

[Hannes Küttner]

To answer your question it's relevant to know how you create the shadow because it is not part of your input decoration.

[Alvin John Niravukalayil]

@HannesKüttner I had updated the code, please have a look.