💬
Get Help
AS
Aniruddha Sen

How can I update the TextField border width "On Focus Changed"?

Widgets & Design

I'm trying to implement the M3 Material Design guidelines for my TextField (with some changes of my own), and I wanted to update the width of a TextField border (i.e., I want the border width to be 1 by default, and when the TextField is focused, it should become 2).

I have tried a few options (listed below), but the border width remains static at either 1 or 2 (whichever I had set beforehand) and it doesn't change when I test the app.

However, the icon color & border color of the TextField get updated when the focus changes. It's just the border width that doesn't change. I don't understand why.

What have you tried so far?

I have tried the following:

  • Method #1:
    Added a "Conditional Value (If/Then/Else)" to the Border Width property of the TextField and set the "Update Page on Focus Change" to True (as shown in the image below).

  • Method #2:
    Added a Local Page State Variable called, "borderWidth," and updated this Variable in the On Focus Change event-triggered Action of the TextField (as shown in the image below) . . .

    . . . and then placed the borderWidth Variable in the Border Width property of the TextField.

  • Note #1: I have also verified that the borderWidth Variable does change, when the focus changes (though, after a delay). However, the Border Width property of the TextField does not change with it.

  • Note #2: I have set the Default Variable Value as 1 in both cases. I have also tried leaving it empty. In both cases, it continues to show the same width: 1.

These do not change the border width of the TextField, but Method #1 works for the border color, icon color, and label color of the TextField, as you can see in the images below. What doesn't change---but should---is the border width.

  • Unfocused (Common)

  • Focused (Expected)

  • Focused (Current)

Did you check FlutterFlow's Documentation for this topic?
Yes
1
5 replies