パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v2.3.0

typeset

WhatsApp風のテキストスタイルです! -- 太字、斜体、下線など -- バックエンドからテキストスタイルを制御しましょう!

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
5310
いいね数
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 件

ソースリポジトリ

このパッケージを使用しているプロジェクト