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

bordered_text のカバー
パッケージ詳細v3.0.2

bordered_text

Text ウィジェットに繊細なストロークを適用するための Flutter プラグイン。Android、iOS、Web をサポートしています。

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

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

flutter pub add bordered_text

パッケージ概要

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

bordered_text パッケージは、Flutter の Text ウィジェットにわずかなストローク効果を追加することで、アウトラインボーダーを持つ視覚的に際立つテキストを作成できるようにします。Android、iOS、Web、macOS、Windows、Linux など複数のプラットフォームをサポートしており、一貫したクロスプラットフォームデザインに最適です。軽量で簡単に統合でき、ストローク幅、色、ぼかし効果をカスタマイズ可能です。ラベル、タイトル、バッジなどの UI 要素に理想的で、複雑なカスタムペイントなしで目立つ外観を実現できます。

用途

  • アウトライン付きのテキストを作成する
  • バッジやラベルなどのUI要素を設計する
  • ボーダーのコントラストによる読みやすさの向上
  • ゲームやアプリのテキストに視覚的な奥行きを加える
  • 複数プラットフォームにまたがる応答型テキストエフェクトの実装

主な機能

  • テキストの繊細なストローク効果
  • カスタマイズ可能なストローク幅と色
  • ブラー効果のサポート
  • クロスプラットフォーム互換性
  • 既存の Text ウィジェットとの簡単な統合
  • 軽量でパフォーマンスに優れる

適している対象

  • 視覚的な向上を求めるUIデザイナー
  • クロスプラットフォームアプリを開発する開発者
  • アウトライン効果付きテキストを必要とするプロジェクト
  • ゲームまたはインタラクティブなアプリのインターフェース
  • アクセシブルなテキストスタイルが必要なアプリ

注意事項

  • 大規模なテキストブロックのパフォーマンスに影響する可能性があります
  • ストローク効果は、すべてのプラットフォームで同じようにレンダリングされない場合があります
  • 基本的なストロークスタイルに制限される(高度なグラデーションやパターンは不可)
  • 読みやすさのために慎重な色の選択が必要です
  • 多数のテキスト要素を含む高性能アニメーションには適していません

元の README

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

BorderedText

Build Status

pub package

Adds Stroke to a Flutter Text widget

Getting Started

Check the installation guide for how to install this plugin

Usage

We can apply a very thin and subtle stroke to a [Text]
import 'package:bordered_text/bordered_text.dart';

class StrokeTester extends StatelessWidget {

  const StrokeTester({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bordered Text test',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bordered Text'),
        ),
        body: Center(
          child: BorderedText(
            strokeWidth: 1.0,
            child: Text(
              'Bordered Text Widget',
              style: TextStyle(
                decoration: TextDecoration.none,
                decorationColor: Colors.red,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

カテゴリー

ソースリポジトリ

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

データはまだありません。