Create initial design for TextField

example/lib/app.dart

@@ -1,15 +1,36 @@
 import 'package:flutter/material.dart';
+import 'package:language_tool/language_tool.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());
+
+ @override
+ void initState() {
+ super.initState();
+ }
+
  @override
  Widget build(BuildContext context) {
- return const Placeholder();
+ return Scaffold(
+ body: Center(
+ child: Padding(
+ padding: const EdgeInsets.all(20.0),
+ child: LanguageToolTextField(
+ langService: _langToolService,
+ 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,5 @@
 library languagetool_textfield;
+
+export 'domain/language_check_service.dart';
+export 'implementations/lang_tool_service.dart';
+export 'presentation/language_tool_text_field.dart';

lib/presentation/language_tool_text_field.dart

@@ -1,27 +1,80 @@
 import 'package:flutter/material.dart';
 import 'package:languagetool_textfield/domain/language_check_service.dart';
+import 'package:languagetool_textfield/domain/mistake.dart';
+import 'package:languagetool_textfield/presentation/widgets/language_tool_text_editing_controller.dart';
 
 class LanguageToolTextField extends StatefulWidget {
  final LanguageCheckService langService;
- final TextStyle style;
- final InputDecoration decoration;
+ final TextStyle? style;
+ final InputDecoration? decoration;
  final Widget Function()? mistakeBuilder;
+ final LanguageToolTextEditingController? controller;
 
  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> {
+ final _textFieldController = LanguageToolTextEditingController(
+ text: 'OkayOkayOkay',
+ mistakes: [
+ const Mistake(
+ message: 'bad',
+ type: 'bad',
+ offset: 1,
+ length: 2,
+ replacements: ['1'],
+ ),
+ const Mistake(
+ message: 'bad',
+ type: 'bad',
+ offset: 4,
+ length: 2,
+ replacements: ['1'],
+ ),
+ const Mistake(
+ message: 'bad',
+ type: 'bad',
+ offset: 8,
+ length: 2,
+ replacements: ['1'],
+ ),
+ ],
+ );
+ static const _borderRadius = 15.0;
+ static const _borderOpacity = 0.5;
+ 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,71 @@
+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 = <TextSpan>[];
+ const underlineThickness = 2.0;
+ const backgroundOpacity = 0.2;
+
+ if (mistakes.isEmpty) {
+ return TextSpan(text: text, style: style);
+ }
+
+ 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;
+
+ children.add(
+ TextSpan(text: text.substring(previousMistakePosition, mistakeStart)),
+ );
+
+ final textStyle = style ?? const TextStyle();
+ children.add(
+ TextSpan(
+ text: text.substring(mistakeStart, mistakeEnd),
+ style: textStyle.copyWith(
+ decoration: TextDecoration.underline,
+ decorationColor: Colors.red,
+ decorationThickness: underlineThickness,
+ backgroundColor: Colors.red.withOpacity(backgroundOpacity),
+ ),
+ ),
+ );
+
+ if (i == mistakes.length - 1) {
+ children.add(
+ TextSpan(
+ text: text.substring(
+ mistakeEnd,
+ ),
+ ),
+ );
+ }
+ }
+
+ return TextSpan(children: children, style: style);
+ }
+}