AutoComplete Experiment: Show overlay when editing text in the middle

This commit is contained in:
Vishesh Handa
2020-12-02 10:28:07 +01:00
parent 6c5767e2b6
commit e6ddf43792

View File

@ -34,9 +34,24 @@ class _MyHomePageState extends State<MyHomePage> {
GlobalKey _textFieldKey = GlobalKey(); GlobalKey _textFieldKey = GlobalKey();
TextStyle _textFieldStyle = const TextStyle(fontSize: 20); TextStyle _textFieldStyle = const TextStyle(fontSize: 20);
TextEditingController _textController;
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_textController = TextEditingController();
_textController.addListener(() {
var selection = _textController.selection;
var cursorPos = selection.baseOffset;
var text = _textController.text;
var nextText = text.substring(0, cursorPos);
print('newText: $nextText');
if (nextText.endsWith('[[')) {
showOverlaidTag(context, nextText);
}
});
} }
// Code reference for overlay logic from MTECHVIRAL's video // Code reference for overlay logic from MTECHVIRAL's video
@ -105,19 +120,17 @@ class _MyHomePageState extends State<MyHomePage> {
title: Text(widget.title), title: Text(widget.title),
), ),
body: Center( body: Center(
child: Container( child: SingleChildScrollView(
child: TextField( child: Container(
focusNode: _focusNode, child: TextField(
key: _textFieldKey, controller: _textController,
style: _textFieldStyle, focusNode: _focusNode,
maxLines: null, key: _textFieldKey,
onChanged: (String nextText) { style: _textFieldStyle,
if (nextText.endsWith('[[')) { maxLines: null,
showOverlaidTag(context, nextText); ),
} width: 400.0,
},
), ),
width: 400.0,
), ),
), ),
); );
@ -142,3 +155,9 @@ class _EditorState extends State<Editor> {
// https://pub.dev/packages/flutter_typeahead // https://pub.dev/packages/flutter_typeahead
// https://stackoverflow.com/questions/59243627/flutter-how-to-get-the-coordinates-of-the-cursor-in-a-textfield // https://stackoverflow.com/questions/59243627/flutter-how-to-get-the-coordinates-of-the-cursor-in-a-textfield
// Bug 2: Autocompletion box overlays the bottom nav bar
// Bug 3: On Pressing Enter the Overlay should disappear
// Bug 4: On Deleting the prefix buttons it should also disappear
// Bug 5: Overlay disappears too fast
// Bug 6: When writing a text which has '[[Hell' it doesn't show the autocompletion