• Introduction
• Getting Started
• Usage examples
  • Text View
  • Text Editing Controller
  • Context Menu Builder
  • Selection controls
  • Custom Formatters
  • Custom Toolbar Actions
• Note
• Issues
• Author

Introduction

• Formatted Text is a Text formatting package.

• One text can be wrapped aroung with multiple patterns to apply multiple TextStyles merged together. ( All TextStyles should be able to merged together )

• Child wrappers can be applied to substrings and they will be merged with parenet wrapper style. ( All TextStyles should be able to merged together )

• This package includes,

  • Text View
  • Text Editing Controller
  • Selection toolbar

Packages

formatted_text -

formatted_text_hooks -

Getting Started

Add as a dependency

dependencies:
  formatted_text: [latest-version]

If you are using flutter_hooks use formatted_text_hooks

dependencies:
  formatted_text_hooks: [latest-version]

Import package

import 'package:formatted_text/formatted_text.dart';

If using formatted_text_hooks

import 'package:formatted_text_hooks/formatted_text_hooks.dart';

Usage examples

Text View

Bold

FormattedText('*This text is bold*');

Italic

FormattedText('_This text is Italic_');

Strikethrough (~) and Underline (#) are also available as default formatters

Multi styling substrings

FormattedText('_This is *Bold Italic* Italic_');

Text Editing Controller

final textEditingController = FormattedTextEditingController();

or with hooks

final textEditingController = useFormattedTextController();

Custom Formatters

• Providing custom formatters will override the default formatters.

FormattedText(
  '==This text is orange==',
  formatters: [
    ... FormattedTextDefaults.formattedTextDefaultFormatters, // To add default formatters
    FormattedTextFormatter(
      patternChars: '==', // Pattern char(s)
      style: TextStyle(color: Colors.orange),
    )
  ],
)

Context Menu Builder

To get adaptive text selection toolbar with default formatter menu items,

contextMenuBuilder: (BuildContext context,
    EditableTextState editableTextState) {
  return FormattedTextContextMenuBuilder
    .adaptiveTextSelectionToolbar(
      editableTextState: editableTextState);
}

Custom Context Menu Builder Items

• Providing custom menu items will override the default formatter items.
• Don't escape patternChars.

contextMenuBuilder: (BuildContext context,
    EditableTextState editableTextState) {
  return FormattedTextContextMenuBuilder
      .adaptiveTextSelectionToolbar(
    editableTextState: editableTextState,
    items: [
      ...FormattedTextDefaults
          .formattedTextDefaultContextMenuItems, // Default formatters
      const FormattedTextContextMenuItem(
        label: 'Orange',
        patternChars: '==',
      ),
    ],
  );
},

Or

• Use context menu button items

contextMenuBuilder: (BuildContext context,
    EditableTextState editableTextState) {
  return AdaptiveTextSelectionToolbar.buttonItems(
    anchors: editableTextState.contextMenuAnchors,
    buttonItems: [
      ...editableTextState.contextMenuButtonItems,
      ...FormattedTextDefaults
          .formattedTextDefaultContextMenuButtonItems(
              editableTextState),
      FormattedTextContextMenuBuilder
          .buildContextMenuButtonItem(
        editableTextState: editableTextState,
        item: const FormattedTextContextMenuItem(
          label: 'Orange',
          patternChars: '==',
        ),
      ),
    ],
  );
}

[DEPRECATED]

Use Context Menu Builder

Selection controls

To display custom selection controls,

selectionControls: FormattedTextSelectionControls(),

Modify cut / copy / paste / select all action availability using Toolbar Options

toolbarOptions: ToolbarOptions(
  cut: false,
  copy: false,
  paste: false,
  selectAll: true,
)

Custom Toolbar Actions

• Providing custom actions will override the default actions except cut / copy / paste / select all.
• Don't escape patternChars.

selectionControls: FormattedTextSelectionControls(
  actions: [
    ... FormattedTextDefaults.formattedTextToolbarDefaultActions, // To add default actions
    FormattedTextToolbarAction(
      label: 'Orange',
      patternChars: '==',
    )
  ],
)

Note

• All formatter patterns must be distinctive
• Child patterns which are already applied will be considered normal text
• Child styles should be able to merge with parent styles

Issues

Please file any issues, bugs or feature requests as an issue on our GitHub page.

Author

This Formatted Text package is developed by NirmalCode.