flutter : How to Update OverlayEntry value instead of create new one - flutter

Question

I am trying to use OverlayEntry on onChanged callback from TextField.
body: Center(
child: Container(
child: TextField(
focusNode: _focusNode,
key: _textFieldKey,
style: _textFieldStyle,
onChanged: (String nextText) {
showOverlaidTag(context, nextText);
},
),
width: 400.0,
),
)
The problem is when everytime onChanged is triggered, new Overlay is created and lay on each other? I want to just new text replaced with new text and the old overlay remains?
showOverlaidTag(BuildContext context, String newText) async {
OverlayEntry suggestionTagoverlayEntry = OverlayEntry(
builder: (BuildContext context) => DropDownBody(
focusNode: _focusNode,
newText : newText
),
);
overlayState.insert(suggestionTagoverlayEntry);
//await Future.delayed(Duration(milliseconds: 10000));
suggestionTagoverlayEntry.remove();
}
This is DropDownBody
import 'package:flutter/material.dart';
class DropDownBody extends StatefulWidget {
const DropDownBody({Key? key, required this.focusNode, required this.newText})
: super(key: key);
final FocusNode focusNode;
final String newText;
#override
_DropDownBodyState createState() => _DropDownBodyState();
}
class _DropDownBodyState extends State<DropDownBody> {
#override
Widget build(BuildContext context) {
print("=====> build");
return Positioned(
top: widget.focusNode.offset.dy + 50,
left: 0,
child: Material(
elevation: 4.0,
color: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
color: Colors.lightBlueAccent,
child: Row(
children: [
Expanded(
child: Text(
'Show tag here',
style: TextStyle(
fontSize: 20.0,
),
),
),
],
),
)),
);
}
}

Answer 1

I had to fix a few syntax errors in your code. I implemented the dropdownbody code in part. works great.
class HomePageWidget extends StatefulWidget {
HomePageWidget({Key? key}) : super(key: key);
final formKey=GlobalKey<FormState>();
TextEditingController text_controller= TextEditingController();
#override
_HomePageWidgetState createState() => _HomePageWidgetState();
}
class _HomePageWidgetState extends State<HomePageWidget> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text("test changenotify"),
),
body: Form( key:widget.formKey, child: Column(
children: [
TextFormField(
decoration: InputDecoration(icon: const Icon(Icons.person),
hintText: "Input some text",
labelText: "Input",
),
onChanged: (String nextText){
//debugPrint(nextText);
showOverlaidTag(context,nextText);
//Future<bool> val=showOverlaidTag(context,nextText);
//val.then((result)=>result);
},
controller: widget.text_controller),
],
)));
}
showOverlaidTag(BuildContext context, String newText) async {
OverlayEntry suggestionTagoverlayEntry = OverlayEntry(
builder: (BuildContext context) =>
Positioned(
top:100,
child:
Material(elevation:4.0,
color:Colors.transparent,
child:Container(
width:MediaQuery.of(context).size.width*0.9,
color:Colors.lightBlueAccent,
child:
Row(children: [Expanded(child: Text(
//focusNode: _focusNode,
newText
))],)
),
)));
//overlayState.insert(suggestionTagoverlayEntry);
Overlay.of(context)?.insert(suggestionTagoverlayEntry);
await Future.delayed(Duration(milliseconds: 2000));
suggestionTagoverlayEntry.remove();
return suggestionTagoverlayEntry;
}
}

Answer 2

use boolean and try to call the insert only the first time
if(isOverlayAlreadyRunning == false){
entry = OverlayEntry(builder: (context) {
return Positioned(
);
});
overlay?.insert(entry!);
isOverlayAlreadyRunning = true;
}
and use setState((){}) to update the variable

Answer 3

try this, did a little refactoring for the text, it doesn't change much. Call hideOverlay() when you want to remove it
import 'package:flutter/material.dart';
class DropDownBody extends StatefulWidget {
const DropDownBody({Key? key, required this.focusNode, required this.newText})
: super(key: key);
final FocusNode focusNode;
final String newText;
#override
_DropDownBodyState createState() => _DropDownBodyState();
}
class _DropDownBodyState extends State<DropDownBody> {
OverlayEntry? overlayEntry;
String? text;
void insertOverlay(BuildContext context) {
if (overlayEntry == null || !overlayEntry!.mounted) {
overlayEntry = OverlayEntry(
builder: (context) => DropDownBody(focusNode: _focusNode, newText: text??'sus')
);
final overlay = Overlay.of(context)!;
overlay.insert(overlayEntry!);
}
}
void hideOverlay() {
overlayEntry!.remove();
overlayEntry == null;
}
#override
Widget build(BuildContext context) {
print("=====> build");
return Positioned(
top: widget.focusNode.offset.dy + 50,
left: 0,
child: Material(
elevation: 4.0,
color: Colors.transparent,
child: Container(
width: MediaQuery.of(context).size.width * 0.9,
color: Colors.lightBlueAccent,
child: Row(
children: [
Expanded(
child: Text(
'Show tag here',
style: TextStyle(
fontSize: 20.0,
),
),
),
],
),
)),
);
}
}