Design I want:

My current design:

Hello. I want to ask. How to make a search column that has a button and a textfield like the design image I want. My design is now a textfield with an icon. The icon is in the textfield.

This is my code for search design:

 Container(
                                      width: 1120,
                                      alignment: Alignment.topRight,
                                      decoration: BoxDecoration(
                                        border: Border.all(
                                          color: Colors.transparent,
                                          width: 1.0,
                                        ),
                                      ),
                                      child: SizedBox(
                                        width: 310,
                                        height: 40,
                                        child: TextFormField(
                                          decoration: InputDecoration(
                                            suffixIcon: IconButton(
                                                iconSize: 25,
                                                icon: const Icon(
                                                  Icons.search,
                                                ),
                                                color: Colors.blue,
                                                onPressed: () => ""),
                                            hintText: 'Search Document',
                                            contentPadding:
                                                EdgeInsets.symmetric(
                                                    vertical: 20,
                                                    horizontal: 15),
                                            border: OutlineInputBorder(),
                                          ),
                                        ),
                                      ), Container(
                                      width: 1120,
                                      alignment: Alignment.topRight,
                                      decoration: BoxDecoration(
                                        border: Border.all(
                                          color: Colors.transparent,
                                          width: 1.0,
                                        ),
                                      ),
                                      child: SizedBox(
                                        width: 310,
                                        height: 40,
                                        child: TextFormField(
                                          decoration: InputDecoration(
                                            suffixIcon: IconButton(
                                                iconSize: 25,
                                                icon: const Icon(
                                                  Icons.search,
                                                ),
                                                color: Colors.blue,
                                                onPressed: () => ""),
                                            hintText: 'Search Document',
                                            contentPadding:
                                                EdgeInsets.symmetric(
                                                    vertical: 20,
                                                    horizontal: 15),
                                            border: OutlineInputBorder(),
                                          ),
                                        ),
                                      ),

CodePudding user response：

Try this code:

TextFormField(
  decoration: InputDecoration(
    suffixIcon: InkWell(
      onTap: () => "",
      child: Container(
        height: 25,
        color: Colors.blue,
        child: AspectRatio(
          aspectRatio: 2 / 1,
          child: Center(
              child: Icon(
            Icons.search,
            color: Colors.white,
          )),
        ),
      ),
    ),
    hintText: 'Search Document',
    contentPadding: EdgeInsets.symmetric(horizontal: 15),
    border: OutlineInputBorder(
      borderSide: BorderSide(width: 1, color: Colors.black),
    ),
  ),
)