A native textfield that can be used in place of Flutter's TextField widget.

Overview

Better Textfield

A native textfield that can be used in place of Flutter's TextField widget.

Better Textfield -A native textfield that can be used in place of Flutter's TextField widget.

Demo

demo.mp4

Here are some screenshots of the demo app:

Native Text Field Magnifier (loupe) effect Native Text Toolbar
NativeTextField Magnifier (loupe) effect Native Text Toolbar

You can also access the demo app via this link or by visiting release directory in the repository.

Install

The plugin package is under development. If you still want to use it in your app you can use the code from this repository.

Features

  • Better dragging of the cursor
  • Magnifier (loupe) effect
  • Fixes all issues described here: link
  • Supports setting values for text
  • Also supports retrieving input text via the text controller
  • Decent performance
  • Supports text selection and clipboard
  • Supports autocorrect
  • Supports direct sharing of text
  • Supports only Android for now

Problem

We generally use TextField and TextFormFields widgets for input field. If you notice, there is a glitch in Flutter’s widget while dragging the cursor, where within a word if you drag the cursor it works fine, but if you try to drag the cursor from one word to another, hen draggable cursor disappears.

(Screen recording attached for reference for Reflectly app developed in Flutter.)

reflectly.mp4

Solution/Approach

Since this problem only occurs in the TextField widget available in Flutter, we can use the Hybrid composition of AndroidView in Flutter to display a native textfield instead of a regular textfield. Note, however, that rendering an AndroidView inside a Flutter widget is quite performance intensive and can slow down your app in some cases. Also, we need to bump up the minSdkVersion to at least 19 to support hybrid composition.

I have referred to the following docs to understand how to host a native view in Flutter.

Next, I created a MethodChannel to communicate with the native code.

I also created a native text field controller class to help me retrieve and set text values in the native text field using the MethodChannel.

And that's about it. If you do it right, this only takes 20-30 minutes and greatly improves the app experience if your app is primarily text input based (like a text editor app).

Note: We can also extend this approach to support iOS UIViews.

Code Explaination

The structure of the lib directory of the app is as follows:

│   main.dart [Main app file (starting point of the app)]
│   
├───controllers
│       native_text_field_controller.dart [NativeTextField controller, which handles the communication of data between the textfield and the flutter app] 
└───views
        home_page.dart [Home page of the demo app]

The structure of the android\app\src\main\kotlin\com\abhay directory of the app is as follows:

└───better_textfield
        MainActivity.kt [Main activity of the android app]
        NativeView.kt [Native text view class, which is the view that is displayed on the screen]
        NativeViewFactory.kt [Native view factory class, which is the factory class that is used to create the native view]

Built With

Stay Up-to-Date

Star project

Releases(v1.0.0)
Owner
Abhay Maurya
Reliable Flutter App Dev.
Abhay Maurya
A repository for experimenting with elf loading and in-place patching of android native libraries on non-android operating systems.

droidports: A repository for experimenting with elf loading and in-place patching of android native libraries on non-android operating systems. Discla

João Henrique 21 Jun 13, 2022
An embedded CAN bus sniffer which is able to monitor any of the vehicle internal CAN bus and perform some action by triggering new CAN messages.

An embedded CAN bus sniffer which is able to monitor any of the vehicle internal CAN bus and perform some action by triggering new CAN messages. In this way certain vehicle functionality can be triggered by responding to custom steering wheel button events, or use the vehicle virtual cockpit to display OBD-PIDs values instead of relying on an external display to present new information to the user

null 13 May 21, 2022
Plays native alert sound and shows native dialogs/alerts in your Flutter app.

flutter_platform_alert 2021 © Weizhong Yang a.k.a zonble. A simple plugin to present native alerts, including playing alert sounds and showing alert d

Weizhong Yang a.k.a zonble 52 Jun 18, 2022
Visual Studio native debugger extension to help debug native applications using Mono.

Unity Mixed Callstack UnityMixedCallstack is a Visual Studio 2017/2019 extension to help debug native applications embedding Mono, like Unity. If you

Unity Technologies 66 Jun 25, 2022
A Flutter Web Plugin to display Text Widget as Html for SEO purpose

SEO Renderer A flutter plugin (under development) to render text widgets as html elements for SEO purpose. Created specifically for issue https://gith

Sahdeep Singh 88 Jun 17, 2022
YouTube subscriber counter widget

YouTube subscriber counter My version of AlexGyver's project. My improvements Fix work with new youtube API Change subscribers displaying from 42000 t

null 1 Oct 26, 2021
Flutter real-time magnifying glass lens widget with Barrel/Pincushion distortion

MagnifyingGlass Flutter plugin Flutter real-time magnifying glass lens widget with Barrel/Pincushion distortion. Works on Android, iOS and desktop. Do

Marco Bavagnoli 9 Apr 26, 2022
A Navigator 2.0 based Flutter widget that automatically splits the screen into two views based on available space

A Navigator 2.0 based Flutter widget that automatically splits the screen into two views based on available space

null 3 Feb 8, 2022
imGuIZMO.quat is a ImGui widget: like a trackball it provides a way to rotate models, lights, or objects with mouse, and graphically visualize their position in space, also around any single axis (Shift/Ctrl/Alt/Super)

imGuIZMO.quat v3.0 imGuIZMO.quat is a ImGui widget: like a trackball it provides a way to rotate models, lights, or objects with mouse, and graphicall

Michele Morrone 254 Jun 12, 2022
A single-file, immediate-mode sequencer widget for C++17, Dear ImGui and EnTT

A single-file, immediate-mode sequencer widget for C++17, Dear ImGui and EnTT Table of Contents Overview Features Design Decisions Todo Open Questions

Alan Jefferson 180 Jun 13, 2022
An improved plot widget for Dear ImGui, aimed at displaying audio data

imgui-plot An improved plot widget for Dear ImGui, aimed at displaying audio data TOC Screenshots Rationale Usage Installation FAQ Screenshots Display

Anton Lobashev 387 Jun 26, 2022
The Pizza Compass will determine your location and direct you to the nearest pizza place. It’s like a regular compass, but better!

Pizza_Compass A Particle project named Pizza_Compass Welcome to your project! Every new Particle project is composed of 3 important elements that you'

Joe Grand 53 Apr 16, 2022
A place to collaborate on code for the Embedded.fm book club. Currently reading "STM32 ARM Programming for Embedded Systems".

Welcome to the Book Club Code site! This is a place for the Embedded.fm book club to collaborate and learn together. Repo Structure Guide Top-level fo

Peter Griffin 10 Jan 13, 2022
Proof of concept Beacon Object File (BOF) that attempts to detect userland hooks in place by AV/EDR

Detect-Hooks Detect-Hooks is a proof of concept Beacon Object File (BOF) that attempts to detect userland API hooks in place by AV/EDR. The BOF will r

anthemtotheego 110 Jun 27, 2022
This project helps a person park their car in their garage in the same place every time.

garage-parking-sensor Description This project is developed to help a person park their car in their garage in the same place every time. Normally peo

Calvin Pereira 2 Sep 13, 2021
A One Stop Place to find many useful Snippets for competitive programming

CP_Snippets A One Stop Place to find many useful Snippets for competetive programming Contribution Procedure Raise an issue about the snippet you want

Rasesh Shetty 5 Dec 6, 2021
Hack4Pan First Place. A robot that aims to improve your aim

Don't Spray Hack4Pan First Place submission Watch the demo: https://www.twitch.tv/videos/1273582339?t=01h43m01s where I presented to tech youtubers li

Jason Truong 2 Feb 2, 2022
Theres no place like $HOME

Information Here are some details about my setup: OS: Arch Linux Terminal: Alacritty Shell: Bash WM: dwm-flexipatch Editor: Vim Status Bar: vanilla dw

Junnun Karim 126 Jun 24, 2022