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

블록 쿼트

 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 팀에게 감사합니다.