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

flutter_circular_text のカバー
パッケージ詳細v0.3.1

flutter_circular_text

テキストをカーブした円形パスに配置する Flutter パッケージ。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
3500
いいね数
177
Pub ポイント
160

パッケージをインストール

flutter pub add flutter_circular_text

パッケージ概要

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

テキストをカーブした円形パスに沿ってレンダリングできるFlutterパッケージで、円形レイアウトでのテキスト表示に視覚的に魅力的な方法を提供します。円形プログレスインジケーター、バッジ、装飾的なテキスト配置などのダイナミックでアート的なUI要素の作成に最適です。Android、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしており、デバイス間で一貫した動作を保証します。半径、角度、配置などをカスタマイズ可能な専用ウィジェットによる簡単な統合が可能です。

用途

  • 円形テキストバッジの作成
  • アニメーション付き円形ラベルのデザイン
  • 装飾的なUI要素の構築
  • 円形プログレス表示の実装
  • ダッシュボードのビジュアルを強化する

主な機能

  • 曲線的な円形パスに沿ったテキスト
  • カスタマイズ可能な半径と角度
  • 複数プラットフォームのサポート
  • シンプルなウィジェット統合
  • 配置と回転制御

適している対象

  • 創造的なテキストレイアウトを探しているUIデザイナー
  • インタラクティブなダッシュボードを開発する開発者
  • 独自のビジュアル効果を必要とするアプリ
  • 円形または放射状のデザインテーマを持つプロジェクト
  • アート的なインターフェースのプロトタイピング

注意事項

  • 大量のテキストがあるとパフォーマンスに影響する可能性があります
  • 円形のパスのみに制限
  • 読みやすさのために正確な整列が必要です
  • 長い段落には適していない
  • テキストの方向は手動で調整する必要がある場合があります

元の README

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

Circular Text Widget

pub package

Installation

Add dependency in pubspec.yaml:

dependencies:
  flutter_circular_text: "^0.3.1"

Import in your project:

import 'package:flutter_circular_text/circular_text.dart';

Basic usage

CircularText(
  children: [
    TextItem(
      text: Text(
        "Chuck Norris".toUpperCase(),
        style: TextStyle(
          fontSize: 28,
          color: Colors.blue,
          fontWeight: FontWeight.bold,
        ),
      ),
      space: 12,
      startAngle: -90,
      startAngleAlignment: StartAngleAlignment.center,
      direction: CircularTextDirection.clockwise,
    ),
    TextItem(
      text: Text(
        "top 100 Facts".toUpperCase(),
        style: TextStyle(
          fontSize: 20,
          color: Colors.amberAccent,
          fontWeight: FontWeight.bold,
        ),
      ),
      space: 10,
      startAngle: 90,
      startAngleAlignment: StartAngleAlignment.center,
      direction: CircularTextDirection.anticlockwise,
    ),
  ],
  radius: 125,
  position: CircularTextPosition.inside,
  backgroundPaint: Paint()..color = Colors.grey.shade200,
)

Examples

example project contains single and multi text demos

Demos
Single Text Demo

alt tag

Multi Text Demo

Changelog

Check Changelog for updates

Bugs/Requests

Reporting issues and requests for new features are always welcome.

カテゴリー

ソースリポジトリ

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