Cannot change font color in ElevatedButton.styleFrom() flutter-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：

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)));
  }

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