sleek_typography

طريقة مرنة لتخصيص النص.

ثَبَّتَ

أضف الاعتماد على pubspec.yaml :

 dependencies :
    sleek_typography : <version> 

بداية سريعة

 Column (
    children : < Widget > [
        SleekText ( "Basic" , style : SleekTextStyle . bold5 ()),
        SleekText ( "Style" , style : SleekTextStyle . subtitle4 ()),
        SleekContent . small (
            child : Column (
                children : < Widget > [
                    SleekText ( "Title" , style : SleekTextStyle . title ()),
                    SleekText ( "Body" , style : SleekTextStyle . body ()),
                    SleekText ( "Link" , style : SleekTextStyle . link ()),
                ],
            ),
        ),
    ],
)

الاستخدام

تحديد الطباعة العالمية

يمكنك تحديد أربعة أنواع من الإعدادات المسبقة:

• الأحجام (من 1 إلى 10 ): أحجام الخطوط
• الأوزان ( light ، normal ، medium ، bold ): أوزان الخط
• العائلات ( primary ، secondary ، monospace ، code ): أسر الخطوط
• الأنماط ( none ، caption ، code ، blockquote ، body ، link ، button ، subtitle ، title ): مجموعة من combinaisons خيار التصميم الشائع.

 SleekTypography (
    data : SleekTypographyData (
        sizes : < see example >
        weights : < see example >
        families : < see example >
        styles : < see example >
    ),
    child : < your app > ,
)

للحصول على مثال على تعريف كامل ، راجع التعريف الافتراضي.

تحديث الطباعة العالمية

يمكن تحديث الطباعة من أي مكان في الشجرة. قد يكون هذا مفيدًا لتكون مستجيبة: تكييف حجم المحتوى عند تغييرات MediaQuery.size على سبيل المثال.

 SleekTypography . update (context, SleekTypographyData (
        sizes : < see example >
        weights : < see example >
        families : < see example >
        styles : < see example >
    ),
);

الحاجيات

نص

 SleekText ( "hello" style : SleekStyle . normal ())

أساسي

تتيح لك الأنواع الأساسية اختيار مجموعة من الوزن والحجم.

طبيعي

 SleekText ( "hello" style : SleekStyle . normal3 ())

واسطة

 SleekText ( "hello" style : SleekStyle . medium3 ())

عريض

 SleekText ( "hello" style : SleekStyle . bold3 ())

ضوء

 SleekText ( "hello" style : SleekStyle . light3 ())

أنماط محددة مسبقا

يحتوي كل نمط محدد مسبقًا على 6 مستويات ويتم تعريفه من خلال مزيج من الحجم أو الوزن أو حتى منشئ عنصر واجهة مستخدم حوله. تم تصميمها لتكون متماسكة مع المستويات المقابلة (على سبيل المثال ، سيكون لللقب دائمًا خطًا أكبر من الجسم للمستوى المقابل).

جسم

 SleekText ( "hello" style : SleekStyle . body3 ())

عنوان

 SleekText ( "hello" style : SleekStyle . title3 ())

الترجمة

 SleekText ( "hello" style : SleekStyle . subtitle3 ())

وصلة

 SleekText ( "hello" style : SleekStyle . link3 ())

blockquote

 SleekText ( "hello" style : SleekStyle . blockquote3 ())

شفرة

 SleekText ( "hello" style : SleekStyle . code3 ())

التسمية التوضيحية

 SleekText ( "hello" style : SleekStyle . caption3 ())

محتوى

يتيح لك المحتوى تحديد المستوى الافتراضي المحدد مسبقًا لجميع أحفاده.

صغير

 SleekContent . small (
    child : Column (
        children : < Widget > [
            SleekText ( "title" style : SleekStyle . title ()),
            SleekText ( "body" style : SleekStyle . body ()),
            SleekText ( "caption" style : SleekStyle . caption ()),
        ]
    )
)

طبيعي

 SleekContent . normal (
    child : Column (
        children : < Widget > [
            SleekText ( "title" style : SleekStyle . title ()),
            SleekText ( "body" style : SleekStyle . body ()),
            SleekText ( "caption" style : SleekStyle . caption ()),
        ]
    )
)

كبير

 SleekContent . big (
    child : Column (
        children : < Widget > [
            SleekText ( "title" style : SleekStyle . title ()),
            SleekText ( "body" style : SleekStyle . body ()),
            SleekText ( "caption" style : SleekStyle . caption ()),
        ]
    )
)

شكرًا

بفضل فريق الإطار بولما للإلهام.