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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

Content

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

Small

image

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

image

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

image

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.

Libraries

sleek_typography