super_text_layout

Description:

super text layout

Configurable, composable, extensible text display for Flutter.


Flutter lacks a useful mechanism for painting custom decorations around text. If you want to paint custom text selections, highlights, carets, or any other decoration that depends on text layout, then super_text_layout is a package you need to use!
SuperTextWithSelection #
Use the SuperTextWithSelection widget when you want to paint text with traditional user selections.
SuperTextWithSelection supports single-user and multi-user text selections.
// Single-user selection
Widget build(context) {
return SuperTextWithSelection.single(
richText: myText,
userSelection: UserSelection(
highlightStyle: myHighlightStyle,
caretStyle: myCaretStyle,
selection: myTextSelection,
),
);
}

// Multi-user selection
Widget build(context) {
return SuperTextWithSelection.multi(
richText: _text,
userSelections: [
UserSelection(
highlightStyle: _primaryHighlightStyle,
caretStyle: _primaryCaretStyle,
selection: const TextSelection(baseOffset: 11, extentOffset: 21),
),
UserSelection(
highlightStyle: _johnHighlightStyle,
caretStyle: _johnCaretStyle,
selection: const TextSelection(baseOffset: 58, extentOffset: 65),
),
UserSelection(
highlightStyle: _sallyHighlightStyle,
caretStyle: _sallyCaretStyle,
selection: const TextSelection(baseOffset: 79, extentOffset: 120),
),
],
);
}
copied to clipboard
SuperText #
The SuperText widget is the workhorse in the super_text package. It provides a platform, upon which you can build custom text decorations.
SuperText renders rich text, like you're used to, but then it allows you to paint a UI beneath the text, and above the text. In those layers you can paint things like selection highlights, carets, user names, etc.
Widget build(context) {
// Implement a standard highlight + caret user selection,
// using SuperText.
return SuperText(
richText: _text,
layerAboveBuilder: (context, textLayout) {
return Stack(
children: [
// Here you can paint anything you want, and you can use the
// provided textLayout to position your UI based on lines and
// characters in the text.
TextLayoutCaret(
textLayout: textLayout,
style: myCaretStyle,
position: mySelection.extent,
),
],
);
},
layerBeneathBuilder: (context, textLayout) {
return Stack(
children: [
// Here you can paint anything you want, and you can use the
// provided textLayout to position your UI based on lines and
// characters in the text.
TextLayoutSelectionHighlight(
textLayout: textLayout,
style: myHighlightStyle,
selection: mySelection,
),
],
);
},
);
}
copied to clipboard