mre_fields 0.1.1

Form fields for Flutter: text that follows the language typed (RTL and LTR), clear button, suggestions and image paste. Themeable and localizable.

mre_fields

Text fields and texts for Flutter that follow the language being typed: Arabic reads from the right, English from the left, with no code from you. Paste images into a field, suggest values, and theme everything from your own ThemeData.

Why use it

• Right direction, automatically. The first word with a letter decides. Numbers and symbols before it are skipped, so 123 مرحبا is right to left.
• Works with your theme. Colors and fonts come from your ThemeData. Set a value once for the whole app, or for a single field.
• Ready for translation. Every text a field shows can be replaced.
• Pieces, not a black box. Every rule is also a plain function or widget you can use alone.
• Six platforms. Android, iOS, web, macOS, Windows and Linux. CI builds the example on all of them with the latest stable Flutter.

Install

dependencies:
  mre_fields: ^0.1.1

import 'package:mre_fields/mre_fields.dart';

Quick start

1. Register the theme once. Skip this to use the defaults.

final app = MaterialApp(
  theme: ThemeData(
    extensions: const [
      MREFieldsTheme(
        fieldBorderRadius: 16,
        contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 16),
      ),
    ],
  ),
  home: const HomePage(),
);

2. Use a field. It changes direction as the user types.

final field = MRETextField(
  labelText: 'Name',
  hintText: 'Type in any language',
  showClearButton: true,
);

3. Optional: let users paste images.

final field = MRETextField(
  labelText: 'Message',
  maxLines: 3,
  imagePaste: MREImageAttachmentPaste(maxImages: 4),
);

Run the example app to try everything:

cd example
flutter run   # any device: phone, desktop or web

What you can do

I want to...	Use	Guide
Show text in its own direction	MREAutoText, Text.autoDirection()	Text direction
A form field that follows the language	MRETextField	Text field
Suggestions and a clear button	MRETextField(suggestions:, showClearButton:)	Text field
Paste images into a field	MRETextField(imagePaste:)	Image paste
Change radius, padding and texts everywhere	MREFieldsTheme, MREFieldsStrings	Theme
Use the rules with no widget	detectTextDirection, safeDisplayText, mreFilterSuggestions, mreSniffImageMimeType	Functions
Give any TextField image paste	MREImagePasteScope	Image paste

Use the functions without a widget

final direction = detectTextDirection('مرحبا'); // TextDirection.rtl
final isRtl = '123 hello'.isRtl; // false
final cities = mreFilterSuggestions(allCities, 'ai'); // ['Cairo']
final type = mreSniffImageMimeType(bytes); // 'image/png' or null

Change one field, or all of them

Order of priority: a widget parameter, then MREFieldsTheme, then your InputDecorationTheme, then the default.

final field = MRETextField(
  labelText: 'Search',
  borderRadius: 28, // this field only; the theme keeps its own radius
  contentPadding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
);

Dark mode, breakpoints and translated texts are in the theme guide.

Platform support

Platform	Text direction and field	Images arrive through
Android	yes	selection menu, on-screen keyboard (stickers, GIFs, images)
iOS	yes	selection menu
Web	yes	browser paste event (Ctrl or Cmd + V), selection menu
macOS, Windows, Linux	yes	paste shortcut, selection menu

Needs Flutter 3.38 or newer. The package also compiles to WebAssembly.

Questions

Which languages count as right to left? Every right-to-left script: Arabic, Hebrew, Persian, Urdu, Pashto, Kurdish (Sorani), Syriac, Thaana, N'Ko and more.

What if I want a fixed direction? Set textDirection on the field, for example TextDirection.ltr for emails and links.

Does it work inside a Form? Yes. MRETextField takes a validator, an onSaved and a fieldKey like TextFormField.

Does image paste need permissions? Not on the web: the browser gives the image in its paste event. Mobile systems may show their own notice when an app reads the clipboard.

Can I replace the English texts? Yes. Pass your own MREFieldsStrings in MREFieldsTheme. See the theme guide.

Documentation

• API reference
• Guides: theme, text direction, text field, image paste, functions
• Example app and changelog

Coming next

A phone number field with a country picker and validation for every country.

Contributing

flutter pub get
flutter analyze
flutter test
flutter widget-preview start   # preview any widget with @MREPreview()

License

BSD 3-Clause. See LICENSE.