sleek_typography

Flexible way of customizing text.

Install

Add the dependency to your pubspec.yaml :

dependencies:
    sleek_typography: <version>

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

Usage

Defining global typography

You can define four kind of presets :

• Sizes (1 to 10) : font sizes
• Weights (light, normal, medium, bold) : font weights
• Families (primary, secondary, monospace, code) : font families
• Styles (none,caption,code,blockquote,body,link,button,subtitle,title) : a set of common styling option combinaisons.

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

For a complete definition example, see the default definition.

Updating global typography

Typography can be updated from wherever in the tree. This may be usefull to be responsive : adapting content size when MediaQuery.size changes for example.

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

Widgets

Text

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

Basic

Basic types let you choose a combination of a weight and a size.

Normal

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

Medium

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

Bold

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

Light

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

Predefined styles

Each predefined style has 6 levels and are defined by a combination of size, weight or even a widget builder around. They are built to be coherent with corresponding levels (for example, a title will always have a bigger font than a body for a corresponding level).

Body

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

Title

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

Subtitle

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

Link

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

Blockquote

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

Code

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

Caption

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

Content

Content let you define a default predefined level for all its descendants.

Small

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

Big

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

Thanks

Thanks to the bulma framework team for the inspiration.