How can i put button inside Textformfield?

Question

I'm trying to create a Textformfield that has button inside it. Please check the screenshot.

Here is what I have done

TextField(
                        decoration: InputDecoration(
                          prefixIcon: Icon(Icons.search),
                          hintText: "Search",
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(2.w),
                            borderSide: BorderSide(
                              width: 0,
                              style: BorderStyle.none,
                            ),
                          ),
                          suffixIcon: ElevatedButton(
                            child: Text("Search"),
                            onPressed: () {},
                          ),
                        ),
                      ),

But here it is the result from my script

The button is overlapping the Textformfield, how can I fix it ?

Answer 1

Try below code hope its help to you.

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.search),
    hintText: "Search",
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(30),
      borderSide: BorderSide(
        color: Colors.black,
        width: 1,
        style: BorderStyle.solid,
      ),
    ),
    suffixIcon: Container(
      margin: EdgeInsets.all(8),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          minimumSize: Size(100, 50),
          backgroundColor: Colors.red,
          shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(30.0),
          ),
        ),
        child: Text("Search"),
        onPressed: () {},
      ),
    ),
  ),
),

Result Screen->