CODEWITHSUNDEEP
flutterdart
byhuang1998
byhuang1998

Reputation: 417

flutter: why input content disappear when textField lose the focus?

I put a textField with a clear button and hintText in a Container. My hope is when the textField has the focus, the clear button will appear, and when losing the focus, the button disappears. But when I put away the keyboard(the textField lose the focus), the input content and the hintText disappear. So what's wrong?

Container(
                      width: 330,
                      height: 40,
                      alignment: Alignment.centerLeft,
                      child: TextField(
                        controller: inputController,
                        focusNode: focusNode,
                        style: MyTextStyle.level9,
                        keyboardType: TextInputType.number,
                        decoration: InputDecoration(
                          hintText: 'hint text',
                          hintStyle: MyTextStyle.grey,
                          border: InputBorder.none,
                          suffixIcon: focusNode.hasFocus ? IconButton(
                            icon: MyIcon.CloseIcon,
                            onPressed: () {
                              inputController.clear();
                            }
                          ) : Container(),
                          filled: true,
                        ),
                      ),
                      decoration: BoxDecoration(
                        color: MyColor.MidGray,
                      ),
                    ),

Upvotes: 0

Views: 1375

Answers (1)

timilehinjegede
timilehinjegede

Reputation: 14043

The Container widget you used for the suffixIcon is taking up all the available space, using a SizedBox widget works well and produces the expected behaviour.

I added an example using your code:

Container(
        width: 330,
        height: 40,
        alignment: Alignment.centerLeft,
        child: TextField(
          controller: inputController,
          focusNode: focusNode,
          style: MyTextStyle.level9,
          keyboardType: TextInputType.number,
          decoration: InputDecoration(
            hintText: 'hint text',
            hintStyle: MyTextStyle.grey,
            border: InputBorder.none,
            suffixIcon: focusNode.hasFocus
                ? IconButton(
                    icon: MyIcon.CloseIcon,
                    onPressed: () {
                      inputController.clear();
                    })
                // use a SizedBox widget instead
                : SizedBox.shrink(),
            filled: true,
          ),
        ),
        decoration: BoxDecoration(
          color: MyColor.MidGray,
        ),
      ),

Upvotes: 1

Related Questions