Google font color is ignored

January 20, 2022

I have an OutlineButton where I try to use a google font for the text using the google-fonts dependency. The code looks like that:

OutlinedButton(
  child: const Text('Next'),
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      return colorPrimaryButton;
    }),
    textStyle: MaterialStateProperty.resolveWith((states) {
      return GoogleFonts.inter(textStyle: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white));
    })
  ),
  onPressed: () {
    // do something
  }),

Although I assigned white as the text color, the text appears blue-ish.

What am I missing here? Why wouldn’t the "Next" text appear in white?

>Solution :

Don’t need to change button textStyle just change child textSytle

OutlinedButton(
                  child: Text(
                    'Next',
                    style: GoogleFonts.inter(
                        textStyle: const TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                            color: Colors.white)),
                  ),
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.resolveWith((states) {
                      return Colors.indigo;
                    }),
                  ),
                  onPressed: () {
                    // do something
                  })

Preview