sleek_typography

Description:

sleek typography

Flexible way of customizing text.

Install #
Add the dependency to your pubspec.yaml :
dependencies:
sleek_typography: <version>
copied to clipboard
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()),
],
),
),
],
)
copied to clipboard
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>,
)
copied to clipboard
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>
),
);
copied to clipboard
Widgets #
Text
SleekText("hello" style: SleekStyle.normal())
copied to clipboard
Basic
Basic types let you choose a combination of a weight and a size.
Normal

SleekText("hello" style: SleekStyle.normal3())
copied to clipboard
Medium

SleekText("hello" style: SleekStyle.medium3())
copied to clipboard
Bold

SleekText("hello" style: SleekStyle.bold3())
copied to clipboard
Light

SleekText("hello" style: SleekStyle.light3())
copied to clipboard
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())
copied to clipboard
Title

SleekText("hello" style: SleekStyle.title3())
copied to clipboard
Subtitle

SleekText("hello" style: SleekStyle.subtitle3())
copied to clipboard
Link

SleekText("hello" style: SleekStyle.link3())
copied to clipboard
Blockquote

SleekText("hello" style: SleekStyle.blockquote3())
copied to clipboard
Code

SleekText("hello" style: SleekStyle.code3())
copied to clipboard
Caption

SleekText("hello" style: SleekStyle.caption3())
copied to clipboard
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()),
]
)
)
copied to clipboard
Normal

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

SleekContent.big(
child: Column(
children: <Widget>[
SleekText("title" style: SleekStyle.title()),
SleekText("body" style: SleekStyle.body()),
SleekText("caption" style: SleekStyle.caption()),
]
)
)
copied to clipboard
Thanks #
Thanks to the bulma framework team for the inspiration.