Typeset은 WhatsApp와 유사한 풍부한 텍스트 스타일링을 가능하게 하는 Flutter 패키지로, 굵게, 기울임, 밑줄 등 다양한 스타일을 지원합니다. 개발자는 백엔드 설정을 통해 텍스트 포맷팅을 동적으로 제어할 수 있어 메시징 앱이나 콘텐츠 중심 인터페이스에 적합합니다. Android, iOS, Web, macOS, Windows, Linux 등 주요 플랫폼 전반에서 원활한 지원을 제공하며, 복잡한 커스텀 위젯 없이도 스타일링된 텍스트 구현을 간소화합니다. 간단한 pub add 명령어로 쉽게 통합되며, 유연하고 확장 가능한 스타일링 옵션을 제공합니다.
사용 사례
풍부한 텍스트를 지원하는 메시지 앱
백엔드에서의 동적 콘텐츠 렌더링
사용자 생성 형식 텍스트
소셜 미디어 스타일의 텍스트 표시
상호작용형 교육 앱
주요 기능
백엔드 기반 텍스트 스타일링
강조, 기울임, 밑줄 지원
크로스 플랫폼 호환성
pub를 통한 간편한 통합
최소한의 보일러플레이트
실시간 스타일 업데이트
적합한 대상
채팅 인터페이스를 구축하는 개발자
동적 텍스트 형식 지정이 필요한 앱
API를 통해 콘텐츠를 관리하는 팀
다양한 플랫폼 간에 일관된 리치 텍스트가 필요한 프로젝트
경량 스타일링 솔루션을 찾는 프론트엔드 개발자
고려 사항
스타일 정의를 위한 적절한 백엔드 구조가 필요합니다
사용자 입력에 대한 추가 검증이 필요할 수 있습니다
매우 큰 텍스트 블록에 최적화되지 않음
기본 텍스트 스타일만 사용 가능(고급 타이포그래피 없음)
스타일 규칙에 대한 올바른 JSON 구문 분석에 의존합니다
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
✨ TypeSet ✨
Powerful Text Styling for Flutter
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
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