sleek_typography

Гибкий способ настройки текста.

Установить

Добавьте зависимость в свой pubspec.yaml :

 dependencies :
    sleek_typography : <version> 

Быстрый старт

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

Использование

Определение глобальной типографии

Вы можете определить четыре вида пресетов:

• Размеры ( 1 до 10 ): размеры шрифтов
• Вес ( light , normal , medium , bold ): вес шрифта
• Семьи ( primary , secondary , monospace , code ): семьи шрифтов
• Стили ( none , caption , code , blockquote , body , link , button , subtitle , title ): набор комбинаций общих вариантов стиля.

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

Для полного примера определения см. Определение по умолчанию.

Обновление глобальной типографии

Типография может быть обновлена откуда на дереве. Это может быть полезно, чтобы быть отзывчивым: адаптировать размер контента, когда MediaQuery.size , например.

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

Виджеты

Текст

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

Базовый

Основные типы позволяют выбрать комбинацию веса и размера.

Нормальный

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

Середина

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

Смелый

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

Свет

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

Предопределенные стили

Каждый предопределенный стиль имеет 6 уровней и определяется комбинацией размера, веса или даже строителя виджетов вокруг. Они построены, чтобы быть согласованными с соответствующими уровнями (например, заголовок всегда будет иметь больший шрифт, чем тело для соответствующего уровня).

Тело

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

Заголовок

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

Подзаголовок

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

Связь

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

Блок -Quoquote

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

Код

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

Подпись

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

Содержание

Контент позволяет вам определить предопределенный уровень по умолчанию для всех его потомков.

Маленький

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

Нормальный

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

Спасибо

Спасибо команде Bulma Framework за вдохновение.