Specify tab size in Text widget

[pd4d10]

Hi, is there any parameter to specify tab size in text widget such as Text and RichText?

Seems it is 8 by default. In some cases developers may want to specify it as 4 or 2, for example code synatx highlighting lib, like the tab-size prop in CSS

Screenshot

Reproduce steps

Paste the code below to https://dartpad.dev/flutter

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text(
          '#\tTab in Text',
          style: TextStyle(fontFamily: 'Courier New'),
        ),
        RichText(
          text: TextSpan(
            text: '#\tTab in RichText',
            style: TextStyle(fontFamily: 'Courier New'),
          ),
        ),
        Text.rich(
          TextSpan(text: '#\tTab in Text.rich'),
          style: TextStyle(fontFamily: 'Courier New'),
        ),
      ],
    );
  }
}

[creativecreatorormaybenot]

I checked this (trying to figure out if this is actually an easy fix) and my conclusion is that this is probably not done in the framework (cc @VladyslavBondarenko) - the framework label might still make sense because we would certainly need a new parameter in the framework (probably inside of TextSpan), however, this seems like it needs to be adjusted on the engine-side (cc @HansMuller?).

In that case, I would also argue this is not an easy fix @TahaTesser because it touches the fundamentals of how text is not only painted but also laid out, i.e. currently the string is just passed as-is to the native ParagraphBuilder_addText (see https://github.com/flutter/engine/blob/b23abe2f8f93207497c773c28e63a4aae123e5c3/lib/ui/text.dart#L3468), which I assume is a Skia function. On top of that, I see no existing text style configuration for tabs.

This makes me conclude that tabs are handled by Skia internally and we would either need to hack it (by replacing with spaces), expose the configuration options if they exist, or implement this in the engine (or even in Skia) altogether.

---

Please point out if I am missing something obvious; this seems like a very useful feature.

[LucasAschenbach]

Is there any progress on this feature?

[HansMuller]

CC @loic-sharma

[loic-sharma]

Hello, thanks for creating this issue!

In that case, I would also argue this is not an easy fix @TahaTesser because it touches the fundamentals of how text is not only painted but also laid out, i.e. currently the string is just passed as-is to the native ParagraphBuilder_addText (see https://github.com/flutter/engine/blob/b23abe2f8f93207497c773c28e63a4aae123e5c3/lib/ui/text.dart#L3468), which I assume is a Skia function. On top of that, I see no existing text style configuration for tabs.

This is correct. Today, platform-specific code tries to convert the tab into a glyph during text shaping. As a result, how tabs are rendered depends on your font and your platform. As part of #79153, we plan to introduce some tab processing logic into Skia to make this behavior consistent across platforms. However, we haven't started proper support for things like tab stop or tab size customization. This is definitely not an easy fix.

As a hacky workaround before we fix this, you can consider pre-processing text and replacing tabs with the desired amount of spaces. Something like:

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Text(_processText('#\tTab in Text')),
        ),
      ),
    );
  }

  String _processText(String text) {
    return text.replaceAll('\t', '  ');
  }
}

[szetakyu]

It is strange that I only see a one-space-width tab at this moment