pub package BSD-3-Clause License

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 Package

formatted_text_hooks - Formatted Text Hooks Package

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*');

Bold Text Image

Italic

FormattedText('_This text is Italic_');

Italic Text Image

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 Formatter Image - Orange Text

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

Libraries

formatted_text