typeset
आपके लिए व्हाट्सएप जैसा टेक्स्ट स्टाइलिंग! -- बोल्ड, इटैलिक, अंडरलाइन और अधिक -- बैकएंड के माध्यम से अपने टेक्स्ट स्टाइल को ड्राइव करें!
आपके लिए व्हाट्सएप जैसा टेक्स्ट फॉर्मेटिंग! -> मोटा, झुका हुआ, नीचे रेखा
{"sdk":"flutter"}^6.3.1{"sdk":"flutter"}^1.0.4>=3.1.0 <10.0.0यह अंग्रेज़ी मूल स्नैपशॉट है। नवीनतम सामग्री GitHub पर देखें।
style: very good analysis pub package pub points build status
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 |
|---|---|
| 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.
Contributions are welcome! Check out our contribution guidelines to get started.
If TypeSet has been helpful for your projects, consider:
TypeSet is available under the Apache License, Version 2.0.