Flutter 2021 - styled_text Package

In diesem kurzen Post möchte ich die styled_text package vorstellen. Wer diesen Post von mir gelesen hat, weiss das man mehrere Widgets braucht, um einen Text unterschiedlich zu formatieren.

Einen anderen, aber bekannten Ansatz bringt styled_text ins Spiel. Wer ein wenig Erfahrung mit Html hat, und wer hat das nicht 😀, kennt das Tag Prinzip. 

<h2> Mein kluger Text </h2>, zum Beispiel formatiert "Mein kluger Text" gemäß den Vorgaben die für h2 gültig sind.

styled_text

Die Installation wird auf der Homepage erklärt. Dort sind auch Beispiele für den Einsatz zu finden.

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

Im Code oben verwende ich ein Stateless Widget, welches einen Text retourniert. Interessant ist text:'....' . Du siehst, das wie in Html, mit Tags formatiert wird. Oben sind das italic und bold.

Das funktioniert sowohl für kurze Zeichenketten, als auch für Texte die über mehrere Zeilen gehen. Die eigentlichen Styling Informationen werden über den Tag definiert. StyledTextTag(...) erhält das bekannte TextStyle(...) Widget, wo alles gewünschte gesetzt werden kann.

import 'package:styled_text/styled_text.dart';
import 'package:flutter/material.dart';

class TextKonserve extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StyledText(
      text: '''<italic>Dies ist ein</italic> <bold>Test !</bold> Nun 
funktioniert <italic>das auch über mehrere</italic> Zeilen''',
      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,
        ))
      },
      newLineAsBreaks: false,
    );
  }
}

Im Code oben ist im übrigen newLineAsBreaks:false gesetzt. Die default Einstellung ist hier true. Das Ergebnis dieses Codes im AVD (Emulator) :

styled_text kann für verschiedene Problemstellungen angewandt werden. Links lassen sich ebenso gestalten, wie auch das Einbinden von Icons ist möglich. Ein Blick auf die Beispiele lohnt sich. Bis bald.