DEV Community 👩‍💻👨‍💻

Cover image for Styled Text Package
flutterCode
flutterCode

Posted on • Originally published at fluttercode.blogspot.com

Styled Text Package

Keine Anwendung kommt ohne Texte aus. Diese Texte zu formatieren ist dementsprechend eine immer wiederkehrende Aufgabe. Flutter hat dafür ohne Zweifel gute Bordmittel. Aber wenn es darum geht größere Textmengen zu bearbeiten wird es rasch aufwendig.

amazingsoftworks hat für diese Problemstellung eine interessante Package veröffentlicht.
styled_text ermöglicht das Formatieren eines Textes, ähnlich wie man es aus Html kennt. Das heisst, es werden Tags verwendet:

class TextKonserve extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StyledText(
      text: '<italic>Dies ist ein</italic> <bold>Test !</bold>',
      tags: {
        'bold': StyledTextTag(
            style: TextStyle(
          fontFamily: 'Raleway',
          fontSize: 20.0,
          fontWeight: FontWeight.w700,
          fontStyle: FontStyle.normal,
          color: Colors.red,
        )),
        'italic': StyledTextTag(
            style: TextStyle(
          fontFamily: 'Raleway',
          fontSize: 20.0,
          fontStyle: FontStyle.italic,
          fontWeight: FontWeight.w700,
        ))
      },
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Im Code oben ist das Prinzip schön zu sehen. text: enthält die zu formatierende Zeichenkette.StyledTextTag übernimmt dabei ein TextStyle Widget, welches die eigentliche Formatierung enthält.

Wer auf die Beispiel Seite der Entwickler surft, findet eine Vielzahl von Einsatzmöglichkeiten. Erwähnen möchte ich hier, das auch das Einbinden von Icons möglich ist, oder die Verwendung von Texten, die über mehrere Zeilen gehen. Es lohnt sich auf jeden Fall die Package zu testen!

Bis bald ! 😀

Photo by Max Chen on Unsplash

Top comments (1)

Collapse
 
gismo1337 profile image
Sebastian

Schade dass die deutsche Community hier auf dev.to so klein ist. Mir fällt es viel leichter deutschen Text zu lesen und den Inhalt zu lernen. Aber wäre es einfach, würde es wohl jeder machen.

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.