Html WYSIWYG package lets you add text field with link , bullets , copy paste options , font size , bold, italic and button customization.
- Add the latest version of package to your pubspec.yaml (and run
dart pub get):
dependencies:
html_wysiwyg_textfield: ^0.0.1- Import the package and use it in your Flutter App.
import 'package:html_wysiwyg_textfield/html_wysiwyg_textfield.dart';There are a number of properties that you can modify:
- value
- height
- decoration
- hint
- customToolbar
- returnContent
- onNavigate
This screen implements a WYSIWYG HTML editor with a custom toolbar.
class HtmlWysiwygScreen extends StatelessWidget {
const HtmlWysiwygScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: HtmlWYSIWYGTextField(
height: 300,
value: "Your text here...",
fontList: const ['11', '12', '13', '14'],
onNavigate: (url) {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => WebViewScreen(url: url),
),
);
},
customToolbar: """
[
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough']],
['fontname', ['fontname']],
['fontsize', ['fontsize']],
['para', ['ul', 'ol']],
['linkButton', ['customLink']],
['copyButton', ['customCopy']],
['pasteButton', ['customPaste']],
['cutButton', ['customCut']]
]
""",
),
),
],
),
);
}
} |
|
✔️ Rich Text Editing – WYSIWYG editor with a customizable toolbar
📏 Adjustable Editor Height – Modify the height dynamically
🔗 Link Support – Handles URL navigation seamlessly
✂️ Clipboard Actions – Custom Copy, Cut, and Paste buttons
🖋️ Text Formatting – Supports bold, italic, underline, and strikethrough
📜 Lists & Paragraphs – Easily create ordered/unordered lists