Home > Mobile >  Change color of text ( foreground ) in Elevated Button
Change color of text ( foreground ) in Elevated Button

Time:10-04

Using flutter, I set ElevatedButton theme in the style.dart with this

ThemeData appTheme(BuildContext context) {
  const fontFamilyFallBack = ['Lexend', 'NotoSans'];
  return ThemeData(
    primaryColor: Colors.white,
    backgroundColor: Colors.white,
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.green,
        onPrimary: Colors.white,
      ),
    ),
    textTheme: const TextTheme(
      headline1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
      ),
      subtitle1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
        fontSize: 20,
      ),
      bodyText1: TextStyle(
        fontFamilyFallback: fontFamilyFallBack,
        fontSize: 14,
      ),
    ),
  );
}

But still the color of foreground which is my text still not change to White as the value of onPrimary whereas the color of background is appliable

ElevatedButton(
        child: Text(
            'Tap go to second page',
            style: Theme.of(context).textTheme.bodyText1,
          ),
          onPressed: () => context.router.pushNamed('/error'),
        )),

described image

I also have tried ButtonStyle one but still get the same result

elevatedButtonTheme: ElevatedButtonThemeData(
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all<Color>(Colors.green),
        foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
      ),
    ),

CodePudding user response:

You pass ButtonStyle to the style property like this:

ThemeData(
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ButtonStyle(
            foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
          ),
        ),
      ),

CodePudding user response:

try this

ElevatedButton(
    child: Text(
        'Tap go to second page',
        style: 
Theme.of(context).textTheme.bodyText1.copyWith(color:Colors.green),
      ),
      onPressed: () => context.router.pushNamed('/error'),
    )),
  • Related