t_text_token 1.0.0
t_text_token: ^1.0.0 copied to clipboard
A powerful and ultra-responsive typography framework for Flutter using design tokens and text extensions.
TTextToken ๐ #
A highly optimized, ultra-responsive typography design system for Flutter. TTextToken leverages semantic design tokens and developer-friendly extensions to eliminate boilerplate code, enforce theme-aware text colors, and guarantee architectural UI scaling across all device footprints.
Key Features ๐ #
- ๐ฑ Deterministic Responsive Scaling: Dynamic font-size calculations utilizing screen-width ratios capped with defensive boundary clamping (0.8x to 1.2x) to keep UIs beautiful even with extreme system text accessibility scaling.
- ๐ Automatic Theme Resolution: Native integration with
BuildContextto instantly resolveBrightness.darkandBrightness.lightcolors via a single centralized configuration. - ๐ฆ Comprehensive Extension Ecosystem: Direct semantic wrappers for standard
Text, selectable content (SelectableText), and hyper-complex nested architectures (RichText). - ๐ท๏ธ Granular Design Tokens: Over 200+ statically typed tokens mapping every permutation of size (from
8to40) and standard typography weights (w300throughw800). - ๐ Localization-Ready Infrastructure: Native structural hooks (
trText) prepared for context-aware localized data pipelines.
Architectural Deep Dive ๐ ๏ธ #
Instead of polluting your UI widgets with repetitive configurations, TTextToken abstracts font sizes, font weights, colors, fallbacks, and responsiveness into deterministic token layers:
[Your String] -> .asText(context) -> Resolves Theme Mode -> Applies Clamped Scale Factor -> Renders Engineered Text Widget #
Installation ๐ฆ #
Add t_text_token to your pubspec.yaml dependencies:
dependencies:
t_text_token: ^1.0.0
Then run:Bashflutter pub get
Getting Started ๐1. Centralized Global InitializationInitialize the TTextConfig engine within your application's entry point (main.dart). This binds your fallback typography and semantic core design system branding.Dartimport 'package:flutter/material.dart';
import 'package:t_text_token/t_text_token.dart';
void main() {
WidgetsFlutterBinding.ensureInitialized();
// Configure your structural global style boundaries
TTextConfig.initialize(
lightPrimary: const Color(0xFF1E1E24),
darkPrimary: const Color(0xFFF5F5FA),
fontFamily: 'Nunito',
fontFamilyFallback: const ['Ramis'],
);
runApp(const MyApp());
}
2. Basic Architecture IntegrationDartclass MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: ThemeMode.system, // TTextToken automatically switches colors natively
home: const MainLabScreen(),
);
}
}
API & Feature Showcase ๐A. The Pure Standard Blueprint (asText)Inject full typographic parameters natively via standard extensions without ever instantiating a boilerplate TextStyle class.Dart'Your string content'.asText(
context: context,
token: TTextToken.s16w600, // Explicit size 16, weight 600
color: Colors.blueAccent, // Override default primary if needed
align: TextAlign.justify,
maxLines: 3,
overflow: TextOverflow.ellipsis,
);
B. Secure Financial & User Data (asSelectable)Render perfectly padded copyable strings, complete with cursor controls and native text toolbar overlays.Dart'IBAN: SA603000001234567890'.asSelectable(
context: context,
token: TTextToken.s14w700,
color: Colors.teal,
showCursor: true,
autofocus: false,
);
C. Advanced Multi-Styled Hybrid Strings (asRich & span)Nest complex inline paragraphs or mix mathematical layouts together safely utilizing nested TextSpan extensions.Dart'Account Alert: '.asRich(
context: context,
token: TTextToken.s14w400,
children: [
'Subscription Expired '.span(
context: context,
token: TTextToken.s14w700,
color: Colors.redAccent,
decoration: TextDecoration.lineThrough,
),
'Please renew immediately.'.span(
context: context,
token: TTextToken.s12w300,
fontStyle: FontStyle.italic,
),
],
);
D. Production-Velocity Quick GettersAccelerate your development cycle with ultra-fast context getters mapping directly to common production-grade tokens:Dart'Super Headline'.s24w700(context); // Instant H1 equivalent
'Standard Paragraph'.s14w400(context); // Instant Body text
'Caption Details'.s12w400(context); // Instant Caption
E. Mathematical Fractional SizingNeed dynamic scaling between two whole-integer design tokens? Utilize the built-in fractional font multipliers seamlessly:Dart'Custom 17px Adaptive Text'.s17w400(context); // Scales s16w400 by an explicit 17/16 factor
'Custom 17px Bold Text'.s17w700(context);
Token Taxonomy Structure ๐The token names conform strictly to the standard regex architecture: s[SIZE]w[WEIGHT].Token DimensionAvailable Range ValuesExample Use CasesFont Size (s)8 to 40 (Step size increments of 2)Micro-captions up to display hero textFont Weight (w)w300, w400, w500, w600, w700, w800Thin, Regular, Medium, SemiBold, Bold, BlackOptimization Utilities ๐ก๏ธClamped Text ScalersTo safeguard your presentation UI design layouts from self-destructing when accessibility values scale up drastically, the framework intercepts layout updates and clamps total scale operations safely. The scale calculation is safely bounded between 0.8 and 1.2 based on a baseline layout width of 360.0.This mathematical assertion ensures that no matter how small or large the hardware device viewport profile behaves, your layout ratios remain strictly preserved.License ๐This project is licensed under the MIT License - see the LICENSE file for details.Contributing ๐คContributions, bug reports, and structural feature enhancements are welcome. Feel free to open an issue or submit a pull request on the official GitHub repository.Developed with
๐ง by Eng Taim Amer.