Create initial design for TextField

example/lib/app.dart

@@ -1,15 +1,50 @@
 import 'package:flutter/material.dart';
+import 'package:language_tool/language_tool.dart';
+import 'package:languagetool_textfield/domain/mistake.dart';
+import 'package:languagetool_textfield/languagetool_textfield.dart';
 
+/// A main screen widget demonstrating library usage example
 class App extends StatefulWidget {
+ /// Creates a new instance of main screen widget
  const App({super.key});
 
  @override
  State<App> createState() => _AppState();
 }
 
 class _AppState extends State<App> {
+ final _langToolService = LangToolService(LanguageTool());
+ final _textController = LanguageToolTextEditingController(
+ text: 'OKAYOKAYOKAYOKAYOKAY',
+ mistakes: [
+ const Mistake(
+ message: 'bad',
+ type: 'bad',
+ offset: 0,
+ length: 3,
+ ),
+ const Mistake(
+ message: 'bad',
+ type: 'bad',
+ offset: 8,
+ length: 5,
+ ),
+ ],
+ );
+
  @override
  Widget build(BuildContext context) {
- return const Placeholder();
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: const EdgeInsets.all(20.0),
+ child: LanguageToolTextField(
+ langService: _langToolService,
+ controller: _textController,
+ style: const TextStyle(),
+ ),
+ ),
+ ),
+ );
  }
 }

example/pubspec.lock

@@ -196,15 +196,15 @@ packages:
  source: hosted
  version: "4.8.0"
  language_tool:
- dependency: transitive
+ dependency: "direct main"
  description:
  name: language_tool
  sha256: "90ceb6f0a0b57fb3a5b88be82ffd676c90639cd06d622d25f76add30d5a2acd6"
  url: "https://pub.dev"
  source: hosted
  version: "2.1.1"
  languagetool_textfield:
- dependency: "direct dev"
+ dependency: "direct main"
  description:
  path: ".."
  relative: true

example/pubspec.yaml

@@ -9,12 +9,13 @@ environment:
 dependencies:
  flutter:
  sdk: flutter
+ language_tool: ^2.1.1
+ languagetool_textfield:
+ path: ../
 
 dev_dependencies:
  flutter_test:
  sdk: flutter
- languagetool_textfield:
- path: ../
  solid_lints: ^0.0.14
 
 flutter:

lib/languagetool_textfield.dart

@@ -1 +1,6 @@
 library languagetool_textfield;
+
+export 'domain/language_check_service.dart';
+export 'implementations/lang_tool_service.dart';
+export 'presentation/language_tool_text_field.dart';
+export 'presentation/widgets/language_tool_text_editing_controller.dart';

lib/presentation/language_tool_text_field.dart

@@ -1,36 +1,66 @@
 import 'package:flutter/material.dart';
 import 'package:languagetool_textfield/domain/language_check_service.dart';
+import 'package:languagetool_textfield/presentation/widgets/language_tool_text_editing_controller.dart';
 
 /// A TextField widget that checks the grammar using the given [langService]
 class LanguageToolTextField extends StatefulWidget {
  /// A service for checking errors.
  final LanguageCheckService langService;
 
  /// A style to use for the text being edited.
- final TextStyle style;
+ final TextStyle? style;
 
  /// A decoration of this [TextField].
- final InputDecoration decoration;
+ final InputDecoration? decoration;
 
  /// A builder function used to build errors.
  final Widget Function()? mistakeBuilder;
 
+ /// A text controller used to highlight errors.
+ final LanguageToolTextEditingController? controller;
+
  /// Creates a widget that checks grammar errors.
  const LanguageToolTextField({
  Key? key,
  required this.langService,
  required this.style,
- required this.decoration,
+ this.decoration,
  this.mistakeBuilder,
+ this.controller,
  }) : super(key: key);
 
  @override
  State<LanguageToolTextField> createState() => _LanguageToolTextFieldState();
 }
 
 class _LanguageToolTextFieldState extends State<LanguageToolTextField> {
+ static const _borderRadius = 15.0;
+ static const _borderOpacity = 0.5;
+
+ final _textFieldController = LanguageToolTextEditingController();
+ final _textFieldBorder = OutlineInputBorder(
+ borderSide: BorderSide(
+ color: Colors.grey.withOpacity(_borderOpacity),
+ ),
+ borderRadius: BorderRadius.circular(_borderRadius),
+ );
+
  @override
  Widget build(BuildContext context) {
- return const Placeholder();
+ return TextField(
+ autocorrect: false,
+ enableSuggestions: false,
+ textCapitalization: TextCapitalization.none,
+ keyboardType: TextInputType.multiline,
+ maxLines: null,
+ style: widget.style,
+ decoration: widget.decoration ??
+ InputDecoration(
+ focusedBorder: _textFieldBorder,
+ enabledBorder: _textFieldBorder,
+ border: _textFieldBorder,
+ ),
+ controller: widget.controller ?? _textFieldController,
+ );
  }
 }

lib/presentation/widgets/language_tool_text_editing_controller.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import 'package:languagetool_textfield/domain/mistake.dart';
+
+/// A custom controller for an editable text field, that supports
+/// mistakes highlighting.
+class LanguageToolTextEditingController extends TextEditingController {
+ /// A list of mistakes in the text.
+ final List<Mistake> mistakes;
+
+ /// Creates a controller for an editable text field.
+ LanguageToolTextEditingController({
+ String? text,
+ this.mistakes = const [],
+ }) : super(text: text);
+
+ @override
+ TextSpan buildTextSpan({
+ required BuildContext context,
+ TextStyle? style,
+ required bool withComposing,
+ }) {
+ final children = <InlineSpan>[];
+ const underlineThickness = 2.0;
+ const backgroundOpacity = 0.2;
+
+ if (mistakes.isEmpty) {
+ return TextSpan(text: text, style: style);
+ }
+
+ final lastMistakeIndex = mistakes.length - 1;
+
+ for (int i = 0; i < mistakes.length; i++) {
+ final mistake = mistakes[i];
+ int previousMistakePosition = 0;
+ if (i > 0) {
+ final previousMistake = mistakes[i - 1];
+ previousMistakePosition =
+ previousMistake.offset + previousMistake.length;
+ }
+ final mistakeStart = mistake.offset;
+ final mistakeEnd = mistakeStart + mistake.length;
+
+ if (mistakeEnd > text.length) {
+ children.add(
+ TextSpan(
+ text: text.substring(previousMistakePosition),
+ ),
+ );
+ break;
+ }
+
+ children.add(
+ TextSpan(text: text.substring(previousMistakePosition, mistakeStart)),
+ );
+
+ final textStyle = style ?? const TextStyle();
+ final mistakeText = text.substring(mistakeStart, mistakeEnd);
+
+ // WidgetSpans with mistake text characters are used here to calculate the correct caret position, which can be incorrectly positioned because of the WidgetSpan issue, described here: https://github.com/flutter/flutter/issues/107432.
+ // TextSpan recognizer to process clicks can't be used, because it requires the RichText widget instead of TextField, which we are using. Issue described here: https://github.com/flutter/flutter/issues/34931
+
+ children.add(
+ TextSpan(
+ style: textStyle.copyWith(
+ decoration: TextDecoration.underline,
+ decorationColor: Colors.red,
+ decorationThickness: underlineThickness,
+ backgroundColor: Colors.red.withOpacity(backgroundOpacity),
+ ),
+ children: [
+ for (final mistakeCharacter in mistakeText.characters)
+ WidgetSpan(
+ child: Text(
+ mistakeCharacter,
+ style: style,
+ ),
+ ),
+ ],
+ ),
+ );
+ if (i == lastMistakeIndex) {
+ children.add(
+ TextSpan(
+ text: text.substring(mistakeEnd),
+ ),
+ );
+ }
+ }
+
+ return TextSpan(children: children, style: style);
+ }
+}