GoogleFont-Weight issue on copyWith

Question

I'm creating a text-style model and using getter to have the text-Style that use google_fonts. The issue occurs when I provide fontWeight: property. Also, the fontWeight is not providing similar look as GoogleFont.

I've tested on another project, rebuilding the project, using html renderer. I've checked this question but it is not working.

Comparison between styles

But Looks from GoogleFont

flutter doctor -v no issue

Flutter (Channel stable, 2.5.2, on Microsoft Windows [Version
    10.0.19043.1288], locale en-US)
    • Flutter version 2.5.2 at C:\Tools\flutter
    • Upstream repository https://github.com/flutter/flutter.git        
    • Framework revision 3595343e20 (3 weeks ago), 2021-09-30 12:58:18  
      -0700
    • Engine revision 6ac856380f
    • Dart version 2.14.3

Model class

class AppTextStyles {
  static TextStyle get normalMidBlod => const TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 33,
      );

  static TextStyle get latoMidBlod => GoogleFonts.lato(
        fontWeight: FontWeight.bold, //this one
        color: Colors.black,
        fontSize: 33,
      );
  static TextStyle get lato => GoogleFonts.lato(
        color: Colors.black,
        fontSize: 33,
      );
}

Test Widget

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Column(
            children: const [
              Text("style: TextStyle.."),
              Text(
                "w100",
                style: TextStyle(fontWeight: FontWeight.w100, fontSize: 33),
              ),
              Text(
                "w200",
                style: TextStyle(fontWeight: FontWeight.w200, fontSize: 33),
              ),
              Text(
                "w300",
                style: TextStyle(fontWeight: FontWeight.w300, fontSize: 33),
              ),
              Text(
                "w400",
                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 33),
              ),
              Text(
                " w500",
                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 33),
              ),
              Text(
                " w600",
                style: TextStyle(fontWeight: FontWeight.w600, fontSize: 33),
              ),
              Text(
                "  w700",
                style: TextStyle(fontWeight: FontWeight.w700, fontSize: 33),
              ),
              Text(
                "  w800",
                style: TextStyle(fontWeight: FontWeight.w800, fontSize: 33),
              ),
              Text(
                "  w900",
                style: TextStyle(fontWeight: FontWeight.w900, fontSize: 33),
              ),
            ],
          ),
          const SizedBox(
            width: 30,
          ),
          Column(
            children: [
              Text("normalMidBlod.copyWith"),
              Text(
                "w100",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w100),
              ),
              Text(
                "w200",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w200),
              ),
              Text(
                "w300",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w300),
              ),
              Text(
                "w400",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w400),
              ),
              Text(
                " w500",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w500),
              ),
              Text(
                " w600",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w600),
              ),
              Text(
                "  w700",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w700),
              ),
              Text(
                "  w800",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w800),
              ),
              Text(
                "  w900",
                style: AppTextStyles.normalMidBlod
                    .copyWith(fontWeight: FontWeight.w900),
              ),
            ],
          ),
          const SizedBox(
            width: 30,
          ),
          RichText(
            text: TextSpan(
              children: [
                TextSpan(text: "latoBold.copyWith \n"),
                TextSpan(
                  text: "w100 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w100),
                ),
                TextSpan(
                  text: "w200 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w200),
                ),
                TextSpan(
                  text: "w300 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w300),
                ),
                TextSpan(
                  text: "w400 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w400),
                ),
                TextSpan(
                  text: " w500 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w500),
                ),
                TextSpan(
                  text: " w600 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w600),
                ),
                TextSpan(
                  text: "  w700 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w700),
                ),
                TextSpan(
                  text: "  w800 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w800),
                ),
                TextSpan(
                  text: "  w900 \n",
                  style: AppTextStyles.latoMidBlod
                      .copyWith(fontWeight: FontWeight.w900),
                ),
              ],
            ),
          ),
          const SizedBox(
            width: 30,
          ),
          RichText(
            text: TextSpan(
              children: [
                TextSpan(text: "lato.copyWith \n"),
                TextSpan(
                  text: "w100 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w100),
                ),
                TextSpan(
                  text: "w200 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w200),
                ),
                TextSpan(
                  text: "w300 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w300),
                ),
                TextSpan(
                  text: "w400 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w400),
                ),
                TextSpan(
                  text: " w500 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w500),
                ),
                TextSpan(
                  text: " w600 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w600),
                ),
                TextSpan(
                  text: "  w700 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w700),
                ),
                TextSpan(
                  text: "  w800 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w800),
                ),
                TextSpan(
                  text: "  w900 \n",
                  style:
                      AppTextStyles.lato.copyWith(fontWeight: FontWeight.w900),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Answer 1

There is a bug on the google_fonts_flutter package repo that talks about this: https://github.com/material-foundation/google-fonts-flutter/issues/141

To summarize, when you create a Google Font TextStyle, the fontFamily is set to the original weight you specified (ex. 'poppins-w400') instead of the general fontFamily name ('poppins').

You can fix this by specifying the fontFamily in your copyWith method.

 TextSpan(
                  text: "  w900 \n",
                  style: AppTextStyles.latoMidBlod
                       .copyWith(
                          fontWeight: FontWeight.w900,
                          fontFamily: GoogleFonts.poppins().fontFamily,
                     ),
                ),