Error in user YAML: (<unknown>): did not find expected whitespace or line break while scanning a tag at line 6 column 2
---
<div align="center">
# ✨ TypeSet ✨
### Powerful Text Styling for Flutter
[![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link]
[![pub package][pub_badge]][pub_link]
![pub points][pub_points_badge]
[![build status][build_badge]][tracker]
</div>
## Transform Your Text Experience
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
<table align="center">
<tr>
<th>TypeSet Widget</th>
<th>TypeSetEditingController</th>
</tr>
<tr>
<td>
<img width="346" alt="TypeSet Widget" src="https://github.com/user-attachments/assets/a0f9695d-5735-426d-9f66-5e7e991791fa">
</td>
<td>
<img width="346" alt="TypeSetEditingController" src="https://github.com/user-attachments/assets/6ecc0930-c38f-4253-807c-c8fcd8fb6482">
</td>
</tr>
</table>
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`:
```yaml
dependencies:
typeset: ^2.3.0 # Check pub.dev for the latest version
```
Then run:
```shell
flutter pub get
```
## 💎 Usage
TypeSet is designed to be as simple as using Flutter's built-in `Text` widget:
```dart
import 'package:typeset/typeset.dart';
// Just drop in your formatted text
TypeSet('Hello *Flutter* developers!');
```
### Text Formatting Syntax
| Style | Syntax | Result |
|-------|--------|--------|
| **Bold** | `*text*` | **text** |
| _Italic_ | `_text_` | _text_ |
| ~~Strikethrough~~ | `~text~` | ~~text~~ |
| Underline | `#text#` | <ins>text</ins> |
| `Monospace` | `` `text` `` | `text` |
| [Link](https://flutter.dev) | `§Link text\|https://url§` | [Link text](https://url) |
| Font Size | `text<size>` | Renders text at specified size |
### Advanced Examples
```dart
// 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*');
```
## 💬 Interactive Text Editing
### TypeSetEditingController
New in v2.3.0! Add WhatsApp-like styling to your text input fields with real-time formatting preview:
```dart
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...',
),
);
```
### Context Menu Integration
Add formatting options to the text selection context menu with `getTypesetContextMenus()`:
```dart
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.
## ✨ 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
## 🤝 Community & Support
- **[GitHub Issues][tracker]** - Report bugs or request features
- **[GitHub Discussions](https://github.com/rohanjsh/typeset/discussions)** - Get help and share ideas
- **[Pub.dev Documentation][pub_link]** - Detailed API documentation
### Contributing
Contributions are welcome! Check out our [contribution guidelines](https://github.com/rohanjsh/typeset/blob/main/CONTRIBUTING.md) to get started.
### Support the Project
If TypeSet has been helpful for your projects, consider:
- ⭐ Starring the repository
- 🔄 Sharing with other developers
- 💬 Providing feedback and suggestions
- 🐛 Reporting bugs and issues
## 📝 License
TypeSet is available under the [Apache License, Version 2.0](https://github.com/rohanjsh/typeset/blob/main/LICENSE).
---