sleek_typography 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 61

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.

[0.1.2] - 2020/03/26 #

  • Updated documentation.

[0.1.1] - 2020/03/26 #

  • Updated documentation.

[0.1.0] - 2020/03/26 #

  • Initial version.

example/lib/main.dart

import 'package:flutter/material.dart';

import 'home.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  sleek_typography: ^0.1.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:sleek_typography/sleek_typography.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
35
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
70
Overall:
Weighted score of the above. [more]
61
Learn more about scoring.

We analyzed this package on Jul 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.13
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

because of import path [sleek_typography] that is in a package requiring null.

Health issues and suggestions

Document public APIs. (-0.01 points)

312 out of 323 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Maintenance issues and suggestions

Support latest dependencies. (-10 points)

The version constraint in pubspec.yaml does not support the latest published versions for 1 dependency (freezed_annotation).

The package description is too short. (-20 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
derived_colors ^0.2.0 0.2.4
flutter 0.0.0
freezed_annotation ^0.7.1 0.7.1 0.11.0
Transitive dependencies
collection 1.14.12 1.14.13
json_annotation 3.0.1
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8
Dev dependencies
build_runner any
flutter_test
freezed ^0.10.4