How to remove extra whitespace from the RichText widget

Viewed 119

Update:

I filed an issue with the flutter team here.

Original question:

I'm having a hard time figuring out how to remove the extra whitespaces from the RichText widget.

I'm looking for all four text lines in the picture to be the same width.

Text

Code:

import 'dart:ui';

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  final String text =
      "Placeholder text is the label for possible content in a text box.";

  @override
  Widget build(BuildContext context) {
    final TextStyle style = TextStyle(
      color: Colors.black,
      fontSize: 14,
      fontWeight: FontWeight.normal,
      wordSpacing: 0,
      fontStyle: FontStyle.normal,
      decorationThickness: 0,
      decoration: TextDecoration.none,
      letterSpacing: 1,
      textBaseline: TextBaseline.alphabetic,
      height: 1,
      decorationStyle: TextDecorationStyle.solid,
    );

    final children = text
        .split("")
        .map(
          (char) => WidgetSpan(
            child: Text(
              char,
              style: style,
              textWidthBasis: TextWidthBasis.parent,
            ),
            style: style,
          ),
        )
        .toList();

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              RichText(
                textWidthBasis: TextWidthBasis.parent,
                text: TextSpan(text: text, style: style),
              ),
              Text.rich(TextSpan(text: text, style: style)),
              RichText(
                textWidthBasis: TextWidthBasis.parent,
                text: TextSpan(style: style, children: children),
              ),
              Text.rich(
                TextSpan(children: children, style: style),
                style: style,
                textWidthBasis: TextWidthBasis.parent,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Thanks.

0 Answers
Related