Skip to content

rohanjsh/typeset

Repository files navigation


✨ 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.