rich_field_controller 0.1.2 icon indicating copy to clipboard operation
rich_field_controller: ^0.1.2 copied to clipboard

A rich text field controller that turns any Flutter TextField into an wysiwyg filed.

Pub build License: MIT

A Flutter plugin that turns a TextField into a wysiwyg field.

What does it do:

An animated image of a TextField turned into a rich TextField

This plugin is still under development. So, Contributors are most welcome ;)

Usage #

This plugin inherits form TextEditingController. Therefore, whenever you want to turn a TextField into a wysiwyg, all you have to do is to set its controller to be an instance of RichTextFieldController.

The code below is extracted from the provided example. Check the examples folder for the complete code.

import 'package:rich_field_controller/rich_field_controller.dart';

Class Example {
  late final RichFieldController _controller;
  // This is provided for quick integration of common styling.
  // You can use a custom SelectionControls or a MaterialSelectionControls, etc..
  late final RichFieldSelectionControls _selectionControls;

  @override
  void initState() {
    super.initState();
    _controller = RichFieldController(_fieldNode);
    _selectionControls = RichFieldSelectionControls(context, _controller);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: TextField(
        controller: _controller,
        selectionControls: _selectionControls,
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

}

Updating text style #

To update a text style, invoke the void updateStyle(TextStyle textStyle) method on the RichFieldController instance. In the provided example, this method is extensively used by the RichfieldToolBarExample widget. The RichFieldController is completely uncoupled form the toolbar. Therefore, you can crate and style your own toolbar the way you please. Then, invoke the updateStyle method from the toolbar's actions accordingly. Here is snipped showing how to bold a selected text from a GestureDetector widget:

GestureDetector(
  onTap: (){
    controller.updateStyle(const TextStyle(fontWeight: FontWeight.bold));
  }
)

RichFieldSelectionControls (optional) #

For demonstration purposes, we have added the RichFieldSelectionControls to cover the basic styling (bold, italic, underline, strickThrough). Under the hood, it extends the MaterialTextSelectionControls and uses the updateStyle(TextStyle textStyle) method to apply styles. In your Flutter app, you may want to implement your own TextSelectionControls to apply the styles you need.

FocusNode #

If you provide a focusNode argument to the RichFieldController, the corresponding TextField widget will keep focus while being styled. That is particularly handy when you use a toolbar.

6
likes
110
pub points
52%
popularity

Publisher

unverified uploader

A rich text field controller that turns any Flutter TextField into an wysiwyg filed.

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.BSD-3-Clause (LICENSE)

Dependencies

collection, equatable, flutter

More

Packages that depend on rich_field_controller