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

flutter: suffixIcon icon does not appear

In my textField I set a condition that when the length of a gets to 10, a suffixIcon should appear. However, it doesn’t appear until I save the code again. Any help?

My code:

TextField(
                  inputFormatters: [LengthLimitingTextInputFormatter(10)],
                  textInputAction: TextInputAction.done,
                  keyboardType: TextInputType.number,
                  // onChanged: (value) {
                  //   phone.text = value;
                  // },
                  controller: phone,
                  style: const TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                      fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                      hintText: "Phone Number...",
                      hintStyle:
                          TextStyle(color: Colors.grey.shade600, fontSize: 20),
                      suffixIcon: phone.text.length == 10
                          ? const Icon(
                              Icons.done_outline,
                              color: Colors.green,
                              size: 40,
                            )
                          : null),
                ),
Tags:

2

Answers


  1. 0

    Reason:-
    Its because of the state is not updating when text length is 10

    Solution:-

     onChanged: (value) {
        if (value.length == 10) {
          setState(() {});
        }
      },
    Login or Signup to reply.
  2. 0 
    TextField(inputFormatters: [LengthLimitingTextInputFormatter(10)],
                  textInputAction: TextInputAction.done,
                  keyboardType: TextInputType.number,
                  // onChanged: (value) {
                  //   phone.text = value;
                  // },
                  controller: phone,
                  style: const TextStyle(
                      color: Colors.white,
                      fontSize: 40,
                      fontWeight: FontWeight.bold),
                  decoration: InputDecoration(
                      hintText: "Phone Number...",
                      hintStyle:
                          TextStyle(color: Colors.grey.shade600, fontSize: 20),
                      suffix: phone.text.length == 10
                          ? const Icon(
                              Icons.done_outline,
                              color: Colors.green,
                              size: 40,
                            )
                          : null),
                ),

    use suffix don’t use suffixIcon for it

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

Back To Top
Search