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.
📱 See It In Action
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.
🚀 Getting Started
Installation
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
💎 Usage
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 textTypeSet('Hello *Flutter* developers!');
// Hyperlink with custom tap actionTypeSet(
'§Visit Flutter\|https://flutter.dev§',
linkRecognizerBuilder: (linkText, url) =>
TapGestureRecognizer()..onTap = () {
// Your custom action here
},
);
// Dynamic font sizingTypeSet('Regular text with *bigger<24>* words');
// Escape formatting charactersTypeSet('Use the ¦* symbol to show *asterisks*');
💬 Interactive Text Editing
TypeSetEditingController
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 parametersfinal 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: constTextStyle(color: Colors.blue),
// Style for bold text
boldStyle: constTextStyle(fontWeight: FontWeight.bold),
// Style for monospace text
monospaceStyle: constTextStyle(fontFamily: 'Courier'),
);
// Use it with a TextFieldTextField(
controller: controller,
maxLines: 3,
decoration: constInputDecoration(
border: OutlineInputBorder(),
hintText: 'Type formatted text here...',
),
);
Context Menu Integration
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) {
returnAdaptiveTextSelectionToolbar.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.
✨ Key Features
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
