StyledText class

StyledText allows you to display rich text with different styles.

Example using children:

StyledText(
 children: [
  Text("Hello", style: TextStyle(color: Colors.red)),
  Text("World", style: TextStyle(color: Colors.blue)),
  Text("!")
  ]
)

Example using template text:

StyledText.template(
  "Hello {{name}}, welcome to {{app}}!",
  styles: {
    "name": TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
    "app": TextStyle(color: Colors.green),
  },
  onTap: {
    "name": () => print("Name tapped"),
    "app": () => print("App tapped"),
  }
)

Example using template text with pipe-separated styles:

StyledText.template(
  text: "Learn {{Korean}}, {{Japanese}}, {{Thai}} and {{English}}!",
  styles: {
    "Korean|Japanese|Thai|English": TextStyle(
      color: Colors.blue,
      fontWeight: FontWeight.bold
    ),
  },
  onTap: {
    "Korean|Japanese": () => print("Asian language tapped"),
    "Thai|English": () => print("Other language tapped"),
  }
)

Example using wildcard * to style all placeholders:

StyledText.template(
  "Hello {{name}}, welcome to {{app}}!",
  styles: {
    "*": TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
  },
)

Example using template text with localization ({{key:text}} syntax):

StyledText.template(
  "learn_skills".tr(),
  // en: "Learn {{lang:Languages}}, {{read:Reading}} and {{speak:Speaking}} in {{app:AppName}}"
  // es: "Aprende {{lang:Idiomas}}, {{read:Lectura}} y {{speak:Habla}} en {{app:AppName}}"
  styles: {
    "lang|read|speak": TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),
    "app": TextStyle(color: Colors.green),
  },
)