Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Show Icon after TextForm Field

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
Tags:

2

Answers


  1. 0

    Try to replace your Padding widget with below

          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  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,
                  ),
                ),
                Icon(
                  Icons.abc,
                  size: 50,
                )
              ],
            ),
          ),
    Login or Signup to reply.
  2. 0

    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-> enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search