sleek_typography sleek

sleek_typography

ดาวน์โหลดแบบอักษร

1.0.0

ดาวน์โหลด

วิธีการปรับแต่งข้อความที่ยืดหยุ่น

ติดตั้ง

เพิ่มการพึ่งพาใน 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 ): ชุดของตัวเลือกการออกแบบทั่วไป combinaisons

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