Theme.textTheme.button.color is ignored by RaisedButton & FlatButton #19623

Activity

1. modulovalue

   closed this as completedon Jul 20, 2018
2. modulovalue

   reopened this on Jul 20, 2018
3. zoechi

   added

   frameworkflutter/packages/flutter repository. See also f: labels.flutter/packages/flutter repository. See also f: labels.

   p: material_uimaterial_ui package in flutter/packagesmaterial_ui package in flutter/packages

   a: fidelityMatching the OEM platforms betterMatching the OEM platforms better

   on Jul 21, 2018
4. zoechi

   added this to the GoalsThis milestone has been deleted milestone on Jul 21, 2018
5. zoechi commented on Jan 24, 2019

   

   zoechi

   on Jan 24, 2019

   Contributor

   More actions

   To investigate we would need a minimal runnable reproduction
   as a single file so that we can just copy your code into lib/main.dart of a new project and run to reproduce.
6. zoechi

   added

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Jan 24, 2019
7. zoechi commented on Jan 24, 2019

   

   zoechi

   on Jan 24, 2019

   Contributor

   More actions

   There is no ThemeData.button anymore.
   You can use ThemeData.buttonTheme.textTheme to select accent, normal, primary.

   I haven't found a way to globally change button text style besides what I mentioned before.
8. modulovalue commented on Jan 24, 2019

   

   modulovalue

   on Jan 24, 2019

   Last edited by zoechi

   Author

   More actions

   AnimatedTheme(
       data: ThemeData.light().copyWith(
           accentColor: Colors.blue,
           buttonTheme: ButtonThemeData(
               textTheme: ButtonTextTheme.accent,
           ),
           textTheme: ThemeData
               .light()
               .textTheme
               .copyWith(
               button: TextStyle(
                   color: Colors.pink,
               )
           ),
       ),
       child: RaisedButton(
           child: Text("ButtonTextTheme.accent"),
           onPressed: () {},
       ),
   ),
   AnimatedTheme(
       data: ThemeData.light().copyWith(
           accentColor: Colors.blue,
           buttonTheme: ButtonThemeData(
               textTheme: ButtonTextTheme.normal,
           ),
           textTheme: ThemeData
               .light()
               .textTheme
               .copyWith(
               button: TextStyle(
                   color: Colors.pink,
               )
           ),
       ),
       child: RaisedButton(
           child: Text("ButtonTextTheme.normal"),
           onPressed: () {},
       ),
   ),
   AnimatedTheme(
       data: ThemeData.light().copyWith(
           accentColor: Colors.blue,
           buttonTheme: ButtonThemeData(
               textTheme: ButtonTextTheme.primary,
           ),
           textTheme: ThemeData
               .light()
               .textTheme
               .copyWith(
               button: TextStyle(
                   color: Colors.pink,
               )
           ),
       ),
       child: RaisedButton(
           child: Text("ButtonTextTheme.primary"),
           onPressed: () {},
       ),
   ),                  

   ThemeData.textTheme.button.color is never used with the currently available ButtonTextTheme values.
9. no-response

   removed

   waiting for responseThe Flutter team cannot make further progress on this issue until the original reporter respondsThe Flutter team cannot make further progress on this issue until the original reporter responds

   on Jan 24, 2019
10. jaumard commented on Jan 31, 2019

    

    jaumard

    on Jan 31, 2019

    Last edited by zoechi

    Contributor

    More actions

    So here is a small way to reproduce it:

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    final color = Colors.blue;
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primaryColor: color,
            buttonColor: color,
            buttonTheme: ButtonThemeData(buttonColor: color),
            textTheme: const TextTheme(body1: TextStyle(color: Colors.grey), button: TextStyle(color: Colors.red)),
            iconTheme: const IconThemeData(color: Colors.white),
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
      final String title;
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            // Here we take the value from the MyHomePage object that was created by
            // the App.build method, and use it to set our appbar title.
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                FlatButton(onPressed: () {}, child: Text('Test')),
                RaisedButton(onPressed: () {}, child: Text('Test')),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {},
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }

    I expect the raised and flat button text is red, but is stay black.

    I'm using 1.0.0 stable version of flutter
11. GiacomoPignoni commented on Jan 31, 2019

    

    GiacomoPignoni

    on Jan 31, 2019 · Hidden as off-topic

    show commentMore actions
12. fgatti675 commented on Feb 4, 2019

    

    fgatti675

    on Feb 4, 2019 · Hidden as off-topic

    show commentMore actions
13. pdefuns commented on Feb 6, 2019

    

    pdefuns

    on Feb 6, 2019

    Last edited by pdefuns

    More actions

    Same here.. Please upvote the first comment

    Eg. for the DatePicker as well (for the others I can override it)

    👍React with 👍9Reacted by Günter Zöchbauer, Muhammad Adil, DineshTamang, Danilo Valle, SoundConception, Andrew Johnson, AndreBerzun, Christian Mürtz and Muhammad Alif Akbar
14. 5 remaining items

    Load more

15. DineshTamang commented on Jun 20, 2019

    

    DineshTamang

    on Jun 20, 2019

    More actions

    I have tried to change colour of DateTimePicker

    
            Theme(
                data: Theme.of(context).copyWith(
                  primaryColor: Colors.orange,
                  accentColor: Colors.green,
                  buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.normal)
    
                ),
                child: Builder(builder: (context) {
                return Button(onTap:(){
    //                  displaying picker from here
                  });
                }))
    

    I have tried everything with button theme

    buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary)
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.accent)
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.normal)

    and many other things i have tried at in theme, but end results are not worked for me the button's text color stays same

    Here is the screenshot

    

    I am exactly facing the same problem as mentioned. Please look on this issue asap if possible that would be very helpful.
16. lukepighetti commented on Jun 20, 2019

    

    lukepighetti

    on Jun 20, 2019

    Last edited by lukepighetti

    Contributor

    More actions

    If Flutter team is too busy to fix broken theme stuff, can they point us in the right direction for what blockers can be addressed by the community?

    👍React with 👍19Reacted by Oscar Reyes, sckoh, Vivek Kekuda, Giraldi Maggio, Michael Pfaff, Vince Varga, Ryosuke Yokota, enricobenedos, boskokg, Tobe Osakwe and 9 more

    😕React with 😕3Reacted by Aston Yao, boskokg and medogme
17. Lootwig commented on Jul 9, 2019

    

    Lootwig

    on Jul 9, 2019

    More actions

    The docs of ButtonTextTheme states:

    enum ButtonTextTheme {
      /// Button text is black or white depending on [ThemeData.brightness].
      normal,
    
      /// Button text is [ThemeData.accentColor].
      accent,
    
      /// Button text is based on [ThemeData.primaryColor].
      primary,
    }
    

    For normal as well as accentColor, the description is in fact working.
    For primary. i have observed the text color to actually be dependent on primarySwatch rather than just primaryColor (resulting in either black or white, according to the programmatically determined brightness of your swatches' colors).

    So if you want to colorize your button, you will have to pick the corresponding accentColor and set ButtonTextTheme.accent accordingly. Maybe the "TextTheme..." properties are now legacy ways to achieve the theming which have been preserved for compatibility reasons..?

    👍React with 👍5Reacted by miguelpruivo, Bhavya Latha Bandaru, Yue Yang, leiguang and Andrey Zamogilin
18. ykaito21 commented on Oct 1, 2019

    

    ykaito21

    on Oct 1, 2019

    Last edited by ykaito21

    More actions

    I have tried to change colour of DateTimePicker

    
            Theme(
                data: Theme.of(context).copyWith(
                  primaryColor: Colors.orange,
                  accentColor: Colors.green,
                  buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.normal)
    
                ),
                child: Builder(builder: (context) {
                return Button(onTap:(){
    //                  displaying picker from here
                  });
                }))
    

    I have tried everything with button theme

    buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.primary)
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.accent)
buttonTheme: ButtonThemeData(textTheme: ButtonTextTheme.normal)

    and many other things i have tried at in theme, but end results are not worked for me the button's text color stays same

    Here is the screenshot

    

    I also have the same problem. Does someone knows any update or way to solve this problem?
    I just override my theme with new theme for showDatePicker
19. migalv commented on Dec 20, 2019

    

    migalv

    on Dec 20, 2019

    More actions

    Hello everyone, I have had this issue and it was very fustrating to solve, but I think I found some kind of work around.

    It seems that the only way to apply color to the text of FlatButtons using a Theme is by using a ColorScheme like this:

    ThemeData yourTheme= ThemeData(
    
        // Your themes 
        // . . . maybe you could be setting the textTheme
        // . . . or the primary & secondary colors
        // . . . even set your color scheme
        ////////////////
    
        buttonTheme: ButtonThemeData(
          colorScheme: ColorScheme( // You need to set up a color scheme for your 
            buttomTheme (even if you already did on your ThemeData)
            background: background, // NOT USED
            brightness: Brightness.light, // I have tried dark & light and it seems like this workaround only works on ligh
            error: errorColor, // NOT USED
            onBackground: Colors.black87, // NOT USED
            onError: Colors.white, // NOT USED
            onSurface: Colors.black87, // NOT USED
            onSecondary: Colors.black87, // NOT USED
            onPrimary: Colors.black, // NOT USED
            primary: secondary700, // IMPORTANT LINES: This sets the text color for FlatButtons
            primaryVariant: secondary700,
            secondary: Colors.black, // IMPORTANT LINES: This sets the text color for RaisedButtons
            secondaryVariant: Colors.black, 
            surface: Colors.white, // NOT USED
          ),
          buttonColor: secondaryMain,  // IMPORTANT LINES: This sets the fill color of your raised buttons
          disabledColor: disabledColor, 
          textTheme: ButtonTextTheme.accent, // IMPORTANT LINES: Makes everything happen
        );
      );
    

    For some other reason this does not apply to DatePickers, so the workaround for those is to do the same, like this:

    DateTime selectedDate = await showDatePicker(
                      context: context,
                      initialDate: DateTime.now(),
                      firstDate: DateTime.now().subtract(Duration(hours: 24)),
                      lastDate: DateTime(2030),
                      builder: (context, child) => Theme(
                        data: ThemeData(
                          colorScheme: ColorScheme(
                            background: background,
                            brightness: Brightness.light,
                            error: errorColor,
                            onBackground: Colors.black87,
                            onError: Colors.white,
                            onSurface: Colors.black87,
                            onSecondary: Colors.black87,
                            onPrimary: Colors.black,
                            primary: secondary700, //  FLAT BUTTON COLOR
                            primaryVariant: secondary700,
                            secondary: Colors.black,
                            secondaryVariant: Colors.black,
                            surface: Colors.white,
                          ),
                          primaryColor: secondaryMain, //  HEADER COLOR
                          accentColor: secondaryMain, // DATE COLOR
                          buttonTheme: ButtonThemeData(
                            textTheme: ButtonTextTheme.accent,
                          ),
                        ),
                        child: child,
                      ),
                    );
    

    Hope it works for you too ;)
    Let me know if it did! :P

    👍React with 👍6Reacted by ykaito21, Wilberforce Uwadiegwu , padmanabanSampath, mquerique, Gergely Jahn and vyarovyi-godaddy

    😄React with 😄1Reacted by padmanabanSampath

    🎉React with 🎉3Reacted by padmanabanSampath, Gergely Jahn and Prince Sanjivy
20. vincevargadev commented on Dec 20, 2019

    

    vincevargadev

    on Dec 20, 2019

    More actions

    FWIW, I just copied the code for the time picker and modified it by explicitly setting the colors of the flat buttons, it took around 5 minutes, so that might be the quickest solution.
21. g1eny0ung commented on Dec 26, 2019

    

    g1eny0ung

    on Dec 26, 2019

    More actions

    Currently, for showDatePicker, I prefer to use primarySwatch to set the buttons' color. This is a relatively simple way that I have found without much more modification.

    ❤️React with ❤️3Reacted by Sinan Baymammadli, sun and Boehrsi
22. padmanabanSampath commented on Feb 16, 2020

    

    padmanabanSampath

    on Feb 16, 2020

    More actions

    Hello everyone, I have had this issue and it was very fustrating to solve, but I think I found some kind of work around.

    It seems that the only way to apply color to the text of FlatButtons using a Theme is by using a ColorScheme like this:

    ThemeData yourTheme= ThemeData(
    
        // Your themes 
        // . . . maybe you could be setting the textTheme
        // . . . or the primary & secondary colors
        // . . . even set your color scheme
        ////////////////
    
        buttonTheme: ButtonThemeData(
          colorScheme: ColorScheme( // You need to set up a color scheme for your 
            buttomTheme (even if you already did on your ThemeData)
            background: background, // NOT USED
            brightness: Brightness.light, // I have tried dark & light and it seems like this workaround only works on ligh
            error: errorColor, // NOT USED
            onBackground: Colors.black87, // NOT USED
            onError: Colors.white, // NOT USED
            onSurface: Colors.black87, // NOT USED
            onSecondary: Colors.black87, // NOT USED
            onPrimary: Colors.black, // NOT USED
            primary: secondary700, // IMPORTANT LINES: This sets the text color for FlatButtons
            primaryVariant: secondary700,
            secondary: Colors.black, // IMPORTANT LINES: This sets the text color for RaisedButtons
            secondaryVariant: Colors.black, 
            surface: Colors.white, // NOT USED
          ),
          buttonColor: secondaryMain,  // IMPORTANT LINES: This sets the fill color of your raised buttons
          disabledColor: disabledColor, 
          textTheme: ButtonTextTheme.accent, // IMPORTANT LINES: Makes everything happen
        );
      );
    

    For some other reason this does not apply to DatePickers, so the workaround for those is to do the same, like this:

    DateTime selectedDate = await showDatePicker(
                      context: context,
                      initialDate: DateTime.now(),
                      firstDate: DateTime.now().subtract(Duration(hours: 24)),
                      lastDate: DateTime(2030),
                      builder: (context, child) => Theme(
                        data: ThemeData(
                          colorScheme: ColorScheme(
                            background: background,
                            brightness: Brightness.light,
                            error: errorColor,
                            onBackground: Colors.black87,
                            onError: Colors.white,
                            onSurface: Colors.black87,
                            onSecondary: Colors.black87,
                            onPrimary: Colors.black,
                            primary: secondary700, //  FLAT BUTTON COLOR
                            primaryVariant: secondary700,
                            secondary: Colors.black,
                            secondaryVariant: Colors.black,
                            surface: Colors.white,
                          ),
                          primaryColor: secondaryMain, //  HEADER COLOR
                          accentColor: secondaryMain, // DATE COLOR
                          buttonTheme: ButtonThemeData(
                            textTheme: ButtonTextTheme.accent,
                          ),
                        ),
                        child: child,
                      ),
                    );
    

    Hope it works for you too ;)
    Let me know if it did! :P

    This Did it...... thanks
23. HansMuller

    self-assigned this

    on Mar 27, 2020
24. HansMuller commented on Apr 14, 2020

    

    HansMuller

    on Apr 14, 2020

    Contributor

    More actions

    @modulovalue, @jaumard @YAPPDEF @lukepighetti @kolaente @Lootwig @vware @ch-muhammad-adil @fgatti675 @DineshTamang @migalv @ykaito21 @padmanabanSampath There's a rather wide-reaching proposal to remedy the problems that have come up in this issue. Please take a look at #54776. We'd appreciate your feedback.
25. modulovalue commented on Apr 14, 2020

    

    modulovalue

    on Apr 14, 2020

    Author

    More actions

    @HansMuller Thank you.

    For those stumbling across this issue, please check out #54776 where a concrete solution is being proposed.
26. modulovalue

    closed this as completedon Apr 14, 2020
27. filiph

    added

    a: annoyanceRepeatedly frustrating issues with non-experimental functionalityRepeatedly frustrating issues with non-experimental functionality

    on May 11, 2020
28. github-actions commented on Aug 15, 2021

    

    github-actionsbot

    on Aug 15, 2021

    More actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
29. github-actions

    locked as resolved and limited conversation to collaborators on Aug 15, 2021