mre_fields 0.3.3

Flutter form fields that follow the language typed (auto RTL/LTR text and alignment), phone numbers validated for every country with a picker, and image paste.

mre_fields

Ordinary and form fields for Flutter with Unicode-wide text direction, phone numbers from any country, and pasted images. Everything uses your own ThemeData and can be translated.

What you get

• Direction for every Unicode writing system. Pinned Unicode 17.0.0 data covers LTR and RTL scripts, including supplementary planes. Arabic and English are examples, not limits. Plain text and existing widgets use the same helpers.
• A phone field that checks every country. 245 countries and regions, a searchable country picker, and a clear message for each problem. Paste [phone] and the country switches to Egypt on its own.
• Choose which countries are accepted. Allow only some, drop some, pin favorites. The picker, the paste and the validation all follow the same list.
• Paste images into a field. Keep them inside the input border with open, remove and replace, or hand them to your code.
• One theme, one place for texts. Radius and padding for every field in one spot, every text and error message replaceable for translation.
• Pieces you can use alone. The rules are plain functions and classes: parse a phone number, detect a direction or filter suggestions with no widget.
• Six platforms. Android, iOS, web, macOS, Windows and Linux.

Install

dependencies:
  mre_fields: ^0.3.3

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. A text field that follows the language.

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

3. A phone field. number.e164 is the number to save, null until it is valid.

final field = MREPhoneFormField(
  labelText: 'Phone number',
  onChanged: (number) {
    if (number.isValid) {
      saveNumber(number.e164!); // '[phone]'
    }
  },
);

4. Optional: let users paste images.

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

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
Ask for a phone number	MREPhoneField	Phone
Accept only some countries	MRECountrySelection	Phone
Validate a phone number in any field	MREPhoneValidators.valid	Phone
Paste images into a field	MRETextField(imagePaste:)	Image paste
Change radius, padding and texts everywhere	MREFieldsTheme, MREFieldsStrings	Theme
Use the rules with no widget	MREPhoneNumber.parse, detectTextDirection, mreFilterSuggestions	Functions

Choose the countries

const selection = MRECountrySelection(
  include: {'SA', 'AE', 'KW', 'QA', 'BH', 'OM'},
  favorites: ['SA', 'AE'],
  initial: 'SA',
);

final field = MREPhoneFormField(selection: selection);

Read a phone number in code

final number = MREPhoneNumber.parse('[phone]');

final country = number.country!.name; // 'Egypt'
final e164 = number.e164; // '[phone]'
final nice = number.international; // '[phone]'
final valid = number.isValid; // true

The other rules 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, text field, phone	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.1 or newer (Dart 3.10). CI runs the tests on 3.38.1, on the latest stable and on beta, and builds the example on every platform. The package also compiles to WebAssembly.

Questions

How is the direction chosen? The first strong Unicode character decides. Weak/neutral characters before it are skipped, so ،Hello is left to right. Some punctuation has a strong direction in Unicode. Without a strong character, widgets keep ambient direction. Detection reads at most 256 UTF-16 code units; see the direction guide for the full contract.

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.

Where do the phone rules come from? The libphonenumber data, through the phone_numbers_parser package. Your code uses MREPhoneNumber, so it does not depend on it.

Can I show country names in my language? Yes. Pass countryNameBuilder to the phone field and your texts through MREFieldsStrings. See the phone guide.

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? Use MRETextFormField and MREPhoneFormField. They take 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.

Documentation

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

Contributing

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

License

BSD 3-Clause. See LICENSE.

Ordinary fields and forms

Use MRETextField and MREPhoneField for standalone input. Use MRETextFormField and MREPhoneFormField for Form.validate, Form.save and Form.reset. The phone form saves an MREPhoneNumber and resets both its country and digits. Both phone variants accept decoration.

Migrating from 0.2

Replace old MRETextField / MREPhoneField uses that need form behavior with MRETextFormField / MREPhoneFormField. Phone form keys now use GlobalKey<FormFieldState<MREPhoneNumber>>. Image attachments now appear inside the field above its text. Custom MREImagePasteScope builders must place hooks.attachments in their own layout. Use MREImageCallbackPaste to own the entire presentation, or MREImageAttachmentPaste(builder: ...) to customize in-field attachments.

The direction data is distributed under the Unicode License.