t_text_token 1.0.0

A powerful and ultra-responsive typography framework for Flutter using design tokens and text extensions.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:t_text_token/t_text_token.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  TTextConfig.initialize(
    lightPrimary: const Color(0xFF1E1E24),
    darkPrimary: const Color(0xFFF5F5FA),
    fontFamily: 'Nunito',
  );

  runApp(const MyApp());
}

final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.light);

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(768, 1024),

      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context, child) {
        return ValueListenableBuilder<ThemeMode>(
          valueListenable: themeNotifier,
          builder: (context, currentTheme, _) {
            return MaterialApp(
              title: 'TTextToken Premium Showcase',
              debugShowCheckedModeBanner: false,
              theme: ThemeData.light(),
              darkTheme: ThemeData.dark(),
              themeMode: currentTheme,
              home: const HomeScreen(),
            );
          },
        );
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Scaffold(
      appBar: AppBar(
        title: const Text('TTextToken Ultimate Lab'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
            decoration: BoxDecoration(
              color: isDark ? Colors.grey[900] : Colors.grey[100],
              border: Border(bottom: BorderSide(color: isDark ? Colors.grey[800]! : Colors.grey[300]!)),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                'وضع واجهة المعاينة:'.asText(context: context, token: TTextToken.s14w700),
                IconButton(
                  icon: Icon(isDark ? Icons.light_mode : Icons.dark_mode),
                  onPressed: () {
                    themeNotifier.value = isDark ? ThemeMode.light : ThemeMode.dark;
                  },
                ),
              ],
            ),
          ),

          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: ListView(
                physics: const BouncingScrollPhysics(),
                children: [

                  _buildSectionCard(
                    title: '1. الـ Getters السريعة والأحجام الكسرية الذكية',
                    children: [
                      'عنوان ضخم (s24w700)'.s24w700(context),
                      const SizedBox(height: 4),
                      'عنوان فرعي (s16w700)'.s16w700(context),
                      const SizedBox(height: 4),
                      'متن قياسي (s14w400)'.s14w400(context),
                      const SizedBox(height: 4),
                      'نص صغير تفصيلي (s12w400)'.s12w400(context),
                      const SizedBox(height: 12),
                      'نص بحجم كسري نسبي حسابي s17w400'.s17w400(context),
                      const SizedBox(height: 4),
                      'نص بحجم كسري نسبي حسابي عريض s17w700'.s17w700(context),
                    ],
                  ),

                  _buildSectionCard(
                    title: '2. دالة asText بكامل خصائصها (Full Parameters)',
                    children: [
                      'هذا النص يختبر دالة asText ويمرر حرفياً كل معامل متاح في الـ Extension! من محاذاة، حد أسطر، طريقة قص التجاوز، اتجاه النص، لغة مخصصة، والـ StrutStyle المتطور والتحكم في سلوك الارتفاع التلقائي والـ TextScaler المحدود بقيم دنيا وقصوى لمنع التشوه البصري.'
                          .asText(
                        context: context,
                        token: TTextToken.s14w400,
                        color: Colors.blueAccent,
                        align: TextAlign.justify,
                        maxLines: 4,
                        overflow: TextOverflow.ellipsis,
                        decoration: TextDecoration.underline,
                        height: 1.5,
                        fontWeight: FontWeight.w500,
                        fontStyle: FontStyle.italic,
                        direction: TextDirection.rtl,
                        locale: const Locale('ar', 'SA'),
                        textWidthBasis: TextWidthBasis.longestLine,
                        textScaler: const TextScaler.linear(1.1),
                        strutStyle: const StrutStyle(fontSize: 14.0, height: 1.5),
                        textHeightBehavior: const TextHeightBehavior(
                          applyHeightToFirstAscent: true,
                          applyHeightToLastDescent: true,
                        ),
                      ),
                    ],
                  ),

                  _buildSectionCard(
                    title: '3. دالة asSelectable بكامل الخصائص والـ Context Menu',
                    children: [
                      'رقم الحساب الدولي: SA603000001234567890'.asSelectable(
                        context: context,
                        token: TTextToken.s14w600,
                        color: Colors.teal,
                        align: TextAlign.center,
                        maxLines: 1,
                        decoration: TextDecoration.none,
                        height: 1.3,
                        fontWeight: FontWeight.w700,
                        fontStyle: FontStyle.normal,
                        direction: TextDirection.ltr,
                        strutStyle: const StrutStyle(height: 1.3),
                        textWidthBasis: TextWidthBasis.parent,
                        textHeightBehavior: const TextHeightBehavior(),
                        textScaler: const TextScaler.linear(1.0),
                        showCursor: true,
                        autofocus: false,
                        focusNode: FocusNode(),
                        scrollPhysics: const ClampingScrollPhysics(),
                        selectionControls: MaterialTextSelectionControls(),
                        onSelectionChanged: (selection, cause) {
                          debugPrint('User selected text from index: ${selection.start} to ${selection.end}');
                        },
                        contextMenuBuilder: (context, editableTextState) {
                          return AdaptiveTextSelectionToolbar.buttonItems(
                            anchors: editableTextState.contextMenuAnchors,
                            buttonItems: [
                              ContextMenuButtonItem(
                                label: 'نسخ الكود المالي',
                                onPressed: () {
                                  editableTextState.copySelection(SelectionChangedCause.toolbar);
                                  ScaffoldMessenger.of(context).showSnackBar(
                                    const SnackBar(content: Text('تم نسخ رقم الحساب بنجاح!')),
                                  );
                                },
                              ),
                            ],
                          );
                        },
                      ),
                    ],
                  ),

                  _buildSectionCard(
                    title: '4. دالة asRich والـ Spans المتداخلة الملونة والمنسقة',
                    children: [
                      'الوضع الحالي للحساب: '.asRich(
                        context: context,
                        token: TTextToken.s14w400,
                        align: TextAlign.start,
                        overflow: TextOverflow.clip,
                        maxLines: 2,
                        direction: TextDirection.rtl,
                        strutStyle: const StrutStyle(height: 1.4),
                        textWidthBasis: TextWidthBasis.parent,
                        locale: const Locale('ar'),
                        textScaler: const TextScaler.linear(1.0),
                        textHeightBehavior: const TextHeightBehavior(),
                        children: [
                          ' متأخر وجاري الفحص '.span(
                            context: context,
                            token: TTextToken.s14w700,
                            color: Colors.red,
                            decoration: TextDecoration.lineThrough,
                            height: 1.4,
                            fontWeight: FontWeight.bold,
                            fontStyle: FontStyle.normal,
                            children: [
                              ' (كود المخالفة: #992)'.span(
                                context: context,
                                token: TTextToken.s12w400,
                                color: Colors.amber[800],
                                decoration: TextDecoration.underline,
                              ),
                            ],
                          ),
                          ' يرجى السداد لتجنب الغرامة المالية.'.span(
                            context: context,
                            token: TTextToken.s14w400,
                            color: Colors.grey,
                            fontStyle: FontStyle.italic,
                          ),
                        ],
                      ),
                    ],
                  ),

                  _buildSectionCard(
                    title: '5. محرك الترجمة والـ Localization الاستباقي',
                    children: [
                      'msg_account_activated'.trText(
                        context: context,
                        token: TTextToken.s16w700,
                        color: Colors.purple,
                        align: TextAlign.center,
                        maxLines: 1,
                        overflow: TextOverflow.fade,
                      ),
                    ],
                  ),

                  const SizedBox(height: 20),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildSectionCard({required String title, required List<Widget> children}) {
    return Builder(
      builder: (context) {
        final isDark = Theme.of(context).brightness == Brightness.dark;
        return Container(
          margin: const EdgeInsets.symmetric(vertical: 8.0),
          padding: const EdgeInsets.all(14.0),
          decoration: BoxDecoration(
            color: isDark ? Colors.grey[900] : Colors.white,
            borderRadius: BorderRadius.circular(12),
            border: Border.all(
              color: isDark ? Colors.grey[800]! : Colors.grey[200]!,
              width: 1,
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.01),
                blurRadius: 4,
                offset: const Offset(0, 2),
              ),
            ],
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              title.asText(
                context: context,
                token: TTextToken.s14w700,
                color: isDark ? Colors.amber[300] : Colors.blue[800],
              ),
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 6.0),
                child: Divider(thickness: 0.5),
              ),
              ...children,
            ],
          ),
        );
      },
    );
  }
}