sleek_typography 0.1.0 sleek_typography: ^0.1.0 copied to clipboard
Flexible way of customizing text.
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 spacing #
You can define four kind of presets :
- Sizes (
1
to10
) : 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.
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 style for all descendant.
SleekContent.small(
child: Column(
children: <Widget>[
SleekText("title" style: SleekStyle.title()),
SleekText("body" style: SleekStyle.body()),
SleekText("caption" style: SleekStyle.caption()),
]
)
),
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.