• Introduction
• Getting Started
• Usage examples
  • Text View
  • Text Editing Controller
  • Selection controls
  • Custom Formatters
  • Custom Toolbar Actions

Introduction

• Formatted Text is a Text formatting package.

• Under the hood this package use regex for matching patterns and applying TextStyle provided for each pattern.

• One text can be wrapped aroung with multiple patterns to apply multiple TextStyles merged together. ( 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 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

Text Editing Controller

final textEditingController = FormattedTextEditingController();

or

final textEditingController = useFormattedTextController();

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 Formatters

• Providing custom formatters will override the default formatters.
• Formatters use regex for finding matches. Escape patternChars except the first char.

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

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: '==',
    )
  ],
)