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

パッケージ詳細v2.0.0

simplified_text_widget

事前に定義されたフォントウェイトと簡単なスタイルオプションを備えたカスタマイズ可能なテキストウィジェットパッケージ。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
13
いいね数
2
Pub ポイント
140

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

flutter pub add simplified_text_widget

パッケージ概要

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

プリ定義されたフォントウェイトと直感的なカスタマイズオプションでテキストスタイルを簡素化するFlutterパッケージです。準備済みのテキスト設定を提供することで開発者の生産性を向上させ、ボイラープレートコードを削減します。このウィジェットはAndroid、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしており、クロスプラットフォームアプリに最適です。簡単に適用できるスタイルと一貫したタイポグラフィにより、UI開発を効率化しつつ柔軟性を維持します。

用途

  • 迅速なUIプロトタイピング
  • クロスプラットフォームテキストスタイル
  • スクリーン間での一貫したタイポグラフィ
  • 繰り返しのテキストコードを削減する
  • 迅速なテーマ実装

主な機能

  • 事前定義されたフォントウェイト
  • 簡単なスタイル構文
  • クロスプラットフォーム対応
  • 最小限のボイラープレート
  • カスタマイズ可能な外観
  • レスポンシブテキスト処理

適している対象

  • 初心者のFlutter開発者
  • 一貫性を重視するチーム
  • 頻繁にテキストが更新されるアプリ
  • 迅速なUI反復が必要なプロジェクト
  • 複雑さよりも単純さを求める開発者

注意事項

  • テキスト固有の機能に限定
  • 複雑なアニメーションには適していません
  • 高度な効果を実現するには、追加のパッケージが必要になる場合があります
  • ユニークなケースでは、Raw Text ウィジェットよりも柔軟性が低い
  • 更新に外部のソースコードに依存しています

元の README

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

Simplified Text Widget Package

Pub Version License

A Flutter package that provides beautifully styled text widgets with enforced font consistency.

📦 Installation

Use this package as a library
🔗 Depend on it

Run this command:

With Flutter:

 flutter pub add simplified_text_widget

🚀 Getting Started

[!IMPORTANT]

⚙️ Configuration

Before using the widgets, you must initialize the SimplifiedTextWidgetConfig in your main() function. This class controls the global behavior, responsiveness, and default styles for all text variants.

import 'package:simplified_text_widget/simplified_text_widget.dart';

void main() {
  SimplifiedTextWidgetConfig.config(
    responsiveFonts: bool, **required** // Enable/Disable font responsiveness globally
    maxSizeMultiplier: double, (optional) // Max font scale factor (Default: 1.5)
    baseScreenWidth: double, (optional) // Design width for calculation (Default: 375)
    defaultFontWeight: FontWeight, (optional) // Default weight for Text[size] variants
    defaultColor: Color (optional) // Default color for all widgets (Default: Color(0xFF000000))
  );
  runApp(const MyApp());
}
Configuration Options
Property Type Default Description
responsiveFonts bool required Whether fonts should scale based on screen width.
maxSizeMultiplier double 1.5 Limits how large the font can grow on large screens.
baseScreenWidth double 375 The screen width (in logical pixels) your UI was designed for.
defaultFontWeight DefaultFontWeight w500 The weight used by base Text[size] variants (e.g., Text14).
defaultColor Color Color(0xFF000000) The fallback color if no color is provided to a widget.

📐 How Responsiveness Works

When responsiveFonts is set to true, the font size is calculated dynamically based on the current screen width.

Example Calculations

Assuming baseScreenWidth: 375 (Default):

Initial Size Current Width Multiplier Resulting Size
14px 375px (Mobile) 1.5x 14.0px
14px 562px (Tablet) 1.5x 21.0px
14px 750px (Desktop) 1.5x 21.0px (Clamped by 1.5x)
14px 750px (Desktop) 2.0x 28.0px

Features

  • Centrally Managed Configuration: Introducing SimplifiedTextWidgetConfig to control global defaults like color and font weight across your entire app.
  • Smart Responsiveness: Effortlessly scale your typography based on baseScreenWidth with built-in maxSizeMultiplier guards to ensure readability on cross platform.
  • Rich Debug Logging: Get instant visibility into your global setup with beautifully formatted console logs, featuring color previews for your defaultColor.
  • Global Default Color: Declare a fallback defaultColor (e.g., Colors.navy) during initialization to maintain brand consistency without repeating color parameters.
  • Base Variants: Simplified usage with Text[size] (e.g., Text14) which dynamically inherits your globally configured font weight.

[!IMPORTANT] If migrating from an older version, add this in main() to avoid any error.

import 'package:simplified_text_widget/simplified_text_widget.dart';


  SimplifiedTextWidgetConfig.config(
    responsiveFonts: false // false if you don't need responsiveness
);

🛠️ Setup Your Font

1. Add Font Files

Place your font files in:

your_project/
└── assets/
    └── fonts/
        ├── YourFont.ttf
2. Configure pubspec.yaml

Add this configuration (must use exact family name):

fonts:
  - family: CustomTextFont _# ← REQUIRED NAME_
    fonts:
      - asset: assets/fonts/YourFont.ttf
3. Clean & Rebuild
flutter pub get

🎯 Basic Usage

The library provides two types of variants for every size:

  1. Base Variants (Text[size]): Uses the global default weight (e.g., Text14).
  2. Weight Variants (Text[size]w[weight]): Uses a specific weight (e.g., Text14w700).
import 'package:simplified_text_widget/simplified_text_widget.dart';

// 1. Base Variants (uses configured default weight)
Text14('Consistent 14px text');
Text20('Consistent 20px title');

// 2. Weight-Specific Variants (100-900)
Text14w400('Regular 14px text');
Text16w700('Bold 16px text', color: Colors.blue);
Text24w900('Heavy 24px title');

✨ All Customization Options

Text18w500(
  'Fully customizable',
  color: Colors.purple,
  letterSpacing: 1.2,
  height: 1.5,
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
);

📏 Available Text Variants

Size Weights Available Example
6 100-900 Text6w400
12 100-900 Text12w700
14 100-900 Text14w500
... ... ...
48 100-900 Text48w900

🧠 VS Code Snippets (Optional but Recommended)

To boost your productivity and ensure consistency, we've included a set of VS Code snippets to instantly generate styled text widgets with predefined font sizes and weights.

✅ How to Use
1. Open VS Code
2. Go to `Preferences` → `Configure Snippets`
3. Choose `dart.json` (or create if it doesn't exist)
4. Copy contents from the root `dart.json` file in this package
5. Save and restart VS Code

Now you can type shortcuts like:

t14w4 → Text14w400('Your text here')
t18w7 → Text18w700('Bold title')

🚨 Troubleshooting

Font Not Working?
  1. Verify exact path matches: assets/fonts/YourFont.ttf
  2. Check family name is exactly CustomTextFont
  3. Ensure proper indentation in pubspec.yaml
  4. Run:
   flutter clean
   flutter pub get
Error: "Unable to locate asset"
  • Double-check your font files exist at the specified path
  • File names are case-sensitive

📜 License

MIT - See LICENSE for details.

Made with ❤️ by Raian Ruku. Enjoy consistent typography in your Flutter apps!

カテゴリー

ソースリポジトリ

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

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