TextFields are a very essential and at the same time a very basic part of any app or website, it may not be a very flashy componenet of the UI, however an app or a website having textfields loaded with essential functionalities can do wonders in regards with the User Experience

smart_textbar

smart_textbar is a Flutter Plugin that provides an ultimate Flutter textfield, drastically reducing the need to implement various functionalities, that although relatively complex but has become a norm in mordern apps and websites

Installation

dependencies:
  smart_textbar: <latest_version>

Usage

A usage example is provided below. Check the API Reference for detailed docs:

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:smart_textbar/smart_textbar.dart';
import 'package:smart_textbar/textbar.dart';

import 'package:autotrie/autotrie.dart';
import 'package:permission_handler/permission_handler.dart';


void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  //String _platformVersion = 'Unknown';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Ex(),
    );
  }
}

class texttbar_example extends StatefulWidget {
  @override
  _texttbar_exampleState createState() => _texttbar_exampleState();
}

class _texttbar_exampleState extends State<texttbar_example> {
  @override
  void initState() {
    // TODO: implement initState

    super.initState();
  }
  void permission() async{
    var status = await Permission.microphone.status;

    if (status.isDenied) {
      // We didn't ask for permission yet.
      await Permission.microphone.request();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Center(
          child: MyApp(),
        ),
      ),
    );
  }
}

class Ex extends StatefulWidget {
  @override
  _ExState createState() => _ExState();
}

class _ExState extends State<Ex> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: FlatButton(
          child: Text('here'),
          onPressed: (){
            Navigator.of(context).push(MaterialPageRoute(builder: (context) => TextBar(
              autoCorrect: true,
              blindMode: true,
              voiceToTextMode: true,
            ),));
          },
        ),
      ),
    );
  }
}

Modes

1.Blind Mode: Blind mode, is made to help the app/website users with sight disabilities, its basic functionality includes speaking out the latest word written by the user in the TextBar() widget, the word ending is identified by a blank space, thus letting the user know right away if there is a typo or any grammatical mistake in the text

How to use Blind Mode?

  • Set the bool property of the TextBar() widget, blindMode as true this would allow all the properties that are included in blindMode to show effect in the widget according to their values.

(By this version Blind mode will be able to support english language in over 60 accents from all over the world)

  • BlindMode Properties:
PropertyData TypeExplanation
Speaker LanguageString?this decides what language will the speaker speak(choose amoung the language codes available)
volumedoublethis will decide the volume of the voice of speaker
voice_pitchdoublethis will decide the pitch of the voice of speaker
ratedoublethis will decide the rate(speed) of the voice of speaker
speaker_highlight_colorColorthis will decide the color of the words that are currently being spoken by the speaker

2.Voice To Text Mode: voice to text mode is made to convert the words spoken by the user to the text in the TextBar() widget

How to use Voice To Text Mode?

  • Set the bool property of the TextBar() widget, voiceToTextMode as true this would allow all the properties that are included in voiceToTextModeto show effect in the widget according to their values.

  • Voice To Text Mode Properties:

PropertyData TypeExplanation
voice_button_iconIconthis decides what icon will the suffix iconButton of the TextBar() will have (the listening process to the user voice will start when this button will be pressed )

There are also many Methods available in Voice To Text Mode for various purposes such as, startListening(), *stopListening(), cancelListening() * and many more.. (For more information refer to the: GitHub Repo)

AutoSuggest

One of the most notable features of smart_textbar is the AutoSuggest functionality, it provides with a dataset of over 10000 most used english words , that are stored in the app in form of a Trie When TextBar() widget is used for the first time in the app by the user, the trie is populated and stored within the app itself which provides a fast and accurate list of recommendations every time user types a new word in the TextBar()

smart_textbar working:-

https://user-images.githubusercontent.com/66126437/126984706-9db55c0d-b831-4fb3-ba3b-5f006492b9e6.mp4

Libraries

AutoSuggest_algo
AutoSuggest_data
dictionary
smart_textbar
textbar