1

I noticed that overriding the theme by Theme(data: Theme.of(context).copyWith(xxx: ...), child: ...) does not affect some widgets. I came across similar phenomena several times while I was developing an app, but the below is the only instance I remember.

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        scaffoldBackgroundColor: Colors.white,
        canvasColor: Colors.blue.shade100, // Background color of TextField menu
        buttonTheme: ThemeData().buttonTheme.copyWith(
              textTheme: ButtonTextTheme.accent,
              colorScheme: ColorScheme.light(secondary: Colors.blue), // Color of button label and of text on TextField menu
            ),
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: Theme.of(context).copyWith(
        canvasColor: Colors.green.shade100, // This is ignored on TextField menu.
        buttonTheme: Theme.of(context).buttonTheme.copyWith(
              colorScheme: Theme.of(context)
                  .buttonTheme
                  .colorScheme
                  .copyWith(secondary: Colors.green), // This is applied to button label, but not to TextField menu.
            ),
      ),
      child: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const TextField(),
              RaisedButton(
                child: const Text('Button'),
                onPressed: () => ...,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

In this example, the colors of the text and background of the context menu (shown on long-press of TextField) should also be changed to green and green.shade100, but actually only the button label color is changed. Why is it? Am I doing anything wrong?

enter image description here

kaboc
  • 814
  • 1
  • 6
  • 23
  • To change the button color you have to change the `buttonColor` in `buttonTheme` – Er1 Jul 06 '20 at 10:05
  • @Er1 What I'm asking about is not the button color but the context menu color. – kaboc Jul 06 '20 at 10:11
  • I'm sorry, I misread your question. However I don't see why changing the canvas colour or the button theme would change the text and background colour of a TextField. You might want to look into using InputDecoration for your TextField. – Er1 Jul 06 '20 at 10:21
  • @Er1 Again, not the colour of `TextField` but that of the context menu popping up when you long-press `TextField`. I haven't changed the canvas colour of the button theme either. It's just the canvas colour. – kaboc Jul 06 '20 at 10:27
  • I'm sorry again, mondays I guess. I now (hopefully) understand what you mean and I don't think I know the answer. Other people seem to be having issues with this as well on the Github: https://github.com/flutter/flutter/issues/42122 – Er1 Jul 06 '20 at 10:36
  • @Er1 Thanks. Some change seems to be planned/ongoing. What I want to do may not be possible before the related code is improved on the framework side. – kaboc Jul 06 '20 at 10:45

0 Answers0