패키지, 저장소 및 앱 카테고리 검색

패키지 상세v2.3.0

typeset

와츠앱 스타일의 텍스트 스타일링! -- 굵게, 기울임, 밑줄 등 -- 백엔드를 통해 텍스트 스타일을 제어하세요!

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
5.3천
좋아요
108
Pub 점수
150

패키지 설치

flutter pub add typeset

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

Typeset은 WhatsApp와 유사한 풍부한 텍스트 스타일링을 가능하게 하는 Flutter 패키지로, 굵게, 기울임, 밑줄 등 다양한 스타일을 지원합니다. 개발자는 백엔드 설정을 통해 텍스트 포맷팅을 동적으로 제어할 수 있어 메시징 앱이나 콘텐츠 중심 인터페이스에 적합합니다. Android, iOS, Web, macOS, Windows, Linux 등 주요 플랫폼 전반에서 원활한 지원을 제공하며, 복잡한 커스텀 위젯 없이도 스타일링된 텍스트 구현을 간소화합니다. 간단한 pub add 명령어로 쉽게 통합되며, 유연하고 확장 가능한 스타일링 옵션을 제공합니다.

사용 사례

  • 풍부한 텍스트를 지원하는 메시지 앱
  • 백엔드에서의 동적 콘텐츠 렌더링
  • 사용자 생성 형식 텍스트
  • 소셜 미디어 스타일의 텍스트 표시
  • 상호작용형 교육 앱

주요 기능

  • 백엔드 기반 텍스트 스타일링
  • 강조, 기울임, 밑줄 지원
  • 크로스 플랫폼 호환성
  • pub를 통한 간편한 통합
  • 최소한의 보일러플레이트
  • 실시간 스타일 업데이트

적합한 대상

  • 채팅 인터페이스를 구축하는 개발자
  • 동적 텍스트 형식 지정이 필요한 앱
  • API를 통해 콘텐츠를 관리하는 팀
  • 다양한 플랫폼 간에 일관된 리치 텍스트가 필요한 프로젝트
  • 경량 스타일링 솔루션을 찾는 프론트엔드 개발자

고려 사항

  • 스타일 정의를 위한 적절한 백엔드 구조가 필요합니다
  • 사용자 입력에 대한 추가 검증이 필요할 수 있습니다
  • 매우 큰 텍스트 블록에 최적화되지 않음
  • 기본 텍스트 스타일만 사용 가능(고급 타이포그래피 없음)
  • 스타일 규칙에 대한 올바른 JSON 구문 분석에 의존합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.


✨ TypeSet ✨

Powerful Text Styling for Flutter

style: very good analysis pub package pub points build status

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
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 text
TypeSet('Hello *Flutter* developers!');
Text Formatting Syntax
Style Syntax Result
Bold *text* text
Italic _text_ text
Strikethrough ~text~ text
Underline #text# text
Monospace `text` text
Link §Link text|https://url§ Link text
Font Size text<size> Renders text at specified size
Advanced Examples
// 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:

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():

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

Contributing

Contributions are welcome! Check out our contribution guidelines 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.


카테고리

의존성

의존성 목록 1 개

소스 저장소

이 패키지를 사용하는 프로젝트