sleek_typography

Maneira flexível de personalizar o texto.

Instalar

Adicione a dependência ao seu pubspec.yaml :

 dependencies :
    sleek_typography : <version> 

Início 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

Definindo a tipografia global

Você pode definir quatro tipos de predefinições:

• Tamanhos ( 1 a 10 ): Tamanhos de fonte
• Pesos ( light , normal , medium , bold ): pesos da fonte
• Famílias ( primary , secondary , monospace , code ): famílias de fontes
• Estilos ( none , caption , code , blockquote , body , link , button , subtitle , title ): um conjunto de combinais de opção de estilo comum.

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

Para um exemplo de definição completa, consulte a definição padrão.

Atualizando a tipografia global

A tipografia pode ser atualizada de onde quer que seja na árvore. Isso pode ser útil para ser responsivo: adaptar o tamanho do conteúdo quando MediaQuery.size as alterações, por exemplo.

 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

Tipos básicos permitem escolher uma combinação de peso e tamanho.

Normal

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

Médio

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

Audacioso

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

Luz

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

Estilos predefinidos

Cada estilo predefinido possui 6 níveis e é definido por uma combinação de tamanho, peso ou até mesmo um construtor de widgets. Eles são construídos para serem coerentes com os níveis correspondentes (por exemplo, um título sempre terá uma fonte maior do que um corpo para um nível correspondente).

Corpo

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

Título

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

Legenda

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

Link

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

BlockQuote

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

Código

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

Rubrica

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

Contente

O conteúdo permite definir um nível predefinido padrão para todos os seus descendentes.

Pequeno

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

Obrigado

Graças à equipe da estrutura de Bulma pela inspiração.