[Question] How to change font style inside text editor?

[tamasregenye]

There is a customTextStyles property inside textEditorConfigs, which is a List. However, I couldn't find any button in the editor that allows switching between the custom text styles.

This is an awesome package but this feature is a must-have for my use case. Could someone guide me on how to enable or implement this functionality?

Thanks in advance!

[hm21]

To enable multiple text styles in the text editor, include customTextStyles in the textEditorConfigs and set showSelectFontStyleBottomBar to true. This will display a bottom bar, allowing you to choose between various custom text styles.

I recommend you also to check out the web demo where you can test the Google-Font-Emojis example, which demonstrates the use of multiple Google Fonts within the text editor.

[justAsascha]

I need a custom implementation of the font selection (different UI/UX).
Is there a (better) programmatically way?

void changeFont(TextEditorState editor, String fontFamily) {
    editor.selectedTextStyle = editor.selectedTextStyle
        .copyWith(fontFamily: fontFamily);
    // hack: trigger rendering of current text span
    final oldText = editor.textCtrl.text;
    editor.textCtrl.text = "";
    editor.textCtrl.text = oldText;
  }

The only way I found to trigger a rendering of the textSpan is to update the text value.

[hm21]

I recommend using the setTextStyle method to update the fontStyle rather than directly modifying selectedTextStyle. Directly editing selectedTextStyle is only necessary in rare cases where a completely custom UI update logic is required.

Example:

void changeFont(TextEditorState editor, String fontFamily) {
  editor.setTextStyle(
    editor.selectedTextStyle.copyWith(
      fontFamily: fontFamily,
    ),
  );
}