sleek_typography

Forma flexible de personalizar el texto.

Instalar

Agregue la dependencia a su pubspec.yaml :

 dependencies :
    sleek_typography : <version> 

Comienzo rápido

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

Uso

Definición de la tipografía global

Puedes definir cuatro tipos de preajustes:

• Tamaños ( 1 a 10 ): Tamaños de fuente
• Pesos ( light , normal , medium , bold ): pesas de fuentes
• Familias ( primary , secondary , monospace , code ): familias de fuentes
• Estilos ( none , caption , code , blockquote , body , link , button , subtitle , title ): un conjunto de combina de opción de estilo común.

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

Para un ejemplo de definición completa, consulte la definición predeterminada.

Actualización de tipografía global

La tipografía se puede actualizar desde donde sea del árbol. Esto puede ser útil para responder: adaptar el tamaño del contenido cuando MediaQuery.size cambia, por ejemplo.

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

Widgets

Texto

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

Básico

Los tipos básicos le permiten elegir una combinación de peso y tamaño.

Normal

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

Medio

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

Atrevido

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

Luz

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

Estilos predefinidos

Cada estilo predefinido tiene 6 niveles y se definen mediante una combinación de tamaño, peso o incluso un constructor de widgets alrededor. Están construidos para ser coherentes con los niveles correspondientes (por ejemplo, un título siempre tendrá una fuente más grande que un cuerpo para un nivel correspondiente).

Cuerpo

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

Título

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

Subtitular

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

Enlace

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

Bloqueo

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

Código

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

Subtítulo

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

Contenido

El contenido le permite definir un nivel predefinido predeterminado para todos sus descendientes.

Pequeño

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

Grande

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

Gracias

Gracias al equipo de Bulma Framework por la inspiración.