TypeSet brings WhatsApp, Telegram-like text styling to your Flutter apps with a powerful twist. Create rich, dynamic text experiences that can be driven by your backend or controlled directly in your UI.
With TypeSet, you can seamlessly integrate bold, italic, strikethrough, underlined text, monospace
, hyperlinks, and even dynamic font sizing without complex widgets or convoluted styling code.
TypeSet Widget | TypeSetEditingController |
---|---|
![]() |
![]() |
Craft the perfect user experience with text styling that feels natural to your users. TypeSet makes it easy to implement rich text features that would otherwise require complex custom solutions.
Add TypeSet to your project by including it in your pubspec.yaml
:
dependencies:
typeset: ^2.3.0 # Check pub.dev for the latest version
Then run:
flutter pub get
TypeSet is designed to be as simple as using Flutter's built-in Text
widget:
import 'package:typeset/typeset.dart';
// Just drop in your formatted text
TypeSet('Hello *Flutter* developers!');
Style | Syntax | Result |
---|---|---|
Bold | *text* |
text |
Italic | _text_ |
text |
~text~ |
||
Underline | #text# |
text |
Monospace |
`text` |
text |
Link | §Link text|https://url§ |
Link text |
Font Size | text<size> |
Renders text at specified size |
// Hyperlink with custom tap action
TypeSet(
'§Visit Flutter\|https://flutter.dev§',
linkRecognizerBuilder: (linkText, url) =>
TapGestureRecognizer()..onTap = () {
// Your custom action here
},
);
// Dynamic font sizing
TypeSet('Regular text with *bigger<24>* words');
// Escape formatting characters
TypeSet('Use the ¦* symbol to show *asterisks*');
New in v2.3.0! Add WhatsApp-like styling to your text input fields with real-time formatting preview:
import 'package:typeset/typeset.dart';
import 'package:flutter/material.dart';
// Create a controller with optional styling parameters
final controller = TypeSetEditingController(
// Initial text with formatting
text: 'This is *bold* and _italic_',
// Style for the formatting markers
markerColor: Colors.grey.shade400,
// Style for links
linkStyle: const TextStyle(color: Colors.blue),
// Style for bold text
boldStyle: const TextStyle(fontWeight: FontWeight.bold),
// Style for monospace text
monospaceStyle: const TextStyle(fontFamily: 'Courier'),
);
// Use it with a TextField
TextField(
controller: controller,
maxLines: 3,
decoration: const InputDecoration(
border: OutlineInputBorder(),
hintText: 'Type formatted text here...',
),
);
Add formatting options to the text selection context menu with getTypesetContextMenus()
:
import 'package:typeset/typeset.dart';
import 'package:flutter/material.dart';
TextField(
controller: TypeSetEditingController(),
contextMenuBuilder: (context, editableTextState) {
return AdaptiveTextSelectionToolbar.buttonItems(
anchors: editableTextState.contextMenuAnchors,
buttonItems: [
// Add TypeSet formatting options to the context menu
...getTypesetContextMenus(
editableTextState: editableTextState,
// Optional: specify which formatting options to include
// styleTypes: [StyleTypeEnum.bold, StyleTypeEnum.italic],
),
// Keep the default context menu items
...editableTextState.contextMenuButtonItems,
],
);
},
);
This adds formatting buttons (Bold, Italic, Strikethrough, etc.) to the text selection menu, allowing users to easily format selected text.
- WhatsApp-like Formatting - Familiar syntax that users already understand
- Backend-driven Styling - Update text formatting from your server without app updates
- TypeSetEditingController - Add rich text capabilities to input fields
- Dynamic Font Sizing - Adjust text size inline for emphasis or hierarchy
- Context Menus - Built-in support for copy/paste with formatting
- Highly Customizable - Style each formatting type independently
- Lightweight - Minimal dependencies for a smaller app footprint
- Well-tested - 95%+ test coverage for production reliability
- GitHub Issues - Report bugs or request features
- GitHub Discussions - Get help and share ideas
- Pub.dev Documentation - Detailed API documentation
Contributions are welcome! Check out our contribution guidelines to get started.
If TypeSet has been helpful for your projects, consider:
- ⭐ Starring the repository
- 🔄 Sharing with other developers
- 💬 Providing feedback and suggestions
- 🐛 Reporting bugs and issues
TypeSet is available under the Apache License, Version 2.0.