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

使用法

グローバルタイポグラフィの定義

4つの種類のプリセットを定義できます。

• サイズ（ 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 ())

BlockQuote

 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チームに感謝します。