Search code examples
flutterflutter-web

How can I know when a google font have been loaded completely in flutter for web?


I'm currently writing a webpage with flutter. In that, I'm using GoogleFonts package and I would like to know when the font has been loaded completely if there's a way to do that. The reason why I want to know that is below.

I'm wrapping the google fonts text with the AutoSizeText package(https://pub.dev/packages/auto_size_text) and it does not work properly when the first time you open the page because the AutoSizeText optimizes the font size for the default font, not the google font, since the google font has not been loaded yet. Consequently, the google font sometimes overflows the bounds. My workaround for it is to force reload the widget after a few seconds by doing something like this but it does not feel right.

@override
  void initState() {
    super.initState();
    waitForSomeMoment();
  }

  void waitForSomeMoment() async {
    await Future.delayed(
      Duration(milliseconds: 1000),
      () {
        setState(() {});
      },
    );
  }

Solution

  • I don't think there's a way to know that. But instead, you can bundle font files in your assets. Check out the end of the google_fonts page to learn how.