Flutter textfield disable prefix icon on text changed - flutter

Question

I have a text field widget that has an prefix icon . I want the prefix icon to be hidden when the text field is changed
my code:
TextField(
controller: messageInputController,
onChanged: (value){
messageInputChanged();
},
decoration: InputDecoration(
counterText: '',
prefixIcon: !showPrefixIcon ? Container() : Padding(
padding: const EdgeInsets.all(0),
child: IconButton(
onPressed: () {
imagePickerBottomSheet();
},
iconSize: 40,
color: Skin.gray,
icon: SvgPicture.asset(
'assets/svg/ic-image.svg',
height: 22,
color: Skin.gray,
)),
),
),
),
void messageInputChanged() {
if(messageInputController.text.isEmpty){
showPrefixIcon = true;
}else {
showPrefixIcon = false;
}
setState(() {});
}
But when the set state is called and the icon is hidden, the contents of the text field are also messed up

Answer 1

The InputDecorator accepts a Widget? for the prefixIcon, however, it does not work with a Container(). That's strange.
If I replace your
prefixIcon: !showPrefixIcon ? Container() : Padding(...)
with
prefixIcon: !showPrefixIcon ? SizedBox(height: 0.0, width: 0.0) : Padding(...)
it works.
I honestly don't know why.
updated proposal:
Use:
prefixIcon: !showPrefixIcon ? null : Padding(...)
And I just assume that you could then reasonably argue that this is ugly. Then, I fear, you have to change the way of doing it to something like this:
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 70.0,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
),
borderRadius: const BorderRadius.all(Radius.circular(10))),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
AnimatedSwitcher(
duration: const Duration(milliseconds: 600),
transitionBuilder: (child, animation) => SizeTransition(
sizeFactor: animation,
axis: Axis.horizontal,
child: child),
child: showPrefixIcon
? const Padding(
padding: EdgeInsets.all(8.0),
child: Icon(Icons.abc,
color: Colors.blue, size: 46),
)
: Container()),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
controller: messageInputController,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'enter text',
),
onChanged: (value) {
messageInputChanged();
},
),
),
),
],
),
),
),
),
);
}
}