mirror of
https://github.com/GitJournal/GitJournal.git
synced 2025-06-27 01:02:14 +08:00
AutoCompleter: Move to its own file
This commit is contained in:
Vishesh Handa
@ -2,7 +2,7 @@ import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:time/time.dart';
|
||||
import 'package:gitjournal/widgets/autocompleter.dart';
|
||||
|
||||
void main() => runApp(MyApp());
|
||||
|
||||
@ -49,7 +49,7 @@ class _MyHomePageState extends State<MyHomePage> {
|
||||
focusNode: _focusNode,
|
||||
key: _textFieldKey,
|
||||
style: _textFieldStyle,
|
||||
maxLines: null,
|
||||
maxLines: 300,
|
||||
);
|
||||
|
||||
textField = AutoCompleter(
|
||||
@ -76,141 +76,3 @@ class _MyHomePageState extends State<MyHomePage> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AutoCompleter extends StatefulWidget {
|
||||
final FocusNode textFieldFocusNode;
|
||||
final GlobalKey textFieldKey;
|
||||
final TextStyle textFieldStyle;
|
||||
final TextEditingController textController;
|
||||
final Widget child;
|
||||
|
||||
final String startToken;
|
||||
final String endToken;
|
||||
|
||||
AutoCompleter({
|
||||
@required this.textFieldFocusNode,
|
||||
@required this.textFieldKey,
|
||||
@required this.textFieldStyle,
|
||||
@required this.textController,
|
||||
@required this.child,
|
||||
@required this.startToken,
|
||||
@required this.endToken,
|
||||
});
|
||||
|
||||
@override
|
||||
_AutoCompleterState createState() => _AutoCompleterState();
|
||||
}
|
||||
|
||||
class _AutoCompleterState extends State<AutoCompleter> {
|
||||
OverlayEntry overlayEntry;
|
||||
String prevText;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
widget.textController.addListener(_textChanged);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_hideOverlay();
|
||||
widget.textController.removeListener(_textChanged);
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return widget.child;
|
||||
}
|
||||
|
||||
void _textChanged() {
|
||||
var selection = widget.textController.selection;
|
||||
var cursorPos = selection.baseOffset;
|
||||
var text = widget.textController.text;
|
||||
|
||||
var start = text.lastIndexOf(RegExp(r' |^'), cursorPos - 1) + 1;
|
||||
var word = text.substring(start, cursorPos);
|
||||
print('text: $word');
|
||||
if (word.startsWith(widget.startToken)) {
|
||||
_showOverlayTag(context, text.substring(0, cursorPos));
|
||||
} else if (word.endsWith(widget.endToken)) {
|
||||
_hideOverlay();
|
||||
}
|
||||
|
||||
prevText = text;
|
||||
}
|
||||
|
||||
/// newText is used to calculate where to put the completion box
|
||||
void _showOverlayTag(BuildContext context, String newText) async {
|
||||
// Code reference for overlay logic from MTECHVIRAL's video
|
||||
// https://www.youtube.com/watch?v=KuXKwjv2gTY
|
||||
|
||||
//print('showOverlaidTag: $newText');
|
||||
|
||||
RenderBox renderBox = widget.textFieldKey.currentContext.findRenderObject();
|
||||
// print("render Box: ${renderBox.size}");
|
||||
|
||||
TextPainter painter = TextPainter(
|
||||
textDirection: TextDirection.ltr,
|
||||
text: TextSpan(
|
||||
style: widget.textFieldStyle,
|
||||
text: newText,
|
||||
),
|
||||
maxLines: null,
|
||||
);
|
||||
painter.layout(maxWidth: renderBox.size.width);
|
||||
|
||||
List<LineMetrics> lines = painter.computeLineMetrics();
|
||||
double height = 0;
|
||||
for (var lm in lines) {
|
||||
height += lm.height;
|
||||
}
|
||||
double width = lines.last.width;
|
||||
|
||||
//print("Focus Node Offset dx: ${_focusNode.offset.dx}");
|
||||
//print("Focus Node Offset dy: ${_focusNode.offset.dy}");
|
||||
|
||||
//print("Painter ${painter.width} $height");
|
||||
|
||||
_hideOverlay();
|
||||
overlayEntry = OverlayEntry(builder: (context) {
|
||||
return Positioned(
|
||||
// Decides where to place the tag on the screen.
|
||||
top: widget.textFieldFocusNode.offset.dy + height + 3,
|
||||
left: widget.textFieldFocusNode.offset.dx + width,
|
||||
|
||||
// Tag code.
|
||||
child: const Material(
|
||||
elevation: 4.0,
|
||||
color: Colors.lightBlueAccent,
|
||||
child: Text(
|
||||
'Show tag here',
|
||||
style: TextStyle(
|
||||
fontSize: 20.0,
|
||||
),
|
||||
)),
|
||||
);
|
||||
});
|
||||
Overlay.of(context).insert(overlayEntry);
|
||||
|
||||
// Removes the over lay entry from the Overly after 500 milliseconds
|
||||
await Future.delayed(5000.milliseconds);
|
||||
_hideOverlay();
|
||||
}
|
||||
|
||||
void _hideOverlay() {
|
||||
if (overlayEntry != null) {
|
||||
overlayEntry.remove();
|
||||
overlayEntry = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
// https://levelup.gitconnected.com/flutter-medium-like-text-editor-b41157f50f0e
|
||||
// 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 5: Overlay disappears too fast
|
||||
// Bug 7: Clicking on the text should result in auto-completion
|
||||
// Bug 8: On clicking somewhere else the suggestion box should disappear
|
||||
// Bug 9: RTL support
|
||||
|
||||
143
lib/widgets/autocompleter.dart
Normal file
143
lib/widgets/autocompleter.dart
Normal file
@ -0,0 +1,143 @@
|
||||
import 'dart:ui';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:time/time.dart';
|
||||
|
||||
class AutoCompleter extends StatefulWidget {
|
||||
final FocusNode textFieldFocusNode;
|
||||
final GlobalKey textFieldKey;
|
||||
final TextStyle textFieldStyle;
|
||||
final TextEditingController textController;
|
||||
final Widget child;
|
||||
|
||||
final String startToken;
|
||||
final String endToken;
|
||||
|
||||
AutoCompleter({
|
||||
@required this.textFieldFocusNode,
|
||||
@required this.textFieldKey,
|
||||
@required this.textFieldStyle,
|
||||
@required this.textController,
|
||||
@required this.child,
|
||||
@required this.startToken,
|
||||
@required this.endToken,
|
||||
});
|
||||
|
||||
@override
|
||||
_AutoCompleterState createState() => _AutoCompleterState();
|
||||
}
|
||||
|
||||
class _AutoCompleterState extends State<AutoCompleter> {
|
||||
OverlayEntry overlayEntry;
|
||||
String prevText;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
widget.textController.addListener(_textChanged);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_hideOverlay();
|
||||
widget.textController.removeListener(_textChanged);
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return widget.child;
|
||||
}
|
||||
|
||||
void _textChanged() {
|
||||
var selection = widget.textController.selection;
|
||||
var cursorPos = selection.baseOffset;
|
||||
var text = widget.textController.text;
|
||||
|
||||
var start = text.lastIndexOf(RegExp(r' |^'), cursorPos - 1) + 1;
|
||||
var word = text.substring(start, cursorPos);
|
||||
print('text: $word');
|
||||
if (word.startsWith(widget.startToken)) {
|
||||
_showOverlayTag(context, text.substring(0, cursorPos));
|
||||
} else if (word.endsWith(widget.endToken)) {
|
||||
_hideOverlay();
|
||||
}
|
||||
|
||||
prevText = text;
|
||||
}
|
||||
|
||||
/// newText is used to calculate where to put the completion box
|
||||
void _showOverlayTag(BuildContext context, String newText) async {
|
||||
// Code reference for overlay logic from MTECHVIRAL's video
|
||||
// https://www.youtube.com/watch?v=KuXKwjv2gTY
|
||||
|
||||
//print('showOverlaidTag: $newText');
|
||||
|
||||
RenderBox renderBox = widget.textFieldKey.currentContext.findRenderObject();
|
||||
// print("render Box: ${renderBox.size}");
|
||||
|
||||
TextPainter painter = TextPainter(
|
||||
textDirection: TextDirection.ltr,
|
||||
text: TextSpan(
|
||||
style: widget.textFieldStyle,
|
||||
text: newText,
|
||||
),
|
||||
maxLines: null,
|
||||
);
|
||||
painter.layout(maxWidth: renderBox.size.width);
|
||||
|
||||
List<LineMetrics> lines = painter.computeLineMetrics();
|
||||
double height = 0;
|
||||
for (var lm in lines) {
|
||||
height += lm.height;
|
||||
}
|
||||
double width = lines.last.width;
|
||||
|
||||
//print("Focus Node Offset dx: ${_focusNode.offset.dx}");
|
||||
//print("Focus Node Offset dy: ${_focusNode.offset.dy}");
|
||||
|
||||
//print("Painter ${painter.width} $height");
|
||||
|
||||
_hideOverlay();
|
||||
overlayEntry = OverlayEntry(builder: (context) {
|
||||
return Positioned(
|
||||
// Decides where to place the tag on the screen.
|
||||
top: widget.textFieldFocusNode.offset.dy + height + 3,
|
||||
left: widget.textFieldFocusNode.offset.dx + width,
|
||||
|
||||
// Tag code.
|
||||
child: const Material(
|
||||
elevation: 4.0,
|
||||
color: Colors.lightBlueAccent,
|
||||
child: Text(
|
||||
'Show tag here',
|
||||
style: TextStyle(
|
||||
fontSize: 20.0,
|
||||
),
|
||||
)),
|
||||
);
|
||||
});
|
||||
Overlay.of(context).insert(overlayEntry);
|
||||
|
||||
// Removes the over lay entry from the Overly after 500 milliseconds
|
||||
await Future.delayed(5000.milliseconds);
|
||||
_hideOverlay();
|
||||
}
|
||||
|
||||
void _hideOverlay() {
|
||||
if (overlayEntry != null) {
|
||||
overlayEntry.remove();
|
||||
overlayEntry = null;
|
||||
}
|
||||
}
|
||||
}
|
||||
// https://levelup.gitconnected.com/flutter-medium-like-text-editor-b41157f50f0e
|
||||
// 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 5: Overlay disappears too fast
|
||||
// Bug 7: Clicking on the text should result in auto-completion
|
||||
// Bug 8: On clicking somewhere else the suggestion box should disappear
|
||||
// Bug 9: RTL support
|
||||
Reference in New Issue
Block a user