flutter_richtext_composer

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

国際化（i18n）をサポートするリッチテキストの作成を簡素化することを目的としたFlutterパッケージです。開発者がスタイル、リンク、絵文字を複数含むフォーマット済みテキストを明確で読みやすい方法で構成できるようにし、適切なローカライズを保証します。このパッケージは、すべての主要プラットフォームにおけるFlutterアプリにシームレスに統合でき、通知、メッセージ、説明UIなどの動的コンテンツに最適です。APIは直感的で、保守性とスケーラビリティに焦点を当てています。

用途

ローカライズされたチャットインターフェースの構築
スタイリッシュなユーザー生成コンテンツを表示しています
多言語の説明テキストを作成する
動的な通知メッセージの生成
豊富なフォーマットのツールチップの実装

主な機能

i18nフレンドリーな豊富なテキストの構成
複数のテキストスタイルおよびリンクのサポート
Flutter の Text ウィジェットとの簡単な統合
クロスプラットフォーム互換性
洗練された宣言型 API
絵文字および特殊文字の処理

適している対象

多言語アプリを開発する開発者
保守可能な豊富なテキストロジックを必要とするチーム
動的またはユーザー生成コンテンツを備えたアプリ
ローカライズが必要なフォーマット済みテキストを必要とする UI
読みやすさとスケーラビリティを重視するプロジェクト

注意事項

翻訳キーの取り扱いには注意が必要です
広範な書式設定によりバンドルサイズがわずかに増加する可能性があります
テキストベースのコンテンツに限定され、画像や複雑なレイアウトは含まれません
親アプリの正しいi18n設定に依存する
スケールに応じた高パフォーマンスなテキストレンダリングには適していません

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

A Flutter package for composing RichText in a i18n friendly way.

Getting Started

Import the library with

import 'package:flutter_richtext_composer/flutter_richtext_composer.dart';

Example

Then you can start composing RichText like this:

RichTextComposer(
  'Hi {name}, I am {my_name}! {icon}',
  style: TextStyle(fontSize: 30),
  placeholders: {
    'name': TextSpan(
          text: 'Son',
          style: TextStyle(fontWeight: FontWeight.bold),
    ),
    'my_name': TextSpan(
          text: 'Dad',
          style: TextStyle(
            color: Colors.red,
            decoration: TextDecoration.underline,
          ),
    ),
    'icon': WidgetSpan(
      child: GestureDetector(
        child: Icon(Icons.person),
        onTap: () {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('Icon has been clicked'),
          ));
        },
      ),
    ),
  },
),

To escape the placeholder, prefix with \, e.g \{placeholder}:

RichTextComposer(
  'Hi \\{dad}, I am {batman}!',
  style: TextStyle(fontSize: 25),
  placeholders: {
    'batman': TextSpan(
          text: 'Batman',
          style: TextStyle(
            color: Colors.red,
            decoration: TextDecoration.underline,
          ),
    ),
  },
),