Show Icon after TextForm Field

Question

Expanded(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          SizedBox(height: 40),
          Row(
            children: [
              SizedBox(width: 8),

              //MENU
              Icon(
                Icons.menu,
                size: 34,
                color: AppColors.black,
              ),

              Spacer(),

              //LOGO
              SizedBox(
                  height: 60,
                  width: 100,
                  child: Image.asset(
                    'assets/icons/logo_transparent_main.png',
                  )),

              SizedBox(width: 8)
            ],
          ),
          //SEARCHBAR
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              // controller: textIDController,
              style: const TextStyle(
                  color: Colors.black, fontWeight: FontWeight.w700),
              decoration: InputDecoration(
                suffixIcon: FaIcon(
                  Icons.filter_list_sharp,
                  size: 30,
                  color: AppColors.black,
                ),
                labelText: "Search",
                labelStyle: const TextStyle(
                    color: Colors.black, fontWeight: FontWeight.w700),
                // fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                  borderSide:
                      const BorderSide(color: Colors.black, width: 2.0),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(20),
                  borderSide:
                      const BorderSide(color: Colors.black, width: 2.0),
                ),
              ),
              maxLines: 1,
              keyboardType: TextInputType.text,
              textInputAction: TextInputAction.next,
            ),
          ),
          SizedBox(height: 10),
        ],
      ),
    ),

I want the Icon (inside the searchbar in suffix Icon) to be shown after the Search Bar

Here's what I've tried but doesn't work:

• When both are placed in a row, it doesnt show up
• When I place the row in Expanded, same issue
• Suffixicon places the icon in the border, I want it outside the border
• I have also tried Suffix instead of suffix icon but no luck

Answer 1

Try below code hope its help to you. I have just change your searchbar widget if you want to display your suffixIcon just add it afer texrfield

//SEARCHBAR
              Row(
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: TextFormField(
                        // controller: textIDController,
                        style: const TextStyle(
                            color: Colors.black, fontWeight: FontWeight.w700),
                        decoration: InputDecoration(
//                           suffixIcon: Icon(
//                             Icons.filter_list_sharp,
//                             size: 30,
//                             color: Colors.black,
//                           ),
                          labelText: "Search",
                          labelStyle: const TextStyle(
                              color: Colors.black, fontWeight: FontWeight.w700),
                          // fillColor: Colors.white,
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(20),
                            borderSide:
                                const BorderSide(color: Colors.black, width: 2.0),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(20),
                            borderSide:
                                const BorderSide(color: Colors.black, width: 2.0),
                          ),
                        ),
                        maxLines: 1,
                        keyboardType: TextInputType.text,
                        textInputAction: TextInputAction.next,
                      ),
                    ),
                  ),
                  SizedBox(width: 5,),// adjust width between search box and icon here as per your need
                  Icon(
                            Icons.filter_list_sharp,
                            size: 30,
                            color: Colors.black,
                          )
                ],
              ),

Result->