搜索插件、代码仓与 APP 分类

插件详情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 开发者
  • 注重一致性的团队
  • 频繁更新文本的应用
  • 需要快速用户界面迭代的项目
  • 追求简单而非复杂性的开发者

使用建议

  • 仅限文本相关功能
  • 不适合复杂的动画
  • 可能需要额外的包以实现高级效果
  • 在特殊情况下,灵活性不如原始的 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!

所属分类

源码仓库

使用此插件的项目

暂无相关数据。