sleek_typography

Flexibler Weg zum Anpassen von Text.

Installieren

Fügen Sie die Abhängigkeit zu Ihrem pubspec.yaml hinzu:

 dependencies :
    sleek_typography : <version> 

Schneller Start

 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 ()),
                ],
            ),
        ),
    ],
)

Verwendung

Definieren der globalen Typografie

Sie können vier Arten von Voreinstellungen definieren:

• Größen ( 1 bis 10 ): Schriftgrößen
• Gewichte ( light , normal , medium , bold ): Schriftgewichte
• Familien ( primary , secondary , monospace , code ): Schriftfamilienfamilien
• Stile ( none , caption , code , blockquote , body , link , button , subtitle , title ): eine Reihe gemeinsamer Styling -Optionskombinationen.

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

Eine vollständige Definitionsbeispiel finden Sie in der Standarddefinition.

Aktualisieren der globalen Typografie

Die Typografie kann von wo immer im Baum aktualisiert werden. Dies kann nützlich sein, um reaktionsschnell zu sein: Anpassung der Inhaltsgröße, wenn MediaQuery.size beispielsweise Änderungen angleichen.

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

Widgets

Text

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

Basic

Mit grundlegenden Typen können Sie eine Kombination aus Gewicht und Größe auswählen.

Normal

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

Medium

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

Deutlich

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

Licht

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

Vordefinierte Stile

Jeder vordefinierte Stil hat 6 Ebenen und wird durch eine Kombination aus Größe, Gewicht oder sogar einem Widget -Bauunternehmer definiert. Sie sind so konstruiert, dass sie mit entsprechenden Ebenen zusammenhängen (zum Beispiel wird ein Titel immer eine größere Schriftart als einen Körper für eine entsprechende Ebene haben).

Körper

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

Titel

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

Untertitel

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

Link

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

Blockquote

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

Code

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

Untertitel

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

Inhalt

Mit Inhalten können Sie ein Standard -vordefinierter Niveau für alle Nachkommen definieren.

Klein

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

Normal

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

Groß

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

Danke

Vielen Dank an das Bulma Framework -Team für die Inspiration.