Cannot change font color in ElevatedButton.styleFrom()-CodePudding

I am trying to write a theme class for my flutter project. I want to define the theme for all the elevated buttons I use in the app and here is the ThemeData in my themes.dart

static ThemeData get lightTheme {
    return ThemeData(
        primaryColor: Color.fromARGB(255, 242, 229, 188),
        backgroundColor: Color.fromARGB(255, 242, 229, 188),
        scaffoldBackgroundColor: Color.fromARGB(255, 242, 229, 188),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            side: const BorderSide(
                color: Color.fromARGB(255, 60, 56, 54), width: 2),
            minimumSize: Size(50, 50),
            // fixedSize: const Size(50, 100),
            elevation: 0,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
            primary: Color.fromARGB(255, 126, 114, 107),

            textStyle: GoogleFonts.playfairDisplay(
                textStyle: const TextStyle(
              color: Colors.amber,
              fontWeight: FontWeight.w900,
              fontSize: 20,
            )),
          ),
        ),
        textTheme: TextTheme(
            headline1: TextStyle(color: Colors.black),
            headline2: TextStyle(color: Colors.black),
            bodyText1: TextStyle(color: Colors.black),
            bodyText2: TextStyle(color: Colors.black)));
  }

and In the main.dart I have a function that creates the buttons

final makeButtons = ListView.separated(
        separatorBuilder: ((context, index) {
          return const SizedBox(
            height: 10,
          );
        }),
        padding: const EdgeInsets.all(20),
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: buttonNames.length,
        itemBuilder: ((context, index) {
          return ElevatedButton(
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) {
                  if (buttonNames[index] == 'How to use') {
                    return const TutorialView();
                  } else if (buttonNames[index] == 'Warm Up') {
                    return const WarmUpPageWidget();
                  } else if (buttonNames[index] == 'Emotion Map') {
                    return EmotionMap();
                  } else if (buttonNames[index] ==
                      'Review Intonation Patterns') {
                    return const ReviewPatterns();
                  } else if (buttonNames[index] ==
                      'Umbrella Terms & Emotions') {
                    return const UmbrellaEmotionListView();
                  } else if (buttonNames[index] == 'Quick Practice') {
                    return PracticePhrase(phrase: randomPhrase);
                  } else if (buttonNames[index] ==
                      'Same Phrase, different emotions') {
                    return ScaffoldMessenger(
                        child: Container(
                      alignment: Alignment.center,
                      child: const Text('comming soon ...'),
                    ));
                  }
                  throw 'page not found';
                }));
              },
              child: Text(
                buttonNames[index],
              ));
        }));

The problem is: I am able to change the color of the buttons and the size and weight of the texts in the button, but I just can't change the color of those texts in the button. They just appear not amber or blue, despite I put blue in the GoogleFonts and amber in the TextStyle.

CodePudding user response：

You have to use foregroundColor color property to change color of your text.

more on theme of buttons https://docs.flutter.dev/release/breaking-changes/buttons.

static ThemeData get lightTheme {
    return ThemeData(
        primaryColor: Color.fromARGB(255, 242, 229, 188),
        backgroundColor: Color.fromARGB(255, 242, 229, 188),
        scaffoldBackgroundColor: Color.fromARGB(255, 242, 229, 188),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            foregroundColor: MaterialStateProperty.all<Color>(Colors.black), //here these will effect the color of your text
            side: const BorderSide(
                color: Color.fromARGB(255, 60, 56, 54), width: 2),
            minimumSize: Size(50, 50),
            // fixedSize: const Size(50, 100),
            elevation: 0,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
            primary: Color.fromARGB(255, 126, 114, 107),

            textStyle: GoogleFonts.playfairDisplay(
                textStyle: const TextStyle(
              color: Colors.amber,
              fontWeight: FontWeight.w900,
              fontSize: 20,
            )),
          ),
        ),
        textTheme: TextTheme(
            headline1: TextStyle(color: Colors.black),
            headline2: TextStyle(color: Colors.black),
            bodyText1: TextStyle(color: Colors.black),
            bodyText2: TextStyle(color: Colors.black)));
  }
```


  [1]: https://docs.flutter.dev/release/breaking-changes/buttons

CodePudding user response：

I have to use onPrimary to change the color of the texts

  static ThemeData get lightTheme {
    return ThemeData(
        primaryColor: Color.fromARGB(255, 242, 229, 188),
        backgroundColor: Color.fromARGB(255, 242, 229, 188),
        scaffoldBackgroundColor: Color.fromARGB(255, 242, 229, 188),
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            side: const BorderSide(
                color: Color.fromARGB(255, 60, 56, 54), width: 2),
            minimumSize: Size(50, 50),
            elevation: 0,
            shape:
                RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
            primary: Color.fromARGB(255, 126, 114, 107),
            onPrimary: Colors.black87, // here it changes the color of the text on the button 
            textStyle: GoogleFonts.playfairDisplay(
                color: Colors.blue,
                textStyle: const TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.w900,
                )),
          ),
        ),
        textTheme: TextTheme(
            headline1: TextStyle(color: Colors.black),
            headline2: TextStyle(color: Colors.black),
            bodyText1: TextStyle(color: Colors.black),
            bodyText2: TextStyle(color: Colors.black)));
  }