Styled Text

परिचय

StyledText मिश्रित स्टाइल, टैप कॉलबैक, और पॉइंटर इवेंट के साथ रिच टेक्स्ट प्रदर्शित करने के लिए एक विजेट है। यह कई TextSpan चिल्ड्रन के साथ RichText विजेट के रूप में रेंडर होता है, जो आपको टेक्स्ट के प्रत्येक खंड पर बारीक नियंत्रण देता है।

StyledText दो मोड का समर्थन करता है:

1. चिल्ड्रन मोड -- Text विजेट की सूची पास करें, प्रत्येक की अपनी स्टाइल के साथ
2. टेम्पलेट मोड -- स्ट्रिंग में {{placeholder}} सिंटैक्स का उपयोग करें और प्लेसहोल्डर को स्टाइल और एक्शन से मैप करें

बुनियादी उपयोग

// Children mode - list of Text widgets
StyledText(
  children: [
    Text("Hello ", style: TextStyle(color: Colors.black)),
    Text("World", style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold)),
  ],
)

// Template mode - placeholder syntax
StyledText.template(
  "Welcome to {{Nylo}}!",
  styles: {
    "Nylo": TextStyle(fontWeight: FontWeight.bold, color: Colors.blue),
  },
)

चिल्ड्रन मोड

स्टाइल्ड टेक्स्ट बनाने के लिए Text विजेट की सूची पास करें:

StyledText(
  style: TextStyle(fontSize: 16, color: Colors.black),
  children: [
    Text("Your order "),
    Text("#1234", style: TextStyle(fontWeight: FontWeight.bold)),
    Text(" has been "),
    Text("confirmed", style: TextStyle(color: Colors.green, fontWeight: FontWeight.bold)),
    Text("."),
  ],
)

बेस style किसी भी ऐसे चाइल्ड पर लागू होती है जिसकी अपनी स्टाइल नहीं है।

पॉइंटर इवेंट

पता लगाएँ कि पॉइंटर किसी टेक्स्ट खंड पर कब प्रवेश करता है या बाहर निकलता है:

StyledText(
  onEnter: (Text text, PointerEnterEvent event) {
    print("Hovering over: ${text.data}");
  },
  onExit: (Text text, PointerExitEvent event) {
    print("Left: ${text.data}");
  },
  children: [
    Text("Hover me", style: TextStyle(color: Colors.blue)),
    Text(" or "),
    Text("me", style: TextStyle(color: Colors.red)),
  ],
)

टेम्पलेट मोड

{{placeholder}} सिंटैक्स के साथ StyledText.template() का उपयोग करें:

StyledText.template(
  "By continuing, you agree to our {{Terms of Service}} and {{Privacy Policy}}.",
  style: TextStyle(color: Colors.grey),
  styles: {
    "Terms of Service": TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
    "Privacy Policy": TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
  },
  onTap: {
    "Terms of Service": () => routeTo("/terms"),
    "Privacy Policy": () => routeTo("/privacy"),
  },
)

{{ }} के बीच का टेक्स्ट प्रदर्शन टेक्स्ट और स्टाइल और टैप कॉलबैक खोजने के लिए उपयोग की जाने वाली कुंजी दोनों है।

प्लेसहोल्डर स्टाइलिंग

प्लेसहोल्डर नामों को TextStyle ऑब्जेक्ट से मैप करें:

StyledText.template(
  "Framework Version: @{{$version}}",
  style: textTheme.bodyMedium,
  styles: {
    version: TextStyle(fontWeight: FontWeight.bold),
  },
)

टैप कॉलबैक

प्लेसहोल्डर नामों को टैप हैंडलर से मैप करें:

StyledText.template(
  "{{Sign up}} or {{Log in}} to continue.",
  onTap: {
    "Sign up": () => routeTo(SignUpPage.path),
    "Log in": () => routeTo(LoginPage.path),
  },
  styles: {
    "Sign up": TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
    "Log in": TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
  },
)

पाइप-सेपरेटेड कीज़

पाइप | से अलग की गई कीज़ का उपयोग करके कई प्लेसहोल्डर पर एक ही स्टाइल या कॉलबैक लागू करें:

StyledText.template(
  "Available in {{English}}, {{French}}, and {{German}}.",
  styles: {
    "English|French|German": TextStyle(
      fontWeight: FontWeight.bold,
      color: Colors.blue,
    ),
  },
  onTap: {
    "English|French|German": () => showLanguagePicker(),
  },
)

यह तीनों प्लेसहोल्डर पर एक ही स्टाइल और कॉलबैक मैप करता है।

पैरामीटर

StyledText (चिल्ड्रन मोड)

StyledText.template (टेम्पलेट मोड)

अन्य सभी पैरामीटर (softWrap, textAlign, maxLines, आदि) चिल्ड्रन कंस्ट्रक्टर के समान हैं।

टेक्स्ट एक्सटेंशन

Nylo Website Flutter के Text विजेट को टाइपोग्राफी और यूटिलिटी मेथड से विस्तारित करता है।

टाइपोग्राफी स्टाइल

किसी भी Text विजेट पर मटीरियल डिज़ाइन टाइपोग्राफी स्टाइल लागू करें:

Text("Hello").displayLarge()
Text("Hello").displayMedium()
Text("Hello").displaySmall()
Text("Hello").headingLarge()
Text("Hello").headingMedium()
Text("Hello").headingSmall()
Text("Hello").titleLarge()
Text("Hello").titleMedium()
Text("Hello").titleSmall()
Text("Hello").bodyLarge()
Text("Hello").bodyMedium()
Text("Hello").bodySmall()
Text("Hello").labelLarge()
Text("Hello").labelMedium()
Text("Hello").labelSmall()

प्रत्येक वैकल्पिक ओवरराइड स्वीकार करता है:

Text("Welcome").headingLarge(
  color: Colors.blue,
  fontWeight: FontWeight.w700,
  letterSpacing: 1.2,
)

उपलब्ध ओवरराइड (सभी टाइपोग्राफी मेथड के लिए समान):

यूटिलिटी मेथड

// Font weight
Text("Bold text").fontWeightBold()
Text("Light text").fontWeightLight()

// Alignment
Text("Left aligned").alignLeft()
Text("Center aligned").alignCenter()
Text("Right aligned").alignRight()

// Max lines
Text("Long text...").setMaxLines(2)

// Font family
Text("Custom font").setFontFamily("Roboto")

// Font size
Text("Big text").setFontSize(24)

// Custom style
Text("Styled").setStyle(TextStyle(color: Colors.red))

// Padding
Text("Padded").paddingOnly(left: 8, top: 4, right: 8, bottom: 4)

// Copy with modifications
Text("Original").copyWith(
  textAlign: TextAlign.center,
  maxLines: 2,
  style: TextStyle(fontSize: 18),
)

उदाहरण

नियम और शर्तें लिंक

StyledText.template(
  "By signing up, you agree to our {{Terms}} and {{Privacy Policy}}.",
  style: TextStyle(color: Colors.grey.shade600, fontSize: 14),
  styles: {
    "Terms|Privacy Policy": TextStyle(
      color: Colors.blue,
      decoration: TextDecoration.underline,
    ),
  },
  onTap: {
    "Terms": () => routeTo("/terms"),
    "Privacy Policy": () => routeTo("/privacy"),
  },
)

वर्शन प्रदर्शन

StyledText.template(
  "Framework Version: {{$nyloVersion}}",
  style: textTheme.bodyMedium!.copyWith(
    color: NyColor(
      light: Colors.grey.shade800,
      dark: Colors.grey.shade200,
    ).toColor(context),
  ),
  styles: {
    nyloVersion: TextStyle(fontWeight: FontWeight.bold),
  },
)

मिश्रित स्टाइल पैराग्राफ

StyledText(
  style: TextStyle(fontSize: 16, height: 1.5),
  children: [
    Text("Flutter "),
    Text("makes it easy", style: TextStyle(fontWeight: FontWeight.bold)),
    Text(" to build beautiful apps. With "),
    Text("Nylo", style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold)),
    Text(", it's even faster."),
  ],
)

टाइपोग्राफी चेन

Text("Welcome Back")
    .headingLarge(color: Colors.black)
    .alignCenter()