🍢

【Flutter】Centering of Multiple TextSpan

2024/04/18に公開

Flutterでは、TextSpanの文字を中央揃えするためにWidgetSpanが使用できます。
WidgetSpanalignmentPlaceholderAlignment.middleを適用します。

 RichText(
  text: TextSpan(
    children: [
      WidgetSpan(
        child: Text(
          '+',
          style: TextStyle(
            fontSize: 48,
            fontWeight: FontWeight.bold,
          ),
        ),
        alignment: PlaceholderAlignment.middle,
      ),
      WidgetSpan(
        child: Text(
          '40',
          style: TextStyle(
            fontSize: 64,
            fontWeight: FontWeight.bold,
          ),
        ),
        alignment: PlaceholderAlignment.middle,
      ),
      WidgetSpan(
        child: Text(
          'pt',
          style: TextStyle(
            fontSize: 48,
            fontWeight: FontWeight.bold,
          ),
        ),
        alignment: PlaceholderAlignment.middle,
      ),
    ],
  ),
);

Ref

https://stackoverflow.com/questions/55553710/how-to-center-two-texts-in-flutter

https://api.flutter.dev/flutter/painting/TextSpan-class.html

https://api.flutter.dev/flutter/widgets/WidgetSpan-class.html

Awarefy 技術ブログ

Discussion