Styled Text

Giriş

StyledText, karma stiller, dokunma geri çağırmaları ve işaretçi olayları ile zengin metin görüntülemek için bir widget'tır. Birden fazla TextSpan alt öğesiyle bir RichText widget'ı olarak render edilir ve metnin her bir bölümü üzerinde ayrıntılı kontrol sağlar.

StyledText iki modu destekler:

1. Children modu -- her biri kendi stiline sahip Text widget'larının listesini geçirin
2. Şablon modu -- bir dizede {{yer tutucu}} sözdizimini kullanın ve yer tutucuları stillere ve eylemlere eşleyin

Temel Kullanım

// 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),
  },
)

Children Modu

Stillendirilmiş metin oluşturmak için bir Text widget'ları listesi geçirin:

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

Temel style, kendi stili olmayan tüm alt öğelere uygulanır.

İşaretçi Olayları

İşaretçinin bir metin segmentine girdiğini veya çıktığını algılayın:

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

Şablon Modu

{{yer tutucu}} sözdizimi ile StyledText.template() kullanın:

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"),
  },
)

{{ }} arasındaki metin hem görüntülenen metin hem de stilleri ve dokunma geri çağırmalarını aramak için kullanılan anahtardır.

Yer Tutucuları Stillendirme

Yer tutucu adlarını TextStyle nesnelerine eşleyin:

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

Dokunma Geri Çağırmaları

Yer tutucu adlarını dokunma işleyicilerine eşleyin:

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),
  },
)

Pipe ile Ayrılmış Anahtarlar

Pipe | ile ayrılmış anahtarları kullanarak aynı stili veya geri çağırmayı birden fazla yer tutucuya uygulayın:

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

Bu, aynı stili ve geri çağırmayı her üç yer tutucuya da eşler.

Parametreler

StyledText (Children Modu)

StyledText.template (Şablon Modu)

Diğer tüm parametreler (softWrap, textAlign, maxLines, vb.) children constructor ile aynıdır.

Text Extension'ları

Nylo Website, Flutter'ın Text widget'ını tipografi ve yardımcı metotlarla genişletir.

Tipografi Stilleri

Herhangi bir Text widget'ına Material Design tipografi stillerini uygulayın:

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

Her biri isteğe bağlı geçersiz kılmalar kabul eder:

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

Kullanılabilir geçersiz kılmalar (tüm tipografi metotları için aynı):

Yardımcı Metotlar

// 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),
)

Örnekler

Şartlar ve Koşullar Bağlantısı

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"),
  },
)

Sürüm Görüntüleme

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),
  },
)

Karma Stil Paragraf

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."),
  ],
)

Tipografi Zinciri

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