Small light fonts appear to have a different weighting with Impeller on Android (and other platforms) #190340

import 'dart:io' show Platform;
import 'dart:ui';

import 'package:flutter/material.dart';

void main() => runApp(const FontComparisonApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(debugShowCheckedModeBanner: false, home: _ComparisonScreen());
  }
}

class _ComparisonScreen extends StatelessWidget {
  const _ComparisonScreen();

  static const _sizes = [10.0, 12.0, 14.0, 16.0, 18.0, 20.0, 24.0, 28.0, 32.0, 48.0];

  static const _weights = [
    (label: 'Thin 100', weight: FontWeight.w100),
    (label: 'Light 300', weight: FontWeight.w300),
    (label: 'Regular 400', weight: FontWeight.w400),
    (label: 'Medium 500', weight: FontWeight.w500),
    (label: 'Bold 700', weight: FontWeight.w700),
  ];

  static const _backgrounds = [
    (label: 'Black', bgColor: Color(0xFF000000), textColor: Color(0xFFFFFFFF)),
    (label: 'Nav bar navy', bgColor: Color(0xFF0D1523), textColor: Color(0xFFFFFFFF)),
    (label: 'Mid grey', bgColor: Color(0xFF444444), textColor: Color(0xFFFFFFFF)),
    (label: 'White', bgColor: Color(0xFFFFFFFF), textColor: Color(0xFF000000)),
  ];

  static const _dim = Color(0xFF888888);
  static const _labelStyle = TextStyle(color: _dim, fontSize: 12, decoration: TextDecoration.none);

  @override
  Widget build(BuildContext context) {
    final isImpeller = ImageFilter.isShaderFilterSupported;
    final renderer = isImpeller ? 'Impeller' : 'Skia';
    final rendererColor = isImpeller ? const Color(0xFF4CAF50) : const Color(0xFF2196F3);
    final backend = _gpuBackend();

    final isMobile = MediaQuery.of(context).size.width < 800;
    final padding = isMobile ? 16.0 : 48.0;
    final verticalSpacing = isMobile ? 16.0 : 24.0;

    return Scaffold(
      backgroundColor: const Color(0xFF111111),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(padding),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            for (final bg in _backgrounds) ...[
              _bgSection(bg.label, bg.bgColor, bg.textColor, renderer, rendererColor, backend, isMobile),
              SizedBox(height: verticalSpacing),
            ],
          ],
        ),
      ),
    );
  }

  Widget _rendererBadge(String renderer, Color rendererColor, String backend, Color textColor) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(
          renderer,
          style: TextStyle(
            color: rendererColor,
            fontSize: 11,
            fontWeight: FontWeight.w700,
            decoration: TextDecoration.none,
          ),
        ),
        const SizedBox(width: 6),
        Text(
          backend,
          style: TextStyle(
            color: textColor.withValues(alpha: 0.5),
            fontSize: 11,
            fontWeight: FontWeight.w400,
            decoration: TextDecoration.none,
          ),
        ),
      ],
    );
  }

  Widget _bgSection(
    String label,
    Color bgColor,
    Color textColor,
    String renderer,
    Color rendererColor,
    String backend,
    bool isMobile,
  ) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: [
        Text(label, style: _labelStyle),
        const SizedBox(height: 8),
        Container(
          decoration: BoxDecoration(color: bgColor, borderRadius: BorderRadius.circular(8)),
          padding: EdgeInsets.all(isMobile ? 12.0 : 20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              _rendererBadge(renderer, rendererColor, backend, textColor),
              const SizedBox(height: 10),
              for (final w in _weights) ...[
                Text(
                  w.label,
                  style: TextStyle(
                    color: textColor.withValues(alpha: 0.4),
                    fontSize: 10,
                    fontWeight: FontWeight.w400,
                    decoration: TextDecoration.none,
                  ),
                ),
                const SizedBox(height: 4),
                SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.end,
                    children: [
                      for (final size in _sizes) ...[
                        _sampleText('Ag', size, w.weight, textColor),
                        if (size != _sizes.last) SizedBox(width: isMobile ? 8 : 16),
                      ],
                    ],
                  ),
                ),
                SizedBox(height: isMobile ? 12 : 16),
              ],
            ],
          ),
        ),
      ],
    );
  }

  Widget _sampleText(String text, double fontSize, FontWeight weight, Color color) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Text(
          text,
          style: TextStyle(color: color, fontSize: fontSize, fontWeight: weight, decoration: TextDecoration.none),
        ),
        const SizedBox(height: 2),
        Text(
          '${fontSize.toInt()}',
          style: TextStyle(
            color: color.withValues(alpha: 0.35),
            fontSize: 9,
            fontWeight: FontWeight.w400,
            decoration: TextDecoration.none,
          ),
        ),
      ],
    );
  }
}

String _gpuBackend() {
  if (Platform.isMacOS) return 'Metal';
  if (Platform.isIOS) return 'Metal';
  if (Platform.isAndroid) return 'Vulkan/GL';
  if (Platform.isLinux) return 'EGL/OpenGL ES';
  if (Platform.isWindows) return 'D3D/Vulkan';
  return 'Unknown';
}