Flutter Theme FlatButton textColor in ButtonBar

user_6098000 0
Viewed 3868

After upgrading Flutter to version: [✓] Flutter (Channel master, v0.10.2-pre.82)

The primaryColor have disappeared from my FlatButton.

Widget:

new ButtonTheme.bar(
        // make buttons use the appropriate styles for cards

        child: new ButtonBar(
          children: <Widget>[
            new FlatButton(
              child: const Text('DISMISS'),
              onPressed: () {/* ... */},
            ),
            new FlatButton(
              child: const Text('LEARN MORE'),
              onPressed: () {/* ... */},
            ),
          ],
        ),
      ),

Theme:

final originalTextTheme = ThemeData.light().textTheme;
final originalButtonTheme = ThemeData.light().buttonTheme;    
final originalBody1 = originalTextTheme.body1;

    return ThemeData.light().copyWith(
        primaryColor: Colors.green[700],
        accentColor: Colors.green[500],
        buttonColor: Colors.grey[800],
        buttonTheme: originalButtonTheme,
        textTheme: originalTextTheme.copyWith(
            body1:
                originalBody1.copyWith(decorationColor: Colors.transparent)));

How do I theme the textColor of my FlatButtons?

flutter-layout flutter themes
1 Answers

If you want the your FlatButton's textColor to be the same as ThemeData.primaryColor, you also need to set ColorScheme.primary with the same value.

const primaryColor = Colors.deepOrange;

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: primaryColor,
        colorScheme: ColorScheme.light(
          primary: primaryColor, // -------> This will be your FlatButton's text color
        ),
        accentColor: Colors.amber,
      ),
      title: 'YourAwesomeApp',
      home: Scaffold(
        body: PageWithFlatButtons(),
      ),
    );
  }
}

class PageWithFlatButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: ButtonBar(
        alignment: MainAxisAlignment.center,
        children: <Widget>[
          new FlatButton(
            child: const Text('DISMISS'),
            onPressed: () {},
          ),
          new FlatButton(
            child: const Text('LEARN MORE'),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}
user_94494260
Related