sleek_typography

Moyenne flexible de personnalisation du texte.

Installer

Ajoutez la dépendance à votre pubspec.yaml :

 dependencies :
    sleek_typography : <version> 

Démarrage rapide

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

Usage

Définir la typographie globale

Vous pouvez définir quatre types de préréglages:

• Tailles ( 1 à 10 ): tailles de police
• Poids ( light , normal , medium , bold ): poids de police
• Familles ( primary , secondary , monospace , code ): Familles de police
• Styles ( none , caption , code , blockquote , body , link , button , subtitle , title ): Un ensemble d'options de style communes.

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

Pour un exemple de définition complet, consultez la définition par défaut.

Mise à jour de la typographie globale

La typographie peut être mise à jour partout dans l'arbre. Cela peut être utile pour être réactif: adapter la taille du contenu lorsque MediaQuery.size change par exemple.

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

Widgets

Texte

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

Basique

Les types de base vous permettent de choisir une combinaison d'un poids et d'une taille.

Normale

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

Moyen

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

Audacieux

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

Lumière

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

Styles prédéfinis

Chaque style prédéfini a 6 niveaux et est défini par une combinaison de taille, de poids ou même d'un constructeur de widgets autour. Ils sont construits pour être cohérents avec les niveaux correspondants (par exemple, un titre aura toujours une police plus grande qu'un corps pour un niveau correspondant).

Corps

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

Titre

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

Sous-titre

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

Lien

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

Blocsquote

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

Code

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

Légende

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

Contenu

Contenu vous permet de définir un niveau prédéfini par défaut pour tous ses descendants.

Petit

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

Normale

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

Grand

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

Merci

Merci à l'équipe du cadre de Bulma pour l'inspiration.