The spell checker system is for the most part upheld by engines for the web and applications. For instance, as in the web with HTML, we have identified quality spellcheck for editable labels. With iOS or Android local, they additionally have spellCheckingType or Spell checker framework. However, not in Flutter, they’re setting spell checkers as a to-do for both the web and application.
This blog will explore the Spell Checker System In Flutter. We perceive how to execute a demo program. We will show you how to do a simple spell-checker system that can work well for your flutter applications.
If you’re looking for the best flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents::
Introduction:
A spell checker is significant since your application has an editable text form. Furthermore, you would rather not depend on yourself while composing to accept that there are no mistakes. Then, having a spell checker can assist you a ton with incorrectly spelled words.
Demo Module ::
This demo video shows how to create the spell checker system in flutter and shows how a spell checker system will work in your flutter applications. We will show a user a spell checker that can help her find incorrect words. It will be shown on your devices.
Code Implement:
You need to implement it in your code respectively:
Create a new dart file called custom_text_editing_controller.dart inside the lib folder.
If you investigate the document for TextStyle, you can see there’s a segment where they referenced making a wavy red underline for black text. Along these lines, you can set the text style for each by switching over completely to TextSpan.
Here we go, we want to extend a custom TextEdittingController, I’ll call it CustomTextEdittingController, and give it a property listErrorTexts to store every one of the words that need a red underline on it.
Presently, you want to override the buildTextSpan technique by actually looking at listErrorTexts. On the off chance that your text matches any in listErrorTexts, give it a custom style. I utilized splitMapJoin controlled by Dart language to plan them into various TextSpans.
import 'package:flutter/material.dart';
class CustomTextEditingController extends TextEditingController {
final List<String> listErrorTexts;
CustomTextEditingController({String? text, this.listErrorTexts = const []})
: super(text: text);
@override
TextSpan buildTextSpan(
{required BuildContext context,
TextStyle? style,
required bool withComposing}) {
final List<TextSpan> children = [];
if (listErrorTexts.isEmpty) {
return TextSpan(text: text, style: style);
}
try {
text.splitMapJoin(
RegExp(r'\b(' + listErrorTexts.join('|').toString() + r')+\b'),
onMatch: (m) {
children.add(TextSpan(
text: m[0],
style: style!.copyWith(
decoration: TextDecoration.underline,
decorationStyle: TextDecorationStyle.wavy,
decorationColor: Colors.red),
));
return "";
}, onNonMatch: (n) {
children.add(TextSpan(text: n, style: style));
return n;
});
} on Exception catch (e) {
return TextSpan(text: text, style: style);
}
return TextSpan(children: children, style: style);
}
}
Create a new dart file called list_english_words.dart inside the lib folder.
For the word reference, you can utilize this list_english_words however for my purposes, that package has an excessive number of words (~380k words) and many are repetitive for the standard English language. So I got my rundown which is just about ~84k words. Yet, I will show you a few words.
const List<String> listEnglishWords = [
'a',
'aa',
'aaa',
'aachen',
'aardvark',
'aardvarks',
'aaron',
'ab',
'aba',
'ababa',
'abaci',
'aback',
'abactor',
'abactors',
'abacus',
'abacuses',
'abaft',
'abalone',
'abandon',
'abandoned',
'abandonee',
'abandonees',
'abandoning',
'abandonment',
'abandons',
'abase',
'abased',
'abasement',
'abases',
'abash',
'abashed',
'abashes',
'abashing',
'abasing',
'abatable',
'abate',
'abated',
'abatement',
'abatements',
'abater',
'abaters',
'abates',
'abating',
'abator',
'abators',
'abattoir',
'abattoirs',
'abbacies',
'abbacy',
'abbess',
'abbesses',
'abbey',
'abbeys',
'abbot',
'abbots',
'abbotsbury',
'abbott',
'abbreviate',
'abbreviated',
'abbreviates',
'abbreviating',
'abbreviation',
'abbreviations',
'abbreviator',
'abbreviators',
'abc',
'abdicant',
'abdicants',
'abdicate',
'abdicated'
];
Create a new dart file called home_page.dart inside the lib folder.
First, we will add two final List<String> listErrorTexts and listTexts are equal to the square bracket. Also, we will add CustomTextEditingController was _controller.
final List<String> listErrorTexts = [];
final List<String> listTexts = [];
CustomTextEditingController _controller = CustomTextEditingController();
We will create an initState() method. In this method, we will add _controller is equal to the CustomTextEditingController(listErrorTexts: listErrorTexts)
@override
void initState() {
_controller = CustomTextEditingController(listErrorTexts: listErrorTexts);
super.initState();
}
The thought is straightforward, each time you type the word and hit the space, then you check for the word just before it. On the off chance that it is incorrectly spelled, add it to listErrorTexts, if not you’ll, in any case, have to save it in a stored array so when this word shows up again you don’t have to query in the word reference any longer.
I made a TextFormField widget in a different file and a capability called handleSpellCheck relegated to the onChange event of TextFormField.
void _handleOnChange(String text) {
_handleSpellCheck(text, true);
}
void _handleSpellCheck(String text, bool ignoreLastWord) {
if (!text.contains(' ')) {
return;
}
final List<String> arr = text.split(' ');
if (ignoreLastWord) {
arr.removeLast();
}
for (var word in arr) {
if (word.isEmpty) {
continue;
} else if (_isWordHasNumberOrBracket(word)) {
continue;
}
final wordToCheck = word.replaceAll(RegExp(r"[^\s\w]"), '');
final wordToCheckInLowercase = wordToCheck.toLowerCase();
if (!listTexts.contains(wordToCheckInLowercase)) {
listTexts.add(wordToCheckInLowercase);
if (!listEnglishWords.contains(wordToCheckInLowercase)) {
listErrorTexts.add(wordToCheck);
}
}
}
}
bool _isWordHasNumberOrBracket(String s) {
return s.contains(RegExp(r'[0-9\()]'));
}
In the body, we should wrap your TextFormField with a Focus widget to recognize whether the client’s mouse has lost focus. One more, It’s more helpful on the off chance that you carry out a custom TextFormField and can re-use it anyplace. Then you want to allocate the default value to your CustomTextEdittingController in initState().
Column(
children: [
Image.asset("assets/logo.png",width: 300,height: 200,),
Container(
padding: const EdgeInsets.all(36.0),
width: 400,
child: Focus(
onFocusChange: (hasFocus) {
if (!hasFocus) {
_handleSpellCheck(_controller.text, false);
}
},
child: TextFormField(
controller: _controller,
onChanged: _handleOnChange,
minLines: 5,
maxLines: 10,
decoration: const InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)))),
),
),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'custom_text_editing_controller.dart';
import 'list_english_words.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final List<String> listErrorTexts = [];
final List<String> listTexts = [];
CustomTextEditingController _controller = CustomTextEditingController();
@override
void initState() {
_controller = CustomTextEditingController(listErrorTexts: listErrorTexts);
super.initState();
}
void _handleOnChange(String text) {
_handleSpellCheck(text, true);
}
void _handleSpellCheck(String text, bool ignoreLastWord) {
if (!text.contains(' ')) {
return;
}
final List<String> arr = text.split(' ');
if (ignoreLastWord) {
arr.removeLast();
}
for (var word in arr) {
if (word.isEmpty) {
continue;
} else if (_isWordHasNumberOrBracket(word)) {
continue;
}
final wordToCheck = word.replaceAll(RegExp(r"[^\s\w]"), '');
final wordToCheckInLowercase = wordToCheck.toLowerCase();
if (!listTexts.contains(wordToCheckInLowercase)) {
listTexts.add(wordToCheckInLowercase);
if (!listEnglishWords.contains(wordToCheckInLowercase)) {
listErrorTexts.add(wordToCheck);
}
}
}
}
bool _isWordHasNumberOrBracket(String s) {
return s.contains(RegExp(r'[0-9\()]'));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Flutter Spell Checker Demo'),
backgroundColor: Colors.cyan,
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Column(
children: [
Image.asset("assets/logo.png",width: 300,height: 200,),
Container(
padding: const EdgeInsets.all(36.0),
width: 400,
child: Focus(
onFocusChange: (hasFocus) {
if (!hasFocus) {
_handleSpellCheck(_controller.text, false);
}
},
child: TextFormField(
controller: _controller,
onChanged: _handleOnChange,
minLines: 5,
maxLines: 10,
decoration: const InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)))),
),
),
],
),
);
}
}
Conclusion:
In the article, I have explained the Spell Checker System structure in a flutter; you can modify this code according to your choice. This was a small introduction to Spell Checker System User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying the Spell Checker System in your flutter projects. We will show you what the Introduction is and make a demo program for working with Spell Checker System in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
