Bone.text does not respect TextStyle.height

[zamahaka]

Hi, thanks for an awesome package!

I found one caveat with Bote.text though. When using TextStyle with height set to not 1, bone does not use height matching to height of corresponing Text widget.

Example:

Example code:

class TextBoneLineHeightExample extends StatelessWidget {
  const TextBoneLineHeightExample({super.key});

  @override
  Widget build(BuildContext context) {
    final containedText = Container(
      color: Colors.blue.withOpacity(0.25),
      child: Text('Sample text'),
    );

    return Skeletonizer.zone(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('height: 1.5'),
          DefaultTextStyle(
            style: TextStyle(fontSize: 40, height: 1.5, color: Colors.red),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                Bone.text(words: 2),
                containedText,
              ],
            ),
          ),
          Text('height: 0.5'),
          DefaultTextStyle(
            style: TextStyle(fontSize: 40, height: 0.5, color: Colors.red),
            child: Row(
              children: [
                Bone.text(words: 2),
                containedText,
              ],
            ),
          ),
          Text('height: 1.5 | With hack'),
          DefaultTextStyle(
            style: TextStyle(fontSize: 40, height: 1.5, color: Colors.red),
            child: Row(
              children: [
                TextBoneLineHeightHack(words: 2),
                containedText,
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// Bone.text should size itself based on font size and height, but it does not
/// This widget overrides incoming [TextStyle], overriding its fontSize to multiple of height.
/// This approach is not ideal, as it messes with words width
class TextBoneLineHeightHack extends StatelessWidget {
  const TextBoneLineHeightHack({
    super.key,
    this.words = 3,
    this.style,
  });

  final int words;
  final TextStyle? style;

  @override
  Widget build(BuildContext context) {
    TextStyle style = this.style ?? DefaultTextStyle.of(context).style;

    if (style.fontSize != null && style.height != null) {
      style = style.copyWith(
        fontSize: style.fontSize! * style.height!,
        height: 1,
      );
    }

    return Bone.text(
      style: style,
      words: words,
    );
  }
}